Date not displaying correctly on x-axis in High Stock Charts

Question

I am working on stock charts where i have to show the stock data of three currencies. I am able to see the chart and rates corresponding to it but dates on x axis are not coming properly. my json response is like this .

[{"rate":1.3349,"month":"1422403200000"},{"rate":1.3415,"month":"1422316800000"},{"rate":1.3394,"month":"1422230400000"},{"rate":1.3202,"month":"1421971200000"},{"rate":1.304,"month":"1421884800000"},{"rate":1.3109,"month":"1421798400000"},{"rate":1.3017,"month":"1421712000000"},{"rate":1.3114,"month":"1421625600000"},{"rate":1.305,"month":"1421366400000"},{"rate":1.292,"month":"1421280000000"},{"rate":1.2876,"month":"1421193600000"},{"rate":1.2819,"month":"1421107200000"},{"rate":1.2801,"month":"1421020800000"}]

its just an example of json response. in my java vo rate is of double type and month is of String type.

my js code is here

function drawChart(){

    var seriesOptions = [],
        seriesCounter = 0,
        names = ['EURGBP', 'EURJPY', 'EURCHF'],
        // create the chart when all data is loaded
        createChart = function () {

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

                rangeSelector: {
                    selected: 4
                },

                yAxis: {
                    labels: {
                        formatter: function () {
                            return (this.value > 0 ? ' + ' : '') + this.value + '%';
                        }
                    },
                    plotLines: [{
                        value: 0,
                        width: 2,
                        color: 'silver'
                    }]
                },

                plotOptions: {
                    series: {
                        compare: 'percent'
                    }
                },

                tooltip: {
                    pointFormat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>',
                    valueDecimals: 2
                },

                series: seriesOptions
            });
        };

    $.each(names, function (i, name) {

        $.getJSON('/bin/drawChart,    function (data) {
            var dataArray = new Array;
 $.each(data, function (i, obj) {
   dataArray.push([obj.month,obj.rate]);
  });
            alert(dataArray);
            seriesOptions[i] = {
                name: name,
                data: dataArray,
                 tooltip: {
                    valueDecimals: 2
              }
            };

            // As we're loading the data asynchronously, we don't know what order it will arrive. So
            // we keep a counter and create the chart when all the data is loaded.
            seriesCounter += 1;

            if (seriesCounter === names.length) {
                createChart();
            }
        });
    });

}

Why date is not appearing correctly on x-axis

Answer 1

The problem is that in your JSON should be fields x and y. Morever values should be number not string as you have. So you should prepare correct JSON structure in your backend or parse it after loading.

Answer 2

绘制图表方法中缺少您的X轴信息