I want to create a line chart that shows the data from my database live.
我想创建一个折线图,显示我的数据库中的数据。
I put new data into my database about every 100 microseconds.
我每隔100微秒就将新数据放入我的数据库。
I use ajax to check for new data.
我使用ajax来检查新数据。
this is my code:
这是我的代码:
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script type="text/javascript">
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
series: [{
name: 'Random data',
data: []
}]
});
$('#button').click(function() {
$.get('data.php', function(data) {
chart.series[0].setData(data);
});
});
});
</script>
</head>
<body>
<div id="container" style="width: 100%; height: 400px"></div>
<button id="button">Set new data</button>
</body>
</html>
the data.php returns the following:
data.php返回以下内容:
[
[Date.UTC(0000, 00, 00, 11, 11, 47, 7), 144],
[Date.UTC(0000, 00, 00, 11, 11, 47, 17), 143],
[Date.UTC(0000, 00, 00, 11, 11, 47, 29), 142],
[Date.UTC(0000, 00, 00, 11, 11, 47, 39), 141],
]
But it doesn't show up in my chart.
但它没有出现在我的图表中。
Can you help me make this work?
你能帮我做这个吗?
1 个解决方案
#1
0
It works. I dont know what issues you are facing. But thing that i see is the time interval between your data is in milliseconds and you have provided larger tick interval.
有用。我不知道你面临的问题。但我看到的是你的数据之间的时间间隔是毫秒,你提供了更大的滴答间隔。
I removed tick interval (so that highcharts plots them automatically) as well maxzoomperiod.
我删除了tick间隔(以便highcharts自动绘制它们)以及maxzoomperiod。
Check it here. http://jsfiddle.net/pLUza/
在这里查看。 http://jsfiddle.net/pLUza/
PS: I Just embedded data to Data field in Series option. But any how the result will remain same when you use AJAX.
PS:我只是将数据嵌入到系列数据字段选项中。但是当你使用AJAX时,结果将保持不变。
#1
0
It works. I dont know what issues you are facing. But thing that i see is the time interval between your data is in milliseconds and you have provided larger tick interval.
有用。我不知道你面临的问题。但我看到的是你的数据之间的时间间隔是毫秒,你提供了更大的滴答间隔。
I removed tick interval (so that highcharts plots them automatically) as well maxzoomperiod.
我删除了tick间隔(以便highcharts自动绘制它们)以及maxzoomperiod。
Check it here. http://jsfiddle.net/pLUza/
在这里查看。 http://jsfiddle.net/pLUza/
PS: I Just embedded data to Data field in Series option. But any how the result will remain same when you use AJAX.
PS:我只是将数据嵌入到系列数据字段选项中。但是当你使用AJAX时,结果将保持不变。