Question

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?

Answer 1

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.

Answer 2

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.

Answer 3

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

Answer 4

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

友情链接