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
- Drilldown operation in Column-Stacked Bar diagram HighCharts
- How to update the colour of minColor and maxColor when data is changed in high charts' solid gauge in ReactJS?
- Highcharts Error 15 if xSeries has number in it
- Can't disconnect line chart with [null,null] and irregular intervals in Highcharts
- How to avoid bad behavior zooming to areas outside the data range
- Glossy Heatmap Highcharts
- How to dynamically change line color based on value being lower than previous in highcharts
- Config gauge series highchart
- How to make x-axis tickmarks span the entire bar chart?
- How can I highlight selected label in HIghcharts Timeline?
- Highcharts won't display data
- Highcharts - how to set line height in multiline annotations labels in styled mode
- highchart bar data, borders fit to the data
- Maximum bar width in Highcharts column charts
- Highcharts: plotbands in gauge charts
- Highchart Drilldown with data call when clicked
- Highcharts are not redraw
- Highcharts stacked and grouped columns: Share label across all stacks
- How to access Highcharts stock tooltip data in Vue?
- Java Script Custom High Chart method
- How to disable range selector from highstocks charts
- Need to put border on variablepie highchart?
- Highcharts - how to position values closer to the Y axis
- How to get axis's coordinates when i click on column in Highchart
- Highcharts - issue about full chart width
- include two series from database in a highchart chart
- javascript : how to link categories to date in highcharts
- Highcharts legend custom css style / format using only highcharts options
- highcharts - Custom legend - sending the name of the filter to a php file
- highchart set data to series in xrange chart