score:6
Accepted answer
i assume that you have multiple series in graph where backend provides a single point per serie per time.
for the sake of simplicity i suggest you returning time in milliseconds. i'm not too strong in php but i guess the point is clear
<?php
header("content-type: text/json");
include_once 'include/connection.php';
$db = new db_class();
$query = "select distinct idchip from datatable ";
$result = mysql_query( $query );
$rows = array();
$count = 0;
while( $row = mysql_fetch_array( $result ) ) {
$sql1 = "select datetime,temperature from `datatable` where idchip=".$row['0']." order by datetime desc limit 0,1 ";
$serie = new stdclass;
$serie->name = $row['0'];
$result1 = mysql_query($sql1);
$points = array();
while ($rows = mysql_fetch_array($result1)) {
$points[] = array(strtotime($rows['0']) * 1000, $rows['1']);
}
$serie->data = $points;
$series[] = $serie;
}
// create a php array and echo it as json
$ret = $series;
echo json_encode($ret);
?>
client-side code will be:
var chart;
var chartseries = {};
var latesttimereported = {};
function requestdata() {
$.ajax({
url: 'live-server-data.php',
success: function(seriesupdate) {
//in case initializer of highcharts is too quick - skip the update
if (!chart) {
settimeout(requestdata, 1000);
return;
}
$.each(seriesupdate, function (serieindex, serieupdate) {
var existingserie = chartseries[serieupdate.name];
var newpoint = serieupdate.data[0];
var lastinsertedtime = latesttimereported[serieupdate.name];
if (lastinsertedtime && lastinsertedtime < newpoint[0]) {
console.log('attempt inserting old data!!!!');
return;
}
latesttimereported[serieupdate.name] = newpoint[0];
if (existingserie) {
var shift = existingserie.data.length > 20;
existingserie.addpoint(newpoint , true, shift);
} else {
var newserie = chart.addseries({
name: serieupdate.name,
data: serieupdate.data
}, true);
chartseries[serieupdate.name] = newserie;
}
});
// call it again after one second
settimeout(requestdata, 1000);
},
cache: false
});
}
$(document).ready(function() {
chart = new highcharts.chart({
chart: {
renderto: 'container',
defaultseriestype: 'spline',
events: {
load: requestdata
}
},
title: {
text: 'live random data'
},
xaxis: {
type: 'datetime',
tickpixelinterval: 150,
maxzoom: 20 * 1000
},
yaxis: {
minpadding: 0.2,
maxpadding: 0.2,
title: {
text: 'value',
margin: 80
}
},
series: []
});
you can see new updated example here http://plnkr.co/edit/oqmofegdadf9j3uit8qd
score:0
show "attempt inserting old data!!!!". and no show display data real-time.
display
json
Source: stackoverflow.com
Related Query
- Add dynamic data to line chart from mysql database with highcharts
- Dynamic chart using Highcharts with data from MySQL database
- Add different symbols to highcharts chart with dynamic data
- HighCharts populate Pie Chart with data from SQL Database
- how to add values from a database output to the data field in Line Chart of Chart.js
- Data Conversion from SQL, C# with Linq to JSON for Highcharts Line chart
- Highcharts to display area range and line chart with data from a CSV file
- how to make chart real time with 2 line and get data from php with highcharts
- Populating Highcharts chart with data received from MySQL
- HighCharts pie chart X-axies values are not displayed while trying to get data from MySQL database using PHP
- Produce highcharts multiple line chart from JSON / MySQL data
- Cannot get Highcharts to show in 3D with data from mysql database
- Highcharts with data from mysql database
- Highcharts Dynamic Chart with MySQL Data doesn't reload
- Highcharts add point to line chart with json
- highcharts example for using data from database with mvc
- Generating Highcharts from MySQL data with PHP does not work
- loading highcharts with data from database
- Highcharts chart dynamic json data from sql
- Extract data series from a JSON array for a Highcharts chart with 2 y-axis
- HighCharts column chart populated with series data from a function
- Display Highcharts data from mysql database on jsp page
- Highcharts Sparkline chart with dynamic data for table -Angular js
- Highcharts column chart with data from mongodb
- Use return data from dynamic highcharts chart in Shiny
- HighCharts angular not working with dynamic data from Angular service
- Highcharts cloud issue with data source when duplicating chart
- Highcharts real-time line chart with multiple data streams
- Highcharts Bubble Chart with dynamic data
- Highcharts not being drawn in some cases when using data from MySQL (page elements created before database query complete?) PHP / MySQL
More Query from same tag
- Dynamic values above column + jQuery Highcharts
- Highcharts - load json data
- Highcharts zoom on 2 charts - Reset zoom issue
- Highcharts Image click event
- Highcharts - master-detail - master with multiple color
- Highcharts showing points on hovering over the line which are outside the chart area when the chart is zoomed in
- Highcharts temperature legend
- Highcharts - javascript - incorrect stacked column formatting
- Highcharts export only renders one quarter of the image
- How to dynamically alter Highcharts radius option for a specific user?
- Hide inactive dates from datetime X-Axis
- Convert R to Javascript for highcharts.js
- Highcharts disable click on column
- Highcharts grouped columns of varying widths that fill the entire space automatically
- change the legend.y property on browser resize
- Conditional Flag/event marker in highchart
- world map not displaying - Angular Highcharts
- solution : Manage space between group columns in highchart
- highcharts legend color customization
- How can I show the value above only a particular bar in highcharts?
- how to position highcharts - highstock buttons properly?
- Highcharts - Column width not responsive
- Highcharts plotline with label in the left of the line
- Highcharts : How to align column chart and bubble chart vertically in the same series
- Issue with JSON data encoded from the server, not able to plot the chart
- Can we set bar labels with dynamic custom array in Highcharts?
- highcharts round generated y labels in 1024 multiply not 1000
- hightChart print 'noData' message
- Server side chart .svg export with Highcharts and PhantomJS, error loading data from .csv file
- Reversed bullet chart in Highcharts