修改 成功:函数(RES) { var costData = []; var costData2 = [];
costData.push(res['income']);
costData2.push(res['instIncome']);
var areaChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July", "August"
, "September", "October", "November", "December"],
datasets: [
{
label: "Cash Income",
strokeColor: "rgba(210, 214, 222, 1)",
pointColor: "rgba(210, 214, 222, 1)",
pointStrokeColor: "#c1c7d1",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: costData
}
]
};
var barChartCanvas = $("#barChart").get(0).getContext("2d");
var barChart = new Chart(barChartCanvas);
var barChartData = areaChartData;
barChartData.datasets[0].fillColor = "#00a65a";
barChartData.datasets[0].strokeColor = "#00a65a";
barChartData.datasets[0].pointColor = "#00a65a";
var barChartOptions = {
//Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
scaleBeginAtZero: true,
//Boolean - Whether grid lines are shown across the chart
scaleShowGridLines: true,
//String - Colour of the grid lines
scaleGridLineColor: "rgba(0,0,0,.05)",
//Number - Width of the grid lines
scaleGridLineWidth: 1,
//Boolean - Whether to show horizontal lines (except X axis)
scaleShowHorizontalLines: true,
//Boolean - Whether to show vertical lines (except Y axis)
scaleShowVerticalLines: true,
//Boolean - If there is a stroke on each bar
barShowStroke: true,
//Number - Pixel width of the bar stroke
barStrokeWidth: 2,
//Number - Spacing between each of the X value sets
barValueSpacing: 5,
//Number - Spacing between data sets within X values
barDatasetSpacing: 1,
//String - A legend template
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
//Boolean - whether to make the chart responsive
responsive: true,
maintainAspectRatio: true
};
barChartOptions.datasetFill = false;
barChart.Bar(barChartData, barChartOptions);
}
这是PHP代码:
$sql = "SELECT
sum(cost) as cost
FROM
(
SELECT
sum(project_cost) as cost,
month(date_now) as month
FROM
dentist.patient_info
WHERE id_logged=:logged AND year(date_now)=:year_now AND payment_type=:pt
GROUP BY month(date_now)
UNION
SELECT
sum(payment),
month(date_now)
FROM
debt
WHERE year(debt.date_now)=:year_now
UNION SELECT 0,1
UNION SELECT 0,2
UNION SELECT 0,3
UNION SELECT 0,4
UNION SELECT 0,5
UNION SELECT 0,6
UNION SELECT 0,7
UNION SELECT 0,8
UNION SELECT 0,9
UNION SELECT 0,10
UNION SELECT 0,11
UNION SELECT 0,12
) tmp
GROUP BY month";
$sqlStmt = $conn->prepare($sql);
$sqlStmt->bindValue(":logged", $id_logged);
$sqlStmt->bindValue(":pt", $c);
$sqlStmt->bindValue(":year_now", $date1);
$exec = $sqlStmt->execute();
$res1 = $sqlStmt->fetchAll();
$sql2 = "SELECT
sum(cost) as cost
FROM
(
SELECT
sum(payment) as cost,
month(date_now) as month
FROM
debt
WHERE id_logged=:logged AND year(date_now)=:year_now
GROUP BY month(date_now)
UNION SELECT 0,1
UNION SELECT 0,2
UNION SELECT 0,3
UNION SELECT 0,4
UNION SELECT 0,5
UNION SELECT 0,6
UNION SELECT 0,7
UNION SELECT 0,8
UNION SELECT 0,9
UNION SELECT 0,10
UNION SELECT 0,11
UNION SELECT 0,12
) tmp
GROUP BY month";
$sqlStmt2 = $conn->prepare($sql2);
$sqlStmt2->bindValue(":logged", $id_logged);
$sqlStmt2->bindValue(":year_now", $date1);
$exec2 = $sqlStmt2->execute();
$res2 = $sqlStmt2->fetchAll();
$res['income']=$res1;
$res['instIncome']=$res2;
echo json_encode($res);
结果:
没有数据显示
结束编辑
我有这个PHP代码,每个月的收入总和:
$res = array();
$c = "cash";
$i = "installment";
//SUM of cash paid Month
$sql = "SELECT
sum(cost) as cost
FROM
(
SELECT
sum(project_cost) as cost,
month(date_now) as month
FROM
dentist.patient_info
WHERE id_logged=:logged AND year(date_now)=:year_now AND payment_type=:pt
GROUP BY month(date_now)
UNION
SELECT
sum(payment),
month(date_now)
FROM
debt
WHERE year(debt.date_now)=:year_now
UNION SELECT 0,1
UNION SELECT 0,2
UNION SELECT 0,3
UNION SELECT 0,4
UNION SELECT 0,5
UNION SELECT 0,6
UNION SELECT 0,7
UNION SELECT 0,8
UNION SELECT 0,9
UNION SELECT 0,10
UNION SELECT 0,11
UNION SELECT 0,12
) tmp
GROUP BY month";
$sqlStmt = $conn->prepare($sql);
$sqlStmt->bindValue(":logged", $id_logged);
$sqlStmt->bindValue(":pt", $c);
$sqlStmt->bindValue(":year_now", $date1);
$exec = $sqlStmt->execute();
$res = $sqlStmt->fetchAll();
echo json_encode($res);
结果将发送回AJAX成功函数,并使用ChartJS
显示在条形图中。
现在我需要在同一个图表上创建另一个结果栏。 这是脚本:
success:function(res)
{
var costData = [];
$.each(res, function( key, row)
{
costData.push(row['cost']);
});
var areaChartData = {
labels: ["January", "February", "March", "April", "May", "June", "July", "August"
, "September", "October", "November", "December"],
datasets: [
{
label: "Cash Income",
strokeColor: "rgba(210, 214, 222, 1)",
pointColor: "rgba(210, 214, 222, 1)",
pointStrokeColor: "#c1c7d1",
pointHighlightFill: "#fff",
pointHighlightStroke: "rgba(220,220,220,1)",
data: costData
}
]
};
var barChartCanvas = $("#barChart").get(0).getContext("2d");
var barChart = new Chart(barChartCanvas);
var barChartData = areaChartData;
barChartData.datasets[0].fillColor = "#00a65a";
barChartData.datasets[0].strokeColor = "#00a65a";
barChartData.datasets[0].pointColor = "#00a65a";
var barChartOptions = {
//Boolean - Whether the scale should start at zero, or an order of magnitude down from the lowest value
scaleBeginAtZero: true,
//Boolean - Whether grid lines are shown across the chart
scaleShowGridLines: true,
//String - Colour of the grid lines
scaleGridLineColor: "rgba(0,0,0,.05)",
//Number - Width of the grid lines
scaleGridLineWidth: 1,
//Boolean - Whether to show horizontal lines (except X axis)
scaleShowHorizontalLines: true,
//Boolean - Whether to show vertical lines (except Y axis)
scaleShowVerticalLines: true,
//Boolean - If there is a stroke on each bar
barShowStroke: true,
//Number - Pixel width of the bar stroke
barStrokeWidth: 2,
//Number - Spacing between each of the X value sets
barValueSpacing: 5,
//Number - Spacing between data sets within X values
barDatasetSpacing: 1,
//String - A legend template
legendTemplate: "<ul class=\"<%=name.toLowerCase()%>-legend\"><% for (var i=0; i<datasets.length; i++){%><li><span style=\"background-color:<%=datasets[i].fillColor%>\"></span><%if(datasets[i].label){%><%=datasets[i].label%><%}%></li><%}%></ul>",
//Boolean - whether to make the chart responsive
responsive: true,
maintainAspectRatio: true
};
barChartOptions.datasetFill = false;
barChart.Bar(barChartData, barChartOptions);
}
我的问题出在PHP代码中。我应该如何添加另一个查询并获取变量$res2
并将其与$res
合并,然后我将它们分成i.e $res['income'] and $res['outcome']
中的success:function
。
如何将一对提取的数组发送到一个json_encode
答案 0 :(得分:0)
在你的PHP代码中
$res1 = $sqlStmt->fetchAll();
$res2 = $sqlStmt2->fetchAll(); // Assuming u have executed 2nd query.
$res['income'] = $res1;
$res['outcome'] = $res2;
echo json_encode($res);
你的Ajax成功
success:function(res){
$incomeData = res['income'];
$outcomeData = res['outcome'];
}