Set a custom rangeSelector and disable xAxis label on chart and on Navigator with Highstock

0
votes

I'm using highstock with lazy-loading like in this demo, i'm using 2 different series: both have a "time" parameter but none of them should have a date-time xAxis.

Each series has a structure like this:

serie1:[{"x" => 1, "y" => value_1, "time" => time_of_point_1},
        {"x" => 2, "y" => value_2, "time" => time_of_point_2},
        ....
        {"x" => n, "y" => value_n, "time" => time_of_point_n}];


serie2:[{"x" => 1, "y" => value_1, "z" => value_z_1, "time" => time_of_point_1},
        {"x" => 2, "y" => value_2, "z" => value_z_2, "time" => time_of_point_2},
        ....
        {"x" => n, "y" => value_n, "z" => value_z_n, "time" => time_of_point_n}];

My goal it to have a custom rangeSelector that zoom the chart according to the time parameter that each point has.

So my questions are:

Is possible to have a custom rangeSelector that zoom on chart according to a point parameter different from x and y values?:

let's say:

 events:{
    if (e.trigger == "rangeSelectorButton" && 
        e.rangeSelectorButton.text == "last 3 hours"){
        // zoom on chart and set the chart
        // with all point that has "time" parameter 
        // between now and the last three hours
    }
}

Than I'm looking to a way to disable X Axis label to make all more readable.

I'm trying to disable the label on chart xAxis and on Navigator xAxis too but no matter what it shows up every time.

I used this code on both:

xAxis : {
    label: {
       enabled: false
    }
}

but it doesn't work.

Any advices?

1
javascriptjquerychartshighchartshighstock

1 Answers

0
votes

You have two ways:

  • you can call rangeselector click and call setExtremes rel topic
  • prepare your own html buttons and call setExtremes()

In the xAxis it should be labels, instaed of label: 

xAxis : {
    labels: {
       enabled: false
    }
}