CODEWITHSUNDEEP
highcharts
user163757
user163757

Reputation: 7025

Highcharts - Permanent, Draggable Selection Box

I am currently experimenting with the Highcharts charting library, and am totally blown away by its capabilities.

Something I am trying to accomplish is to add a permanent, draggable 'selection' box (or mask) to my chart. This selection box will always be a certain fixed width. For example, say my chart has 30 days worth of data, I would like there to be a draggable box with the width of 1 day. Dragging the box up and down the x-axis (over the actual chart data) will fire off other application events using the selected day as a parameter.

I guess I am looking for something very similar to the navigator in Highstock charts - but again the primary difference is keeping a fixed width selection. Any tips or suggestions would be greatly appreciated.

Upvotes: 0

Views: 420

Answers (1)

Paweł Fus
Paweł Fus

Reputation: 45079

In Highcharts there is no such built-in feature but in Highstock you can also use only scrollbar, see: http://jsfiddle.net/ea7za/ Now you can use or bottom scrollbar or panning (drag on plotting area).

$.getJSON('url.json', function(data) {
    var min = data[0][0],     // min
        max = data[500][0];   // max  - e.g. max = min + 24 * 3600 * 1000; as one day


    // Create the chart
    $('#container').highcharts('StockChart', {


        rangeSelector : {
            enabled: false
        },
        navigator: {
            enabled: false
        },
        xAxis: {
            min: min,
            max: max
        },
        title : {
            text : 'AAPL Stock Price'
        },

        series : [{
            name : 'AAPL',
            data : data,
            tooltip: {
                valueDecimals: 2
            }
        }]
    });
});

Upvotes: 1

Related Questions