Highcharts line graph, filling xAxis from JSON

Question

I'm trying to get a line graph from Highcharts. My JSON looks like

[{"Monat":"April","d07geb":1.5},{"Monat":"June","d07geb":0.5},{"Monat":"March","d07geb":0.5},{"Monat":"May","d07geb":0.2}]

Monat means month, the value i'm trying to get on the xAxis. d07geb is the amount of money for that specific month.

The line draws perfect and the highchart seems to be correct. But instead of month, the xAxis has numeric values. Starting with 1. Jan and the next entry is 00:00:00.001.

I'm very new at this. I've managed to use pie and column charts. But this one drives me nuts

    $(function () {
    var chart;
    var myJson =  
[{"Monat":"April","d07geb":1.5},{"Monat":"June","d07geb":0.5},{"Monat":"March","d07geb":0.5},{"Monat":"May","d07geb":0.2}] 
    $(document).ready(function() {

        var options = {
        chart: {
                renderTo: 'container',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            title: {
                text: 'Money per Month'
            },
             xAxis: {
            type: 'datetime'},
            tooltip: {
     formatter: function() {
        return '<b>'+ this.point.name;
     }
  },
            plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    dataLabels: {
                        enabled: true,
                        color: '#000000',
                        connectorColor: '#000000',
                        formatter: function() {
                            return '<b>'+ this.point.name;
                        }
                    }
                }
            },
            series: []

    };

        var seriesNew = {
                type: 'line',
                name: 'value',
                data: []
            };



        jQuery.each(myJson, function (itemNo, item) {
            seriesNew.data.push([
               item.Monat,
               item.d07geb
            ])
        });

        options.series.push(seriesNew);      
        chart = new Highcharts.Chart(options);

    });

});

score 0 · Answer 1 · answered Jun 23 '13 at 13:03

Could you not separate your x-axis labels and your data values?

If that's an option you could do this:

http://jsfiddle.net/gh/get/jquery/1.9.1/highslide-software/highcharts.com/tree/master/samples/highcharts/demo/line-basic/

        xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },
        series: [{
            name: 'Tokyo',
            data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6]
        }, {
            name: 'New York',
            data: [-0.2, 0.8, 5.7, 11.3, 17.0, 22.0, 24.8, 24.1, 20.1, 14.1, 8.6, 2.5]
        }, {
            name: 'Berlin',
            data: [-0.9, 0.6, 3.5, 8.4, 13.5, 17.0, 18.6, 17.9, 14.3, 9.0, 3.9, 1.0]
        }, {
            name: 'London',
            data: [3.9, 4.2, 5.7, 8.5, 11.9, 15.2, 17.0, 16.6, 14.2, 10.3, 6.6, 4.8]
        }]

The part that is driving me nuts is, that in phpmyadmin you can use a higchart to display the query directly. there it works like a charm. but i cant get it out of there. — user2476011, Jun 23 '13 at 14:06

score 0 · Accepted Answer · answered Jun 23 '13 at 13:06

If your xAxis is set to datetime, then your JSON needs JS timestamps (Unixtime*1000). I'd suggest you use categories as xAxis:

xAxis: {
            categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun',
                'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
        },

Then you also have to change your JSON to deliver 12 values sorted from January to December.

Highcharts line graph, filling xAxis from JSON

2 Answers2