how to set xAxis pointInterval(update: tickInterval) in highcharts

4
votes

I want to set the xAxis pointInterval in highstock.

I'm formatting the xAxis:

xAxis: {
        type: 'datetime',
        labels: {
            formatter: function () {
                var someDate = new Date(this.value);
                return Myfunction(new Date(someDate));
            }
        }
    },

I have searched and found some ways but they were not worked for me! In order to set the pointInterval for a day( 24 * 3600 * 1000 // one day ) I set it when I was adding a series:

chart.addSeries({
                name: my name,
                data: my data,
                id: my id,
                type: 'spline',
                pointStart:start date,
                pointInterval: 24 * 3600 * 1000 // one day
            });

but It didn't work. so I tried to do sth else:

plotOptions: {
        spline: {
            pointStart: start date,
            pointInterval: 24 * 3600 * 1000 // one day
        }
    },

It also did not work.

I've tested:

chart.xAxis[0].setCategories([data])

but this code makes the CPU working a lot and the browser crashes!

Actually I've seen these examples. but when I try them they aren't useful!

http://jsfiddle.net/larsenmtl/SJSwt/1/

http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/xaxis/labels-overflow/

Please help me!

Thank you

UPDATE: my data is formatted like this:

series: [{
        data: [
            [Date.UTC(2010, 0, 1), 29.9],
            [Date.UTC(2010, 0, 2), 71.5],
            [Date.UTC(2010, 0, 3), 106.4],

e.g. jsfiddle.net/bahar_Agi/J6H7f

2
highchartshighstock

2 Answers

5
votes

Pointstart only really applies if you haven't specified x values for your data or are using categories. As you have specified x and y values for each point, you should use the tickInterval option on the x-axis like this:

xAxis: {
        type: 'datetime',
        labels: {
            style: {
                fontFamily: 'Tahoma'
            },
            rotation: -45
        },
        tickInterval: 24 * 3600 * 1000
    },

The highcharts api guide mentions this for datetime axis: http://api.highcharts.com/highcharts#xAxis.tickInterval

In this example, I set the tickInterval to 1 day, which may be a bit too small for your data, but you can change that to whatever interval you want.

2
votes

I think you want to use tickInterval option for xAxis, see: 

xAxis: {
        tickInterval: 24 * 3600 * 1000,
        type: 'datetime',
         labels: {
            style: {
                fontFamily: 'Tahoma'
            },

            rotation: -45
         }
    },

jsFiddle: http://jsfiddle.net/J6H7f/1/