[英]chartJs with MySQL and PHP
I'm trying to make a line chat with chartJs. 我正在尝试与chartJs进行线下聊天。
I want to push MySQL data to chartJs using php. 我想用php将MySQL数据推送到chartJs。
MySQL table MySQL表
id | page_views | visitors | month |
------------------------------------|
1 | 200 | 20 | Jan |
2 | 100 | 10 | Feb |
3 | 500 | 30 | March |
------------------------------------|
chartJs chartJs
var randomScalingFactor = function(){ return Math.round(Math.random()*100)};
var lineChartData = {
labels : ["January","February","March","April","May","June","July"],
datasets : [
{
label: "My First dataset",
fillColor : "rgba(220,220,220,0.2)",
strokeColor : "rgba(220,220,220,1)",
pointColor : "rgba(220,220,220,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(220,220,220,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
},
{
label: "My Second dataset",
fillColor : "rgba(151,187,205,0.2)",
strokeColor : "rgba(151,187,205,1)",
pointColor : "rgba(151,187,205,1)",
pointStrokeColor : "#fff",
pointHighlightFill : "#fff",
pointHighlightStroke : "rgba(151,187,205,1)",
data : [randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor(),randomScalingFactor()]
}
]
}
window.onload = function(){
var ctx = document.getElementById("canvas").getContext("2d");
window.myLine = new Chart(ctx).Line(lineChartData, {
responsive: true
});
}
I want to apply MySQL loop for this. 我想为此应用MySQL循环。
Can anyone give me a simple example how to do this? 谁能给我一个简单的例子如何做到这一点?
ChartJS takes data in JSON format. ChartJS以JSON格式获取数据。
You can get JSON data with AJAX. 您可以使用AJAX获取JSON数据。
var jsonData = $.ajax({
url: 'http://yourdomain.com/yourfile.php',
dataType: 'json',
}).done(function (results){
In the calling PHP file you can program your logic and database access. 在调用PHP文件中,您可以编写逻辑和数据库访问。 You then can echo the data with
json_encode
to output the array in JSON format. 然后,您可以使用
json_encode
回显数据,以JSON格式输出数组。
header('Content-Type: application/json');
echo json_encode($dataArray);
You then can add the data to the chart like this: 然后,您可以将数据添加到图表中,如下所示:
var myChart = new Chart(ctx).Line(jsonData);
You can load data with http GET or POST requests, done in javascript. 您可以使用http GET或POST请求加载数据,在javascript中完成。
So for example do a GET request which routes to your php method. 例如,做一个路由到你的php方法的GET请求。 That method does the SQL query and returns results (to javascript).
该方法执行SQL查询并返回结果(到javascript)。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.