Live data from MySQL with highchart

Live data from MySQL with highchart - javascript

I found this Highchart live data example Live data. I try to use my own data which is come from MySQL so, I change the $y in live-server-data.php to receive the data after use function fetch_assoc().
HTML Code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts Example</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script type="text/javascript" src="http://code.highcharts.com/highcharts.js"></script>
</head>
<body>
<div id="container" style="width: 800px; height: 400px; margin: 0 auto"></div>
</body>
</html>
JS
var chart; // global
function requestData() {
$.ajax({
url: 'live-server-data.php',
success: function(point) {
var series = chart.series[0],
shift = series.data.length > 20; // shift if the series is longer than 20
chart.series[0].addPoint(eval(point), true, shift);
// 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: [{
name: 'Random data',
data: []
}]
});
});
PHP code
<?php
$conn = new mysqli($servername, $username, $password, $dbname);
if($conn->connect_error){
die("Connection failed: ".$conn->connect_error);
}
$sql_1 = "SELECT SensorData AS power FROM $tbname where SensorID = '1'";
$result_1=$conn->query($sql_1);
while($row = $result_1->fetch_assoc()){
$y = $row['power'];
}
$conn->close();
header("Content-type: text/json");
multiplied by 1000.
$x = time() * 1000;
$ret = array($x, $y);
echo json_encode($ret);
?>
The graph is moved but it not shows any data.
So I press F12 on Chrome Browser and I found this thing.
I think "14.600" may be the cause of my problem. Please tell me if you know the solution to solve this problem. Thank you so much.

I think the graph required an array that contains numeric values in it. In your case one value is numeric but another one is string so convert all the values to numeric i.e. either integer or float. (Float is preferred here) and pass that array to the graph.

Related

live data chart not working

hi everyone im working on real-time java script chart to display data from a database but all i get is nothing its not catching data from data base
i used this php code
<?php
header("Content-type: text/json");
$servername = "localhost";
$username = "root";
$password = "";
$value = $_GET['value'];
$date = time() * 1000;
$ret = array($date, $value);
echo json_encode($ret);
$conn = mysql_connect($servername, $username, $password);
if ($conn) {
echo "Connected successfully";
}
else {
echo "connection failed";
}
$conndb = mysql_select_db('database', $conn);
echo "<br>";
$sql_insert ="insert into pulsesensor(value) values ('$value')";
if($sql_insert){
echo "insert successfull";
}
else {
echo "insert failed";
} echo "<br>";
$result = mysql_query($sql_insert);
if($result){
echo "insert successfull";
}
else {
echo "insert failed" . mysql_error($result);
}
?>
and for real-time chart i used this code
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0
auto">
</div>
/**
* Request data from the server, add it to the graph and set a timeout
* to request again
*/
function requestData() {
$.ajax({
url: 'mysql0.php',
success: function(point) {
var series = chart.series[0],
shift = series.data.length > 20; // shift if the series is
// longer than 20
// add the point
chart.series[0].addPoint(point, true, shift);
// 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 Heartbeats data'
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150,
maxZoom: 20 * 1000
},
yAxis: {
minPadding: 0.2,
maxPadding: 0.2,
title: {
text: 'Value',
margin: 80
}
},
series: [{
name: 'heartbeats data',
data: []
}]
});
});
</script>
at the end the result is this

Loop inside Jquery Chart to make it dynamic

Im new in Js and Jquery and I have a curiosity about the Jquery Chart that is free to download and I want to make the data inside to be coming from the database to make it dynamic but somehow I find it difficult to loop it in.
here is my sample code, I used PHP to get the database and pass it on a JS variable
<!DOCTYPE HTML>
<html>
<head>
<?php
$link = mysqli_connect("localhost","root","","raksquad_centralized") or die("Error " . mysqli_error($link));
if($link->connect_error){
printf("Connect failed: %s\n", $mysqli->connect_error);
exit();
}
$query = "SELECT * FROM raksquad_centralized.grade";
$result = $link->query($query);
$subject_id= array();
$genAve = array();
while($row = mysqli_fetch_array($result)){
$subject_id[] = $row['subject_id'];
$genAve[]= $row['gen_ave'];
}
?>
<script type="text/javascript">
window.onload = function () {
var DataXAxis = <?php echo json_encode($subject_id); ?>; // X axis that corresponds to students
var DataYAxis = <?php echo json_encode($genAve); ?>; // Y axis that corresponds to grades
var chart = new CanvasJS.Chart("chartContainer",
{
title:{
text: "Top Students"
},
animationEnabled: true,
axisY: {
title: "Grades"
},
axisX: {
title: "Students"
},
legend: {
verticalAlign: "bottom",
horizontalAlign: "center"
},
theme: "theme2",
data: [
{
type: "column",
showInLegend: true,
legendMarkerColor: "grey",
legendText: "General Average",
dataPoints: [
//the area to loop with the value of DataXAxis, DataYAxis
{y: 98, label: "MT1234" },
{y: 72, label: "MT1236"} //corresponds to the barcharts
]
}
]
});
chart.render();
}
</script>
<script type="text/javascript" src="./canvasjs.min.js"></script>
</head>
<body>
<div id="chartContainer" style="height: 300px; width: 100%;">
</div>
</body>
</html>
appreciate for the help, useful for learning :)

I just use a php code to fetch the data, then json encode it.
On the script use json parse

Highcharts xaxis is off by several hours

I'm pulling values from a MySQL database using PHP, and attempting to plot them using Highcharts. The problem I'm finding is the xaxis values seems to be off by 4 hours. Searching through past threads, some people place the useUTC: false in the global chart options, but it did not seem to work for me.
global:{
useUTC: false
}
Here is the code I'm using to set up the chart. I'm a javascript newbie, so it's very possible I did something stupid in here. Any suggestions?
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Temperature Data from XBee</title>
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'Wireless Sensor Data: Temperature (F)',
x: -20 //center
},
global: {
useUTC: false
},
yAxis: {
title: {
text: 'temperature'
},
type: 'double',
min: 0,
},
xAxis: {
title: {
text: 'time'
},
type: 'datetime'
},
series: [{
name: 'Temperature',
data: []
}]
}
$.getJSON("data.php", function(json) {
options.series[0].data = json;
chart = new Highcharts.Chart(options);
});
});
</script>
<script src="js/highcharts.js"></script>
<script src="js/themes/grid-light.js"></script>
</head>
<body>
<div id="container" style="min-width: 800px; height: 800px; margin: 0 auto"></div>
</body>
</html>
Here is my PHP code that queries the database and puts the data into the JSON format.
<?php
$con = mysql_connect("localhost","root","raspberry");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("xbee", $con);
$result = mysql_query("SELECT time, temperature FROM data WHERE time >= DATE_SUB(NOW(), INTERVAL 1 HOUR)");
$rows = array();
while($r = mysql_fetch_array($result)) {
extract($r);
$time = strtotime($r[0]);
$time *=1000;
$row[0] = $time;
$row[1] = $r[1];
array_push($rows,$row);
}
print json_encode($rows, JSON_NUMERIC_CHECK);
mysql_close($con);
?>
This is what my JSON format looks like.
[[1414172722000,73.4],[1414172727000,73.4],[1414172732000,73.4],[1414172737000,75.2],[1414172742000,75.2],[1414172747000,75.2],[1414172753000,73.4],[1414172758000,75.2],[1414172763000,73.4],[1414172768000,75.2],[1414172773000,75.2],[1414172778000,75.2],[1414172783000,75.2],[1414172788000,73.4],[1414172793000,73.4],[1414172798000,75.2],[1414172803000,75.2],[1414172809000,75.2],[1414172814000,75.2],[1414172819000,75.2],[1414172824000,73.4],[1414172829000,75.2],[1414172834000,75.2],[1414172839000,75.2],[1414172844000,75.2],[1414172849000,75.2],[1414172854000,75.2],[1414172860000,75.2],[1414172865000,75.2],[1414172870000,75.2],[1414172875000,75.2],[1414172880000,75.2],[1414172885000,75.2],[1414172890000,75.2],[1414172895000,75.2],[1414172900000,75.2],[1414172905000,73.4],[1414172910000,75.2],[1414172916000,75.2],[1414172921000,75.2],[1414172926000,75.2],[1414172931000,75.2],[1414172936000,75.2],[1414172941000,75.2],[1414172946000,75.2],[1414172951000,75.2],[1414172956000,75.2],[1414172961000,75.2],[1414172966000,73.4],[1414172972000,75.2],[1414172977000,75.2],[1414172982000,73.4],[1414172987000,75.2],[1414172992000,75.2],[1414172997000,73.4],[1414173002000,75.2],[1414173007000,75.2],[1414173012000,75.2],[1414173017000,75.2],[1414173022000,75.2],[1414173028000,75.2],[1414173033000,75.2],[1414173038000,75.2],[1414173043000,75.2],[1414173048000,75.2],[1414173053000,75.2],[1414173058000,75.2],[1414173063000,71.6],[1414173068000,75.2],[1414173073000,75.2],[1414173079000,75.2],[1414173084000,75.2],[1414173089000,75.2],[1414173094000,75.2],[1414173099000,75.2],[1414173104000,75.2],[1414173109000,75.2],[1414173114000,75.2],[1414173119000,75.2],[1414173124000,75.2],[1414173129000,75.2],[1414173135000,75.2],[1414173140000,75.2],[1414173145000,75.2],[1414173150000,75.2],[1414173155000,75.2],[1414173160000,75.2],[1414173165000,75.2],[1414173170000,75.2],[1414173175000,75.2],[1414173180000,75.2],[1414173185000,75.2],[1414173191000,75.2],[1414173196000,75.2],[1414173201000,75.2],[1414173206000,75.2],[1414173211000,75.2],[1414173216000,75.2],[1414173221000,75.2],[1414173226000,75.2],[1414173231000,75.2],[1414173236000,75.2],[1414173241000,75.2],[1414173247000,75.2],[1414173252000,75.2],[1414173257000,75.2],[1414173262000,75.2],[1414173267000,75.2],[1414173272000,75.2],[1414173277000,75.2],[1414173282000,75.2],[1414173287000,75.2],[1414173292000,75.2],[1414173298000,75.2],[1414173303000,75.2],[1414173308000,75.2],[1414173313000,75.2],[1414173318000,75.2],[1414173323000,75.2],[1414173328000,75.2],[1414173333000,75.2],[1414173338000,75.2],[1414173343000,75.2],[1414173348000,75.2],[1414173354000,75.2],[1414173359000,75.2],[1414173364000,75.2],[1414173369000,75.2],[1414173374000,75.2],[1414173379000,75.2],[1414173384000,75.2],[1414173389000,75.2],[1414173394000,75.2],[1414173399000,75.2],[1414173404000,75.2],[1414173410000,75.2],[1414173415000,75.2],[1414173420000,75.2],[1414173425000,75.2],[1414173430000,75.2],[1414173435000,75.2],[1414173440000,75.2],[1414173445000,75.2],[1414173450000,75.2],[1414173455000,73.4],[1414173461000,75.2],[1414173466000,75.2],[1414173471000,75.2],[1414173476000,75.2],[1414173481000,75.2],[1414173486000,75.2],[1414173491000,75.2],[1414173496000,75.2],[1414173501000,73.4],[1414173506000,75.2],[1414173511000,75.2],[1414173517000,73.4],[1414173522000,75.2],[1414173527000,75.2],[1414173532000,75.2],[1414173537000,75.2],[1414173542000,75.2],[1414173547000,75.2],[1414173552000,73.4],[1414173557000,75.2],[1414173562000,75.2],[1414173567000,75.2],[1414173573000,75.2],[1414173578000,75.2],[1414173583000,75.2],[1414173590000,32],[1414173651000,75.2],[1414173711000,75.2],[1414173771000,73.4],[1414173831000,75.2],[1414173891000,73.4],[1414173951000,75.2],[1414174011000,73.4],[1414174071000,75.2],[1414174131000,73.4],[1414174191000,75.2],[1414174251000,71.6],[1414174311000,73.4],[1414174372000,73.4],[1414174432000,73.4],[1414174492000,73.4],[1414174552000,73.4],[1414174612000,73.4],[1414174672000,73.4],[1414174732000,73.4],[1414174792000,73.4],[1414174852000,73.4],[1414174912000,73.4],[1414174972000,73.4],[1414175032000,73.4],[1414175093000,73.4],[1414175153000,73.4],[1414175213000,73.4],[1414175273000,73.4],[1414175333000,73.4],[1414175393000,73.4],[1414175453000,73.4],[1414175513000,73.4],[1414175573000,73.4],[1414175633000,73.4],[1414175693000,73.4],[1414175753000,73.4],[1414175814000,73.4],[1414175874000,73.4],[1414175934000,73.4],[1414175994000,73.4],[1414176054000,73.4],[1414176114000,73.4],[1414176174000,73.4],[1414176234000,75.2],[1414176294000,75.2]]

I found a solution, not sure if this is the most elegant, but it is producing the correct results now. It looks like when using the strtotime conversion in PHP, it was using the default GMT timezone. In the PHP script, I added the date_default_time_set('UTC') and it works. Hopefully this will help someone in the future.
<?php
$con = mysql_connect("localhost","root","raspberry");
if (!$con) {
die('Could not connect: ' . mysql_error());
}
mysql_select_db("xbee", $con);
$result = mysql_query("SELECT time, temperature FROM data WHERE time >= DATE_SUB(NOW(), INTERVAL 1 HOUR)");
$rows = array();
while($r = mysql_fetch_array($result)) {
date_default_timezone_set('UTC');
extract($r);
$time = strtotime($r[0]);
$time *=1000;
$row[0] = $time;
$row[1] = $r[1];
array_push($rows,$row);
}
print json_encode($rows, JSON_NUMERIC_CHECK);
mysql_close($con);
?>

No chart is shown using HighCharts

I have started using HighCharts and I have come up with the below code to test it out but the problem is that no chart is shown.
I want a simple line chart with dates running along the bottom and numbers running upwards.
Code
<?php
$sql = array(
'user' => 'removed',
'password' => 'removed',
'server' => 'removed',
'db' => 'removed'
);
$conn = oci_connect($sql['user'], $sql['password'], $sql['server'].'/'.$sql['db']);
if (!$conn) {
$e = oci_error();
trigger_error( htmlentities($e['message'], ENT_QUOTES), E_USER_ERROR );
}
$result = oci_parse($conn, "SELECT EntryDate, COUNT(OrderNo) FROM Orders GROUP BY EntryDate");
oci_execute($result);
while ($row = oci_fetch_array($result)) {
$data0[] = $row['0'];
$data1[] = $row['1'];
}
?>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line'
},
xAxis: {
categories: [<?php echo join($data0, ',') ?>]
},
yAxis: {
title: {
text: 'Orders'
}
},
series: [{
data: [<?php echo join($data1, ',') ?>],
pointStart: 0,
pointInterval
}]
});
</script>
<div id="container" style="height:100%; width:100%;"></div>
Results
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script>
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line'
},
xAxis: {
categories: [01-NOV-12,02-NOV-12,03-NOV-12,05-NOV-12,06-NOV-12,07-NOV-12,08-NOV-12,09-NOV-12,12-NOV-12,13-NOV-12,14-NOV-12,15-NOV-12,16-NOV-12,19-NOV-12,20-NOV-12,21-NOV-12,22-NOV-12,23-NOV-12,24-NOV-12,26-NOV-12,27-NOV-12,28-NOV-12,29-NOV-12,30-NOV-12,01-DEC-12,02-DEC-12,03-DEC-12,04-DEC-12,05-DEC-12,06-DEC-12,07-DEC-12,10-DEC-12,11-DEC-12,12-DEC-12,13-DEC-12,14-DEC-12,17-DEC-12,18-DEC-12,19-DEC-12,20-DEC-12,21-DEC-12,03-JAN-13,04-JAN-13,05-JAN-13,07-JAN-13,08-JAN-13,09-JAN-13,10-JAN-13,11-JAN-13,14-JAN-13,15-JAN-13,16-JAN-13,17-JAN-13,18-JAN-13,21-JAN-13,22-JAN-13,23-JAN-13,24-JAN-13,25-JAN-13,28-JAN-13,29-JAN-13,30-JAN-13,31-JAN-13,01-FEB-13,04-FEB-13,05-FEB-13,06-FEB-13,07-FEB-13,08-FEB-13,11-FEB-13,12-FEB-13,13-FEB-13,14-FEB-13,15-FEB-13,16-FEB-13,18-FEB-13,19-FEB-13,20-FEB-13,21-FEB-13,22-FEB-13,25-FEB-13,26-FEB-13,27-FEB-13,28-FEB-13,01-MAR-13,02-MAR-13,04-MAR-13,05-MAR-13,06-MAR-13,07-MAR-13,08-MAR-13,11-MAR-13,12-MAR-13,13-MAR-13,14-MAR-13,15-MAR-13,16-MAR-13,17-MAR-13,18-MAR-13,19-MAR-13,20-MAR-13,21-MAR-13,22-MAR-13,25-MAR-13,26-MAR-13,27-MAR-13,28-MAR-13,02-APR-13,03-APR-13,04-APR-13,05-APR-13,08-APR-13,09-APR-13,10-APR-13,11-APR-13,12-APR-13,15-APR-13,16-APR-13,17-APR-13,18-APR-13,19-APR-13,22-APR-13,23-APR-13,24-APR-13,25-APR-13,26-APR-13,29-APR-13,30-APR-13,01-MAY-13,02-MAY-13,03-MAY-13,07-MAY-13,08-MAY-13,09-MAY-13,10-MAY-13,13-MAY-13,14-MAY-13,15-MAY-13,16-MAY-13,17-MAY-13,18-MAY-13,20-MAY-13,21-MAY-13,22-MAY-13,23-MAY-13,24-MAY-13,25-MAY-13,28-MAY-13,29-MAY-13,30-MAY-13,31-MAY-13,03-JUN-13,04-JUN-13,05-JUN-13,06-JUN-13,07-JUN-13,10-JUN-13,11-JUN-13,12-JUN-13,13-JUN-13,14-JUN-13,17-JUN-13,18-JUN-13,19-JUN-13,20-JUN-13,21-JUN-13,24-JUN-13,25-JUN-13,26-JUN-13,27-JUN-13,28-JUN-13,01-JUL-13,02-JUL-13,03-JUL-13,04-JUL-13,05-JUL-13,08-JUL-13,09-JUL-13,10-JUL-13,11-JUL-13,12-JUL-13,15-JUL-13,16-JUL-13,17-JUL-13,18-JUL-13,19-JUL-13,22-JUL-13,23-JUL-13,24-JUL-13,25-JUL-13,26-JUL-13,29-JUL-13,30-JUL-13,31-JUL-13,01-AUG-13,02-AUG-13,05-AUG-13,06-AUG-13,07-AUG-13,08-AUG-13,09-AUG-13,12-AUG-13,13-AUG-13,14-AUG-13,15-AUG-13,16-AUG-13,19-AUG-13,20-AUG-13,21-AUG-13,22-AUG-13,23-AUG-13,27-AUG-13,28-AUG-13,29-AUG-13,30-AUG-13,02-SEP-13,03-SEP-13,04-SEP-13,05-SEP-13,06-SEP-13,09-SEP-13,10-SEP-13,11-SEP-13,12-SEP-13,13-SEP-13,15-SEP-13,16-SEP-13,17-SEP-13,18-SEP-13,19-SEP-13,20-SEP-13,21-SEP-13,23-SEP-13,24-SEP-13,25-SEP-13,26-SEP-13,27-SEP-13,28-SEP-13,30-SEP-13,01-OCT-13,02-OCT-13,03-OCT-13,04-OCT-13,05-OCT-13,07-OCT-13,08-OCT-13,09-OCT-13,10-OCT-13,11-OCT-13,12-OCT-13,14-OCT-13,15-OCT-13,16-OCT-13,17-OCT-13,18-OCT-13,21-OCT-13,22-OCT-13,23-OCT-13,24-OCT-13,25-OCT-13,28-OCT-13,29-OCT-13,30-OCT-13,31-OCT-13,01-NOV-13,04-NOV-13,05-NOV-13,06-NOV-13,07-NOV-13,08-NOV-13,11-NOV-13,12-NOV-13,13-NOV-13,14-NOV-13,15-NOV-13,18-NOV-13,19-NOV-13,20-NOV-13,21-NOV-13,22-NOV-13,25-NOV-13,26-NOV-13,27-NOV-13,28-NOV-13,29-NOV-13,02-DEC-13,03-DEC-13,04-DEC-13,05-DEC-13,06-DEC-13,09-DEC-13,10-DEC-13,11-DEC-13,12-DEC-13,13-DEC-13,16-DEC-13,17-DEC-13,18-DEC-13,19-DEC-13,20-DEC-13,02-JAN-14,03-JAN-14,06-JAN-14,07-JAN-14,08-JAN-14,09-JAN-14,10-JAN-14,13-JAN-14,14-JAN-14,15-JAN-14,16-JAN-14,17-JAN-14,20-JAN-14,21-JAN-14,22-JAN-14,23-JAN-14,24-JAN-14,27-JAN-14,28-JAN-14,29-JAN-14,30-JAN-14,31-JAN-14,03-FEB-14,04-FEB-14,05-FEB-14,06-FEB-14,07-FEB-14,10-FEB-14,11-FEB-14,12-FEB-14,13-FEB-14,14-FEB-14,17-FEB-14,18-FEB-14,19-FEB-14,20-FEB-14,21-FEB-14,24-FEB-14,25-FEB-14,26-FEB-14,27-FEB-14,28-FEB-14,03-MAR-14,04-MAR-14,05-MAR-14,06-MAR-14,07-MAR-14,10-MAR-14,11-MAR-14,12-MAR-14,13-MAR-14,14-MAR-14,17-MAR-14,18-MAR-14,19-MAR-14,20-MAR-14,21-MAR-14,24-MAR-14,25-MAR-14,26-MAR-14,27-MAR-14,28-MAR-14,31-MAR-14,01-APR-14,02-APR-14,03-APR-14,04-APR-14,07-APR-14,08-APR-14,09-APR-14,10-APR-14,11-APR-14,14-APR-14,15-APR-14,16-APR-14,17-APR-14,22-APR-14,23-APR-14,24-APR-14,25-APR-14,28-APR-14,29-APR-14,30-APR-14,01-MAY-14,02-MAY-14,06-MAY-14,07-MAY-14,08-MAY-14,09-MAY-14,12-MAY-14,13-MAY-14,14-MAY-14,15-MAY-14,16-MAY-14,19-MAY-14,20-MAY-14,21-MAY-14,22-MAY-14,23-MAY-14,27-MAY-14,28-MAY-14,29-MAY-14,30-MAY-14,02-JUN-14,03-JUN-14,04-JUN-14,05-JUN-14,06-JUN-14,09-JUN-14,10-JUN-14,11-JUN-14,12-JUN-14,13-JUN-14,16-JUN-14,17-JUN-14,18-JUN-14,19-JUN-14,20-JUN-14,23-JUN-14,24-JUN-14,25-JUN-14,26-JUN-14,27-JUN-14,30-JUN-14,01-JUL-14,02-JUL-14,03-JUL-14,04-JUL-14,07-JUL-14,08-JUL-14,09-JUL-14,10-JUL-14,11-JUL-14,14-JUL-14,15-JUL-14,16-JUL-14,17-JUL-14,18-JUL-14,21-JUL-14,22-JUL-14,23-JUL-14,24-JUL-14,25-JUL-14,28-JUL-14,29-JUL-14,30-JUL-14,31-JUL-14,01-AUG-14,04-AUG-14,05-AUG-14,06-AUG-14,07-AUG-14,08-AUG-14,11-AUG-14,12-AUG-14,13-AUG-14,14-AUG-14,15-AUG-14,18-AUG-14,19-AUG-14,20-AUG-14,21-AUG-14,22-AUG-14,26-AUG-14,27-AUG-14,28-AUG-14,29-AUG-14,01-SEP-14,02-SEP-14,03-SEP-14,04-SEP-14,05-SEP-14]
},
yAxis: {
title: {
text: 'Orders'
}
},
series: [{
data: [543,555,91,488,626,498,639,516,553,687,616,887,514,483,643,443,699,436,131,389,721,475,878,431,409,19,513,841,631,636,286,701,746,574,597,404,561,772,450,367,122,380,552,111,383,460,640,573,423,469,758,680,550,206,350,464,363,702,595,467,646,589,713,409,499,672,682,670,506,581,495,866,602,566,211,477,605,568,809,647,577,791,517,808,319,201,515,831,611,653,431,453,737,510,573,621,163,65,810,870,631,774,648,639,714,697,589,543,395,738,548,883,670,745,629,553,572,676,806,860,605,686,766,693,712,594,657,579,927,867,657,723,643,826,552,824,730,726,910,485,200,715,799,697,879,579,178,705,865,766,532,734,776,700,764,688,781,643,725,818,560,616,865,828,730,548,698,533,796,850,581,590,569,904,746,376,603,940,548,893,486,713,708,744,978,675,642,737,759,632,715,446,992,756,863,507,532,744,812,538,709,577,815,590,831,575,620,768,618,878,621,806,776,814,555,524,958,752,853,774,613,923,720,888,671,6,483,626,639,755,681,325,547,759,788,520,617,458,611,1021,878,909,653,139,515,794,750,708,555,155,549,744,755,997,531,534,801,702,824,550,574,773,829,705,475,603,688,881,805,645,634,873,644,748,619,655,791,655,800,632,585,814,646,743,693,564,823,699,848,539,580,726,587,722,504,562,557,408,443,285,517,299,483,536,610,731,509,554,667,651,570,544,570,650,688,503,598,699,655,676,612,566,632,730,706,707,569,591,885,728,780,504,648,691,840,664,648,746,760,651,629,499,674,843,582,764,745,767,724,661,831,584,788,954,716,690,581,719,926,807,749,454,681,945,798,856,686,603,905,711,845,470,604,845,753,615,767,713,852,546,819,864,831,746,600,862,733,907,717,770,868,789,997,605,886,808,763,652,721,633,698,760,713,681,898,821,819,721,787,738,767,728,540,660,759,767,620,615,687,852,751,727,527,680,733,735,750,623,862,811,845,805,720,772,811,861,755,648,773,799,884,801,652,605,700,884,896,714,877,808,810,669,774,784,766,989,794,741,810,870,818,576,629,676,744,733,679,750,880,878,604,450],
pointStart: 0,
pointInterval
}]
});
</script>
<div id="container" style="height:100%; width:100%;"></div>
Please can someone let me know what I am doing wrong?

I see two issues. First one is categories should be a list of strings, as other people already have mentioned:
categories: ["<?php echo join($data0, '","') ?>"]
Second issue: new Highcharts.Chart() is called before #container exists in the DOM. So you have to wrap the whole JS in a function to call it after DOM has loaded. This little jQuery piece will call the Highcharts function after the DOM has loaded.
<script type="text/javascript">
$(document).ready(function() {
// your JS-code
});
</script>
Btw, both of these errors are logged in the JS console (don't know which browser you're using and thus how to access it).

Your categories must be strings - currently their output as simple characters after eachother.
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line'
},
xAxis: {
categories: ['01-NOV-12', '02-NOV-12']
},
yAxis: {
title: {
text: 'Orders'
}
},
series: [{
data: [543,555]
}]
});
You can achieve this by changing your categories: [<?php echo join($data0, ',') ?>] to the following:
categories: [<?php echo "'".implode($data0, "','")."'" ?>]
The implode(seperator, array) function will put all of the values in your array right after each other, seperated by the given characters - expanding that to begin and end with an apostrophe will result in your dates being output as string category names.
Also you've got a pointInterval attribute there at the end of your JS without any value, that was also resulting in the failure of the code.
I've deprecated some of your sample data, but you'll get the point.

The categories should be an array of strings
categories: ["<?php echo join('","',$data0) ?>"]

The javascript code isn't executed on document ready event. Thus perhaps the div with id='container' hasn't been created yet and the chart has nowhere to be drawn. Try putting the code after the div like that:
<div id='container'>
</div>
<script>
//highcharts config code
</script>
You could also put the javascript in a anonymous function and execute it after the declaration:
<div id='container'>
</div>
<script>
(function(){
//Highcharts config code here.
} ());
</script>
Also as the other answers are pointing out, the config is in json format so you should use valid JSON values e.g. string, number, true or false, or null.

Try change this line
categories: ["<?php echo implode('","',$data0) ?>"]

Highcharts Dynamic Chart with MySQL Data doesn't reload

Good evening everyone,
this moment I try to work with HighChart / HighStock and after several weeks I were able to display my MySQL-data in the charts. But: I always want more.
Well, I try to reach a dynamic chart which is refreshing like the examples you may know from the website. http://jsfiddle.net/sdorzak/HsWF2/
I used the sample code as a guide. It doesn't work, but think the problem is the missing y-axis because y-axis data come from my MySQL database while x-axis should be the current time.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>POS RESULT</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<?php
include "config.php";
$SQL1 = "SELECT * FROM Prices WHERE ticker ='FB'";
$result1 = mysql_query($SQL1);
$data1 = array();
while ($row = mysql_fetch_array($result1)) {
$data1[] = $row['Close'];
}
?>
<script type="text/javascript">
$(function () {
var chart;
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25,
events: {
load: function()
{
var series = this.series[0];
setInterval(function() {
var x = (new Date()).getTime();
series.addPoint([x], true);
}, 1000);
},
title: {
text: 'Monthly Average Temperature',
x: -20 //center
},
subtitle: {
text: 'Source: WorldClimate.com',
x: -20
},
xAxis: {
type: 'datetime',
tickPixelInterval: 150
//categories: [<?php echo join(',', $data2); ?>],
},
yAxis: {
title: {
text: 'Temperature (°C)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y +'°C';
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
series: [{
name: 'Tokyo',
data: [<?php echo join(',', $data1); ?>]
}]
});
});
});
</script>
<div id="container" style="min-width: 500px; height: 400px; margin: 0 auto"></div>
</body>
</html>
The passage I am talking about and which is shown in the samples is
chart: {
renderTo: 'container',
type: 'spline',
marginRight: 10,
events: {
load: function() {
// set up the updating of the chart each second
var series = this.series[0];
setInterval(function() {
var x = (new Date()).getTime(), // current time
y = Math.random();
series.addPoint([x, y], true, true);
}, 1000);
}
}
But, as I already wrote, I don't need a random y-axis, just x-axis.
Maybe you can help.
Thanks for your help.
Edit:
live-server-data.php
<?php
// Set the JSON header
header("Content-type: text/json");
include "config.php";
$SQL1 = "SELECT * FROM Prices WHERE Ticker ='TSLA'";
$result1 = mysql_query($SQL1);
while ($row = mysql_fetch_array($result1)) {
$data1[] = $row['Close'];
}
// The x value is the current JavaScript time, which is the Unix time multiplied
// by 1000.
$x = time() * 1000;
// The y value is a random number
$y = $data1;
// Create a PHP array and echo it as JSON
$ret = array($x, $y);
echo json_encode($ret);
?>
The value "Close" is decimal 24,4.

See that solution: http://www.highcharts.com/studies/live-server.htm
var chart; // global
/**
* Request data from the server, add it to the graph and set a timeout to request again
*/
function requestData() {
$.ajax({
url: 'live-server-data.php',
success: function(point) {
var series = chart.series[0],
shift = series.data.length > 20; // shift if the series is longer than 20
// add the point
chart.series[0].addPoint(eval(point), true, shift);
// 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: [{
name: 'Random data',
data: []
}]
});
});

im trying to create another page that can relate to my bar chart. You can go through his code. It work for me
<!DOCTYPE html>
<html>
<head>
<?php
session_start();
?>
<meta charset="utf-8">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script>
$('#calendar').datepicker({
});
!function ($) {
$(document).on("click","ul.nav li.parent > a > span.icon", function(){
$(this).find('em:first').toggleClass("glyphicon-minus");
});
$(".sidebar span.icon").find('em:first').addClass("glyphicon-plus");
}(window.jQuery);
$(window).on('resize', function () {
if ($(window).width() > 768) $('#sidebar-collapse').collapse('show')
})
$(window).on('resize', function () {
if ($(window).width() <= 767) $('#sidebar-collapse').collapse('hide')
})
</script>
<style>
.selection{
border: 1px solid gray;
border-radius: 10px;
padding: 10px;
text-decoration:none;
float:left;
margin:4px;
text-align:center;
display: block;
color: green;
}
.page-header{
text-align:center;
text-decoration:hover;
color: blue;
font-size: 30px;
}
</style>
<script>
$(function () {
//on page load
getAjaxData(1);
//on changing select option
$('#dynamic_data').change(function(){
var val = $('#dynamic_data').val();
getAjaxData(val);
});
function getAjaxData(id){
//use getJSON to get the dynamic data via AJAX call
$.getJSON('datab1.php', {id: id}, function(chartData) {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Analysis of Data Type in The World'
},
xAxis: {
categories: ['Population', 'Health', 'Agriculture', 'Development', 'Transport', 'Education', 'Social', 'Tourism', 'Finance','Business','Economy', 'Industry', 'Employment', 'Weather', 'Food', 'Energy', 'Infrastructure', 'Science&Technology', 'Government','Culture', 'Religion',
'Justice&Law', 'Country', 'Water Resource', 'Maritim', 'Military', 'International', 'Geography', 'Statistics', 'Others','Electronic','Biotechnology', 'Women', 'Gender', 'Cartography','Disability','Position','Marital','CDF','Research']
},
yAxis: {
min: 0,
title: {
text: 'Percentage (%)'
}
},
legend: {
enabled: false
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} %</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: chartData
});
});
}
});
</script>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div id="container" style="width: 100%; min-height: 500px; margin: 0 auto"></div>
</body>
</html>
And this the code for fetching data from mysql
<?php
require('dbcon.php');
//select database
//define array
//we need two arrays - "male" and "female" so $arr and $arr1 respectively!
$arr = array();
$result = array();
//get the result from the table "highcharts_data"
$sql = "select * from world";
$q = mysqli_query($con, $sql) or die(mysqli_error());
$j = 0;
while ($row = mysqli_fetch_assoc($q)) {
//highcharts needs name, but only once, so give a IF condition
if ($j == 0) {
$arr['name'] = 'Percentage';
$j++;
}
//and the data for male and female is here
$arr['data'][] = $row['datavalue'];
}
//after get the data for male and female, push both of them to an another array called result
array_push($result, $arr); //1
//now create the json result using "json_encode"
print json_encode($result, JSON_NUMERIC_CHECK);
mysqli_close($con);
?>

We Keep Coding

JavaScript is the programming language of the Web.

Live data from MySQL with highchart - javascript

I think the graph required an array that contains numeric values in it. In your case one value is numeric but another one is string so convert all the values to numeric i.e. either integer or float. (Float is preferred here) and pass that array to the graph.

Related

live data chart not working

Loop inside Jquery Chart to make it dynamic

Highcharts xaxis is off by several hours

No chart is shown using HighCharts

Highcharts Dynamic Chart with MySQL Data doesn't reload

Categories

Resources