CODEWITHSUNDEEP
javascriptgraphhighcharts
DakzBack
DakzBack

Reputation: 3

Highchart datetime graph x-axis unable to get data on plot when min and max is on

$(function () {
   $('#container').highcharts({
            chart: {
                showAxes : true,
                type: 'line',
                marginRight: 130,
                marginBottom: 25
            },
            tooltip: {
                crosshairs: [true],
                shared : true
             },
            title: {
                text: '',
                x: -20 //center
            },
            subtitle: {
                text: '',
                x: -20
            },
            xAxis: {
            type :'datetime',
            tickInterval : 12*30*24*3600* 1000,
            min : Date.UTC(2011, 0, 1),
            max : Date.UTC(2020, 0, 1),
            label : {
                align : 'left'
            }
            },
            yAxis: {
                title: {
                    text: 'PRICE Rs. / SQ.FT.'
                },
                lineWidth: 2,
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },

        series: [{
            data:[2165,1831,2798,2200,2237,2799,2400,2500,2865,2850]
                }]
    });
});

My x-axis having Years and data series having information which i want to show on Y axis. When i remove the interval from 2010 to 2022 i . e comment min and max option highcharts draws a graph starting from 1970 , but no points afterwards. http://jsfiddle.net/R8kx7/3/ here is the link

Upvotes: 0

Views: 2933

Answers (2)

Mark
Mark

Reputation: 108512

Based on your comments to @SteveP answer, if you don't want to explicitly pair x values to each y for each series, use the plotOptions.series pointStart and pointInterval properties.

       plotOptions: {
            series: {
                pointStart: Date.UTC(2011, 0, 1),
                pointInterval : 12*30*24*3600* 1000
            }
        },       
        series: [{
            data:[2165,1831,2798,2200,2237,2799,2400,2500,2865,2850]
    }]

Updated fiddle here.

Upvotes: 2

SteveP
SteveP

Reputation: 19093

Although you are specifying min and max, your data has no x values specified, so it is assuming that the date time values are starting at 0. There are several ways to render the chart you want.

Firstly, you could specify x values in your data points e.g.

{x:Date.UTC(2011, 0, 1),y:2165}

Another way is to not use a datetime axis type, and just specify the categories you want in the x-axis:

categories:["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"]

The second option is probably a bit simpler http://jsfiddle.net/K6xxz/

Upvotes: 1

Related Questions