I have been trying to learn to use Highctarts.js recently and have ran into a small issue.
When I use their example code, and their example data.json file it works. However when I replace their json file with my own it doesn't work, what am I doing wrong?
Highchart JS
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'spline'
},
series: [{}]
};
$.getJSON('data.json', function(data) {
options.series[0].data = data;
var chart = new Highcharts.Chart(options);
});
});
Highchart data.json
[
[1,12],
[2,5],
[3,18],
[4,13],
[5,7],
[6,4],
[7,9],
[8,10],
[9,15],
[10,22]
]
This successfully produces a graph on page load.
My code doesn't, any ideas what's wrong?
My JS (exacy same as Highchart.js above only replaced the json file)
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'spline'
},
series: [{}]
};
$.getJSON('results.json', function(data) {
options.series[0].data = data;
var chart = new Highcharts.Chart(options);
});
});
My results.json
[
{
"Month": "January",
"Count": 162690
},
{
"Month": "February",
"Count": 109986
},
{
"Month": "March",
"Count": 145303
},
{
"Month": "April",
"Count": 116949
},
{
"Month": "May",
"Count": 253523
},
{
"Month": "June",
"Count": 51920
}
]
The monthConn.php page code I use to generate the json is as follows - perhaps I'm not creating the results.json correctly?;
$stmt = $conn -> prepare("SELECT
MONTHNAME(TimeStamp), direction, COUNT(*)
FROM
transactions
WHERE TimeStamp BETWEEN '2014-01-01' AND '2014-12-31'
GROUP BY EXTRACT(MONTH FROM TIMESTAMP);");
$stmt -> execute();
$stmt -> bind_result($month, $count);
while ($stmt -> fetch()) {
$data[] = array(
'Month' => $month,
'Count' => $count
);
}
$stmt->close();
file_put_contents("results.json", json_encode(($data)));
Ideally I would like a bar chart
months along the bottom (x axis)
count alont left (y axis)
Something like this
I had another look at this and realised the Highchart options were incorrectly formatted.
I've created a working example here. http://jsfiddle.net/z9mgt4r6/
$(function () {
$.getJSON('http://mockbin.org/bin/bd057e57-36e7-4d24-a238-32d19fc23d2c', function (data) {
var options = {
title: {text: 'Title'},
subtitle: {text: 'Subtitle'},
xAxis: {categories: []},
yAxis: {title: {text: 'Count'}},
series: [{name: 'Count', data: []}]
};
for (var i = data.length - 1; i >= 0; i--) {
options.xAxis.categories.push(data[i].Month);
options.series[0].data.push(data[i].Count);
};
$('#container').highcharts(options);
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.