I have php file which produce data in JSON format get_json.php and file where I want to display chart grafik.php.
Code in get_json.php
<?php
include('config.php'); //connection to DB
$r=("SELECT * FROM data");
$result=mysql_query($r);
while($row = mysql_fetch_array($result)){
$date= strtotime($row['cas'])*1000; //time in format 2013-03-21 16:23:11
$values=hexdec($row['data']); // hex values to decimal
$array[]=array($date, $values);
}
echo json_encode($array);
?>
Output of JSON get_json.php [[1364463576000,46906],[1364463578000,50379],[1364463580000,33733],[1364463582000,5612], [1364463981000,14213],[1364464007000,11208],[1364490137000,38047],[1364665254000,14964],[1364665256000,11443],[1364665257000,9005],[1364665259000,5283],[1364665260000,1731]]
Code in grafik.php
<html>
<head>
<script src="http://code.highcharts.com/stock/highstock.js"></script>
<script src="http://code.highcharts.com/stock/modules/exporting.js"></script>
</head>
<body>
<script>
$(function() {
$.getJSON('http://localhost/testing10/get_json.php', function(data) {
$('#container').highcharts('StockChart', {
rangeSelector : {
selected : 1
},
title : {
text : 'AAPL Stock Price'
},
series : [{
name : 'AAPL Stock Price',
data : data,
marker : {
enabled : true,
radius : 3
},
shadow : true,
tooltip : {
valueDecimals : 2
}
}]
});
});
});
</script>
<div id="container" style="height: 500px; min-width: 500px"></div>
</body>
</html>
I dont know where I did a mistake, if anybody see some mistake please help me to solve this. I am trying to do chart where on X-axis will be time and on Y-axis proper value.
I got your data working:
$('#container').highcharts({
rangeSelector: {
selected: 1
},
title: {
text: 'AAPL Stock Price'
},
series: [{
name: 'AAPL Stock Price',
data: [
[1364463576000, 46906],
[1364463578000, 50379],
[1364463580000, 33733],
[1364463582000, 5612],
[1364463981000, 14213],
[1364464007000, 11208],
[1364490137000, 38047],
[1364665254000, 14964],
[1364665256000, 11443],
[1364665257000, 9005],
[1364665259000, 5283],
[1364665260000, 1731]
],
marker: {
enabled: true,
radius: 3
},
shadow: true,
tooltip: {
valueDecimals: 2
}
}]
});
I had to change the fist line from:
$('#container').highcharts('StockChart', {
to
$('#container').highcharts({