Loading a custom json file - highcharts.js

Question

I have a problem with loading the .json file:

[
    [
        [
            "2014-11-19 06:00:00",
            "1.1"
        ],
        [
            "2014-11-19 14:00:00",
            "4.9"
        ],
        [
            "2014-11-19 15:00:00",
            "4.9"
        ],
        [
            "2014-11-19 16:00:00",
            "4.9"
        ],
        [
            "2014-11-19 17:00:00",
            "4.9"
        ],
        [
            "2014-11-19 18:00:00",
            "4.9"
        ]
    ],
    [
        [
            "2014-11-13 23:00:00",
            "194"
        ],
        [
            "2014-11-14 00:00:00",
            "195"
        ],
        [
            "2014-11-14 01:00:00",
            "187"
        ],
        [
            "2014-11-14 02:00:00",
            "191"
        ],
        [
            "2014-11-14 03:00:00",
            "218"
        ],
        [
            "2014-11-14 04:00:00",
            "170"
        ]
    ]
]

values:

[[data, valueTemperature],[data,WindMax]]

I tried in this way, but does not work:

$(document).ready(function () {
 var options = {
    chart: {
        renderTo: 'container',
        type: 'spline',
        zoomType: 'xy'
    },

    title: {
        text: 'Temperatura'
    },

    subtitle: {
        text: '5 dni'
    },

    xAxis: {
        type: 'datetime',

    },


    yAxis: [{ // Primary yAxis
        labels: {
            format: '{value}°C',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },
        title: {
            text: 'Temperature',
            style: {
                color: Highcharts.getOptions().colors[1]
            }
        },

        min: -25,
        max: 25,
    }, { // Secondary yAxis
        title: {
            text: 'Prędkość wiatru',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        labels: {
            format: '{value} m/s',
            style: {
                color: Highcharts.getOptions().colors[0]
            }
        },
        min: 0,
        max: 15,
        opposite: true
    }],

    tooltip: {
        shared: true
    },

    series: [{}]
};

var chart;

$.getJSON('test.json', function (data) {
    options.series[0].data = data;
    chart = new Highcharts.Chart(options);


});

});

How to correctly write it for a data type?

Are you hosting the files with a web server of any kind? Errors in console? — David Nguyen
– David Nguyen, Commented Nov 21, 2014 at 21:18
Yes , loads the file from my server, so no problem with ACCES-CONTROL-ALLOW-ORIGN. No errors in the console. The file date is correctly captured. — Sebastiano
– Sebastiano, Commented Nov 21, 2014 at 21:21

score 3 · Accepted Answer · 2014-11-22 01:58:22Z

3

There are a few issues:

You've stored numeric data as strings. While trying to find a solution, I had to strip the "'s off the temperature and wind speed values or I'd get Highcharts Error #14
You have two data series, yet you are only creating one object in options.series. You should be creating two series objects and adding them to the options.series array.
For the second series, you must specify which y axis to use. In this case yAxis == 1.
The max value for your second y axis is too low to display the data.

Here's an example to showcase the above: http://jsfiddle.net/6yvdkp20/1/

$(function () {
    var options = {
        chart: {
            renderTo: 'container',
            type: 'spline',
            zoomType: 'xy'
        },
        title: {
            text: 'Temperatura'
        },
        subtitle: {
            text: '5 dni'
        },
        xAxis: {
            type: 'datetime',
        },
        yAxis: [
            { // Primary yAxis
                labels: {
                    format: '{value}°C',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                },
                title: {
                    text: 'Temperature',
                    style: {
                        color: Highcharts.getOptions().colors[1]
                    }
                },

                min: -25,
                max: 25,
            }, { // Secondary yAxis
                title: {
                    text: 'Prędkość wiatru',
                    style: {
                        color: Highcharts.getOptions().colors[0]
                    }
                },
                labels: {
                    format: '{value} m/s',
                    style: {
                        color: Highcharts.getOptions().colors[0]
                    }
                },
                min: 0,
                max: 200,
                opposite: true
            }
        ],
        tooltip: {
            shared: true
        },
        series: [
            {
                data: [
                    [
                        "2014-11-19 06:00:00",
                        1.1
                    ],
                    [
                        "2014-11-19 14:00:00",
                        4.9
                    ],
                    [
                        "2014-11-19 15:00:00",
                        4.9
                    ],
                    [
                        "2014-11-19 16:00:00",
                        4.9
                    ],
                    [
                        "2014-11-19 17:00:00",
                        4.9
                    ],
                    [
                        "2014-11-19 18:00:00",
                        4.9
                    ]
                ]
            },{
                yAxis: 1, // This means the second yAxis will be used to plot this series
                data:[
                    [
                        "2014-11-13 23:00:00",
                        194
                    ],
                    [
                        "2014-11-14 00:00:00",
                        195
                    ],
                    [
                        "2014-11-14 01:00:00",
                        187
                    ],
                    [
                        "2014-11-14 02:00:00",
                        191
                    ],
                    [
                        "2014-11-14 03:00:00",
                        218
                    ],
                    [
                        "2014-11-14 04:00:00",
                        170
                    ]
                ]
            }
        ]
    };

    $('#container').highcharts(options);
});

Since you mentioned in the comments that you cannot change the format of the data you are fetching, you will need to correct the format after receiving the data. The following function should correctly do that (though I make no guarantees):

function fixFormat(data) {
    for(var i = 0; i < dataSeries[0].length; ++i) {
        dataSeries[0][i][1] = parseFloat(dataSeries[0][i][1]);
    }

    for(var i = 0; i < dataSeries[1].length; ++i) {
        dataSeries[1][i][1] = parseInt(dataSeries[1][i][1]);
    }
}

Usage:

$.getJSON('http://kamery.topr.pl/meteo/charts/moko.php', function (data) {
    // Correct the formatting
    fixFormat(data);

    // Put the data in the right place
    options.series[0].data = data[0];
    options.series[1].data = data[1];
});

edited Nov 22, 2014 at 1:58

answered Nov 21, 2014 at 22:12

user4266696

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

7 Comments

Sebastiano Over a year ago

Thanks for your feedback. Unfortunately, further file will not load properly. Below the code json: pastebin.com/swTRGNgX The code:` series: [ { data: [] }, { yAxis: 1, // This means the second yAxis will be used to plot this series data: [] } ] }; $.getJSON('test/test.json', function (data) { options.series[0].data = data; options.series[1].data = data; chart = new Highcharts.Chart(options); });`

user4266696 Over a year ago

You've set both options.series[0] and options.series[1] to data. You should set the first to data[0] and the second to data[1].

user4266696 Over a year ago

@Sebastiano In addition to my comment above, the page you are fetching the JSON data from still stores the numeric values as strings (see issue 1 I mentioned above). You will need to correct all the issues above before your code will work.

Sebastiano Over a year ago

No I do not understand how to improve the numeric data as strings. I do not have opportunities to improve the json file

user4266696 Over a year ago

@Sebastiano I've edited my answer with two new blocks of code to solve the formatting issue. I hope that helps.

|

Collectives™ on Stack Overflow

Loading a custom json file - highcharts.js

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related