CODEWITHSUNDEEP
javascriptarrayshighcharts
Sebastiano
Sebastiano

Reputation: 113

Loading a custom json file - highcharts.js

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?

Upvotes: 0

Views: 472

Answers (1)

user4266696
user4266696

Reputation:

There are a few issues:

  1. 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
  2. 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.
  3. For the second series, you must specify which y axis to use. In this case yAxis == 1.
  4. 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];
});

Upvotes: 3

Related Questions