CODEWITHSUNDEEP
javascriptdatetimegraphchartshighcharts
Ian McIntyre Silber
Ian McIntyre Silber

Reputation: 5663

Highcharts - show every other x-axis category

I have Highcharts set up to display a graph with a bunch of xAxis categories. This is all working fine, but I would like to be able to skip some of the xAxis categories, so not everything one is shown. You can see an example of this working within Campaign Monitor's reporting section (screenshot: http://screencast.com/t/Y2FjNzQ4Y).

Any idea how I can achieve this same layout?

Upvotes: 19

Views: 22963

Answers (4)

sharavsambuu
sharavsambuu

Reputation: 31

here is my ugly solution :)

I'm using array as queue. http://javascript.about.com/library/blqueue.htm if you fill point datas to the queue, you can to set datas for your chart series.

var myQueue = new Array();
var myPoint = [x, y];                                       myQueue.push(myPoint);
chart.series[0].setData(myQueue);

my X axis is not a datetime, it's an integer
first 
var x = 0;

x value should be always increment when you need a new point. http://dl.dropbox.com/u/3482121/picture/highcharts/PM/Screenshot.png

Upvotes: 0

d2burke
d2burke

Reputation: 4111

It seems like the xAxis:labels:step value is what should be used to accomplish this:

        xAxis: {
            categories: ['JAN', 'FEB', 'MAR', 'APR', 'MAY'],
            labels:{
                step: 2 // this will show every second label
            }
        },

Step Axis Labels

Super late, but I figure this can help someone out.

Upvotes: 46

valis
valis

Reputation: 51

    xAxis: {
        categories: categoriesname,
        labels: {
            style: {
                color: '#000',
                font: '9px Trebuchet MS, Verdana, sans-serif'
            }
        },
        **tickInterval: TickInterval,**// SET THIS
        tickPixelInterval: 80,
        tickmarkPlacement: 'on'
    },

Upvotes: 5

Gazler
Gazler

Reputation: 84140

You can set the xAxis type as 'datetime' then set the pointInterval and PointStart in the plotoptions.

Code example:

var chart;
$(document).ready(function () {
    chart = new Highcharts.Chart({
        "xAxis": {
            "type": "datetime"

        "plotOptions": {
            "line": {
                "pointInterval": 86400000,
                "pointStart": 1282408923000
            }
        },
    });
});

The figures you see for pointInterval and Start are in millisecionds which you can generate using getTime() The interval in your case would be 86400000ms which is one day. The library displays appropriate intervals based on your data interval.

Upvotes: 4

Related Questions