Using JSON file in Highcharts

Question

I have a series of high and low temperatures that I would like to display in a column range chart with Highcharts.

I would specifically like a chart like the one shown in the demo example at: http://www.highcharts.com/stock/demo/columnrange

I have placed my data in a file called datatest.json, and it contains this text:

[
[1230771600000, -5.8, 10.1],
[1230858000000, -4.1, 1.4],
[1230944400000, -0.5, 4.1],
[1231030800000, -8.9, -0.7],
[1231117200000, -9.7, -3.7],
[1231203600000, -3.4, 3.2],
[1231290000000, -3.9, -0.2],
[1231376400000, -2.4, 6.7],
[1231462800000, 3.8, 6.9],
[1262221200000, -12.2, -6.5]
]

When I load the data from the file, it doesn't give me a chart. For example, with this:

$(function () {

    $.getJSON('data/datatest.json', function (data) {

        $('#container').highcharts('StockChart', {

            chart: {
                type: 'columnrange'
            },

            rangeSelector: {
                selected: 2
            },

            title: {
                text: 'Temperature variation by day'
            },

            tooltip: {
                valueSuffix: '°C'
            },

            series: [{
                name: 'Temperatures',
                data: data
            }]

        });
    });

});

But if I put the data directly into my code (as follows), it does display the chart as I expect:

$(function () {

        $('#container').highcharts('StockChart', {

            chart: {
                type: 'columnrange'
            },

            rangeSelector: {
                selected: 2
            },

            title: {
                text: 'Temperature variation by day'
            },

            tooltip: {
                valueSuffix: '°C'
            },

            series: [{
                name: 'Temperatures',
                data: [
[1230771600000, -5.8, 10.1],
[1230858000000, -4.1, 1.4],
[1230944400000, -0.5, 4.1],
[1231030800000, -8.9, -0.7],
[1231117200000, -9.7, -3.7],
[1231203600000, -3.4, 3.2],
[1231290000000, -3.9, -0.2],
[1231376400000, -2.4, 6.7],
[1231462800000, 3.8, 6.9],
[1262221200000, -12.2, -6.5]
]
            }]

        });

});

I think that I am either formatting the data incorrectly in my data file, or that I'm not reading from the file in the proper way.

Any suggestions or guidance to help me get on the right track would be much appreciated.

As @SebastianBochan stated. Your JSON is not in valid JSON format so inputting it as such will not work. See en.wikipedia.org/wiki/JSON for example JSON format. — alacy
– alacy, Commented Jan 8, 2015 at 17:11
@SebastianBochan must still be misunderstanding. I added { and } to the beginning and end of my file, and I'm still not getting anything to display. To make sure that I can read the file, I verified that $('#dataInfo').load('data/datatest.json'); works to read the file, and I get the text from the file in my browser. Perhaps there is some other detail about the JSON formatting that I'm missing. — kent
– kent, Commented Jan 9, 2015 at 3:15
Have you tried ot validate your JSON if is correct? Please paste yor JSON output here. — Sebastian Bochan
– Sebastian Bochan, Commented Jan 9, 2015 at 10:23

kent · Accepted Answer · 2015-01-10 22:48:32Z

1

Credit to @SebastianBochan for directing my attention to the fact that my JSON was not valid.

Here is an abbreviated clip of what the correctly formatted JSON looks like:

{
"data":
[
[1420640460000,36.7,37.25],
[1420640520000,37.19,37.74],
[1420640580000,37.74,38.6],
[1420640640000,38.72,39.33],
[1420640700000,39.33,39.51]
]
}

I used a JSON validator: http://jsonformatter.curiousconcept.com/

It didn't matter whether I called it "data" or "temperature" It just had to be a string, and then when I referenced it, I needed to be sure to reference it as data.data. If I had called it "temperature" then it would have been data.temperature. In any case, here is the bit of code:

    series: [{
        data: data.data
    }]

answered Jan 10, 2015 at 22:48

kent

111 silver badge4 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Using JSON file in Highcharts

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related