Highcharts and Json data

Question

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

Answer 1

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);
    });
});