[英]Flot chart lines with AJAX, PHP and MySQL
我正在使用Flot插件來獲取一條帶有兩條線(銷售和購買)的圖表線(例如本示例),但是數據在mysql數據庫中並通過AJAX接收。 所以我有這個:
HTML:
<div id="graph" class="demo-placeholder"></div>
PHP:
sales.php
<?php
$sql = "SELECT * from sales where YEAR(date)='2013'";
$res = mysql_query($sql);
$return = [];
while($row = mysql_fetch_array($res)){
$return[] = [$row['date'],$row['amount']];
}
echo json_encode(array("label"=>"Sales","data"=>$return));
?>
purchases.php
<?php
$sql = "SELECT * from purchases where YEAR(date)='2013'";
$res = mysql_query($sql);
$return = [];
while($row = mysql_fetch_array($res)){
$return[] = [$row['date'],$row['amount']];
}
echo json_encode(array("label"=>"Purchases","data"=>$return));
?>
因此,在我的JS代碼中,我通過AJAX獲得了這些數據,並將其放入啟用了工具提示的Flot圖表線中:
var purchases,sales;
$.ajax({url: "purchases.php",
type: "GET",
dataType: "json",
success: function(resp)
{
purchases = resp.data; //Showing result:[["2013-02-01","52"],["2013-03-01","40"],["2013-03-28","200"]]
}
});
$.ajax({
url: "sales.php",
type: "GET",
dataType: "json",
success: function(resp)
{
sales = resp.data; //Showing result: [["2013-02-05","502"],["2013-03-16","240"],["2013-03-21","260"]]
}
});
var dataset = [
{
label: "Purchases",
data: purchases,
},
{
label: "Sales",
data: sales,
}
];
var chart_plot_01_settings = {
series: {
lines: {
show: true,
fill: true
},
splines: {
show: false,
tension: 0.4,
lineWidth: 1,
fill: 0.4
},
points: {
radius: 3,
show: true
},
shadowSize: 2
},
grid: {
verticalLines: true,
hoverable: true,
clickable: true,
tickColor: "#d5d5d5",
borderWidth: 1,
color: '#717171'
},
colors: ["rgba(38, 185, 154, 0.38)", "rgba(3, 88, 106, 0.38)"],
xaxis: {
tickColor: "rgba(51, 51, 51, 0.06)",
mode: "time",
tickSize: [1, "month"],
axisLabel: "Date",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10
},
yaxis: {
ticks: 8,
axisLabel: "Amount",
tickColor: "rgba(51, 51, 51, 0.06)",
},
tooltip: true,
}
if ($("#graph").length){
$.plot( $("#graph"), dataset, chart_plot_01_settings );
$("<div id='tooltip'></div>").css({
position: "absolute",
display: "none",
border: "1px solid #fdd",
padding: "2px",
"background-color": "#fee",
opacity: 0.80
}).appendTo("body");
$("#graph").bind("plothover", function (event, pos, item) {
if (item) {
var x = item.datapoint[0],
y = item.datapoint[1];
var date = new Date(x);
$("#tooltip").html("Date: " +x + " Amount: "+y).css({top: item.pageY+5, left: item.pageX+5}).fadeIn(200);
} else {
$("#tooltip").hide();
}
});
}
問題是圖表線不顯示任何數據,而是空白。 我在if ($("#graph").length){
行之后添加了console.log(sales)
行,它在控制台中顯示未定義 ,但是如果我將結果放入成功AJAX函數中的控制台中,它將顯示數據。
我該如何解決? 我需要一些幫助。
UPDATE
我修改了PHP代碼行:
$return[] = [strtotime($row['date'])*1000,$row['amount']];
我修改了JS代碼,添加了show_chart函數:
function show_chart(labell,dataa) {
var dataset = [{label: labell,data: dataa}];
var chart_plot_01_settings = {
series: {
lines: {
show: true,
fill: true
},
splines: {
show: false,
tension: 0.4,
lineWidth: 1,
fill: 0.4
},
points: {
radius: 3,
show: true
},
shadowSize: 2
},
grid: {
verticalLines: true,
hoverable: true,
clickable: true,
tickColor: "#d5d5d5",
borderWidth: 1,
color: '#717171'
},
colors: ["rgba(38, 185, 154, 0.38)", "rgba(3, 88, 106, 0.38)"],
xaxis: {
tickColor: "rgba(51, 51, 51, 0.06)",
mode: "time",
tickSize: [1, "month"],
//tickLength: 10,
axisLabel: "Date",
axisLabelUseCanvas: true,
axisLabelFontSizePixels: 12,
axisLabelFontFamily: 'Verdana, Arial',
axisLabelPadding: 10
},
yaxis: {
ticks: 8,
axisLabel: "Amount",
tickColor: "rgba(51, 51, 51, 0.06)",
},
tooltip: true,
}
$(document).ready(function () {
$.plot($("#graph"), dataset, chart_plot_01_settings);
//Tooltip
$("<div id='tooltip'></div>").css({
position: "absolute",
display: "none",
border: "1px solid #fdd",
padding: "2px",
"background-color": "#fee",
opacity: 0.80
}).appendTo("body");
$("#graph").bind("plothover", function (event, pos, item) {
if (item) {
var x = item.datapoint[0],
y = item.datapoint[1];
var date = new Date(x);
$("#tooltip").html("Date: " + ('0' + (date.getMonth()+1)).slice(-2) + '/'+ date.getFullYear()+ " | Amount: "+y).css({top: item.pageY+5, left: item.pageX+5}).fadeIn(200);
} else {
$("#tooltip").hide();
}
});
});
} //show chart
var purchases,sales;
$.ajax({url: "purchases.php",
type: "GET",
dataType: "json",
success: function(resp)
{
purchases = resp.data;
var label1 = resp.label;
show_chart(label1,purchases);
}
});
$.ajax({
url: "sales.php",
type: "GET",
dataType: "json",
success: function(resp)
{
sales = resp.data;
var label2 = resp.label;
show_chart(label2,sales);
}
});
但問題是,它僅顯示“ 銷售”或“ 購買”圖表線,而我想像此示例一樣顯示兩個圖表線(“ 銷售”和“購買” )。
我該如何解決?
您的時間數據格式錯誤,Flot需要JavaScript時間戳。 代替
[["2013-02-01","52"],["2013-03-01","40"],["2013-03-28","200"]]
你需要
[[1359676800000,"52"],[1362096000000,"40"],[1364428800000,"200"]]
采用
strtotime("2013-02-01 UTC") * 1000
在您的PHP代碼中生成時間戳(請參閱此處 )。
最后,我可以解決它,將我的2個php文件合並為一個,並放置一個最終數組:
echo json_encode(array($return,$returnn));
在AJAX成功中:
success: function(resp)
{
var result1 = resp[0];//purchases
var result2 = resp[1];//sales
show_chart(result1,result2);
}
並在show_cart函數中:
function show_chart(data1,data2) {
var dataset = [{label: "Purchases",data: data1},{label: "Sales",data: data2}];
//and continues...
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.