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

    });

});

Answer 1

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.

Answer 2

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]
        }]