Javascript 使用动态数据显示google图形未正确显示_Javascript_Php_Html_Css_Google Visualization

Javascript 使用动态数据显示google图形未正确显示

javascript php html css google-visualization

Javascript 使用动态数据显示google图形未正确显示,javascript,php,html,css,google-visualization,Javascript,Php,Html,Css,Google Visualization,我想在我的网页中显示销售和购买图表。用户可以选择类别采购、销售、生产。我有单独的采购和销售表（ACCPURSE和AccSales）。生产是两者的结合。在用户可以选择视图之后，它将是周视图，其中图形将显示所选月份的周。每月指所选年度所有月份的图表。每年意味着它将显示每年。在所有图形中，我只想显示金额的总和。之后，还有两个下拉列表选择年份和月份我要在其中显示图形的页面链接 pass.html <head> <title>Past Performance Grap

我想在我的网页中显示销售和购买图表。用户可以选择类别采购、销售、生产。我有单独的采购和销售表（ACCPURSE和AccSales）。生产是两者的结合。在用户可以选择视图之后，它将是周视图，其中图形将显示所选月份的周。每月指所选年度所有月份的图表。每年意味着它将显示每年。在所有图形中，我只想显示金额的总和。之后，还有两个下拉列表选择年份和月份

我要在其中显示图形的页面链接

pass.html

 <head>
    <title>Past Performance Graph</title>
    <link rel="stylesheet" type="text/css" href="css/pastperfomance.css">
<!--Load the AJAX API-->
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">

// Load the Visualization API and the piechart package.
google.charts.load('current', {'packages':['bar']});



function drawChart() {

     var category = document.getElementById('category');
      var categorySelected = category.options[category.selectedIndex].value;
      var view = document.getElementById('view');
      var viewSelected = view.options[view.selectedIndex].value;
      var month = document.getElementById('month');
      var monthSelected = month.options[month.selectedIndex].value;
      var year = document.getElementById('year');
      var yearSelected = year.options[year.selectedIndex].value;

      var settings = {
    "url": "php/past.php",
    "method": "post",
    "headers": {
    "Content-Type": "application/x-www-form-urlencoded",
    },
    "data": {
    "category": categorySelected,
    "view": viewSelected,
    "month": monthSelected,
     "year": yearSelected
     }
    }

    $.ajax(settings).done(function(response) {
var data = google.visualization.arrayToDataTable([
['Month', 'Amount'], response
]);

var options = {
chart: {
  title: 'Past Performance Graph',
  subtitle: 'Duration : Jan 2018- Jun 2018',
}
};

var chart = new google.charts.Bar(document.getElementById('graph'));
chart.draw(data, google.charts.Bar.convertOptions(options));
});
}

</script>
</head>


过去性能图
//加载可视化API和piechart包。
load（'current'，{'packages'：['bar']}）；
函数绘图图（）{
var category=document.getElementById（'category'）；
var categorySelected=category.options[category.selectedIndex].value；
var view=document.getElementById（'view'）；
var viewSelected=view.options[view.selectedIndex].value；
var month=document.getElementById（'month'）；
var monthSelected=month.options[month.selectedIndex].value；
var year=document.getElementById（'year'）；
var yearSelected=year.options[year.selectedIndex].value；
变量设置={
“url”：“php/pass.php”，
“方法”：“发布”，
“标题”：{
“内容类型”：“应用程序/x-www-form-urlencoded”，
},
“数据”：{
“类别”：选择的类别，
“视图”：选中视图，
“月”：当选的月份，
“年”：所选的年
}
}
$.ajax（设置）.done（函数（响应）{
var data=google.visualization.arrayToDataTable([
['月份'，'金额']，答复
]);
变量选项={
图表：{
标题：“过去的绩效图”，
字幕：“持续时间：2018年1月-2018年6月”，
}
};
var chart=new google.charts.Bar（document.getElementById（'graph'）；
绘制（数据，google.charts.Bar.convertOptions（选项））；
});
}

pass.php

<?php

$category = $_POST["category"];
$view = $_POST["view"];
$month = $_POST["month"];
$year = $_POST["year"];

 $con = mysqli_connect("localhost","username","pw","db");

 if($category == "Purchase"){
if($view == "Weekly"){
    $sql = "SELECT Date,SUM(Amount) from AccPurchase WHERE Date LIKE '$year-$month%' GROUP BY WEEK(Date)";
}else if($view == "Monthly"){
    $sql = "SELECT Date,SUM(Amount) from AccPurchase WHERE Date LIKE '$year%' GROUP BY MONTH(Date)";
}else if($view == "Yearly"){
    $sql = "SELECT Date,SUM(Amount) from AccPurchase GROUP BY YEAR(Date)";
}
}else if($category == "Sales"){
if($view == "Weekly"){
    $sql = "SELECT Date,SUM(Amount) from AccSales WHERE Date LIKE '$year-$month%' GROUP BY WEEK(Date)";
}else if($view == "Monthly"){
    $sql = "SELECT Date,SUM(Amount) from AccSales WHERE Date LIKE '$year%' GROUP BY MONTH(Date)";
}else if($view == "Yearly"){
    $sql = "SELECT Date,SUM(Amount) from AccSales GROUP BY YEAR(Date)";
}
}
$exc = mysqli_query($con, $sql);
$rows = array();
while ($row = mysqli_fetch_assoc($exc)) {
$rows[] = array("v"=>$row["Date"], "f"=>$row["SUM(Amount)"]);
}
header('Content-Type: application/json');
echo json_encode($rows);
mysqli_close($con);
?>

有一些问题：
如果要在客户端中使用JSON，必须从服务器返回JSON。您的代码未返回有效的JSON-['2018-06-09'、'1500']、['2018-06-10'、'538900']，
它无效。您需要将“
替换为”
。通常情况下，最好创建一个对象并将其“字符串化”，这样可以确保您拥有一个有效的对象。您可以在此处看到如何执行此操作：
替换：
while（$row=mysqli\u fetch\u数组（$exc））{
echo json_编码（“[”$row[“Date”]。”，“$row[“SUM（Amount）”），”）；
}

与：
$rows=array（）；
while（$row=mysqli\u fetch\u assoc（$exc））{
$rows[]=数组（$row[“Date”]，$row[“Amount”]）；
}
echo json_编码（$rows）；

另一个问题是，您发送的post
请求错误。您不应该将值放在url中，而应该将其作为JSON对象数据传递，如下所示：
var设置={
“url”：”https://smilestechno.000webhostapp.com/My/php/past.php",
“方法”：“发布”，
“标题”：{
“内容类型”：“应用程序/x-www-form-urlencoded”，
},
“数据”：{
“类别”：“购买”，
“查看”：“每周”，
“月”：“06”，
“年份”：“2018年”
}
}
$.ajax（设置）.done（函数（jsonData）{
var data=google.visualization.arrayToDataTable([
['月份'，'金额']，jsonData
]);
变量选项={
图表：{
标题：“比较分析”，
字幕：“持续时间：2018年1月-2018年6月”，
}
};
var chart=new google.charts.Bar（document.getElementById（'graph'）；
});

请记住，ajax
调用是异步的（*不要使用async:false
），因此只有在得到响应后才能绘制图表
*从jQuery1.8开始，不推荐在jqXHR（$.Deferred）中使用async:false；您必须使用success/error/complete回调选项，而不是jqXHR对象的相应方法，例如jqXHR.done（）
你的混合Javascript和PHP是不可能的，PHP是服务器端系统Javascript是客户端'document.write（categorySelected）==“购买”“
将始终为false，字符串文档。write…
与字符串Purchase
不相等，那么如何执行此操作@martinbarkert这取决于你的情况，你可以使用AJAX根据你选择的选项获取结果，并获得图形数组的JSON版本并重新加载。你说我不能在php内部使用javascript。但我在许多帖子中看到，他们在使用脚本的php中使用javascripttag@Acg你是对的。你可以这样做。php仅用服务器的结果（当然应该是html）替换
标记。当您希望让用户输入其值时，Martin是正确的。在本例中，您可以使用A.ajax，然后用新数据刷新图形。B.使用用户的输入进行post
调用，并根据它呈现页面。你可以阅读谷歌的指南，查看我的更新代码，也可以查看我的链接。图形即将出现，但它只设置了我在两个轴上的数量。同时检查我在聊天室给你发送的链接。True。从服务器提供的格式无效。您应该提供一个数组，其项数和您提供给图形的项数相同，在您的例子中，这意味着2。响应应该如下所示：[“2018-05-23”，“400”]
。即使如此，由于您只有一个结果，它看起来会很奇怪：。您需要提供更多行来与@Acg进行比较。有什么想法吗？