CODEWITHSUNDEEP
javascriptjquerypluginshighcharts
Alvaro
Alvaro

Reputation: 41595

Create vertical lines for an interval using highstocks

I would like to know if it is possible somehow to create vertical lines (plotLines) in the xAxis for a defined interval.

Here's an example of one of those plot lines for a given date. Would it be possible to define it for a given interval?

    xAxis: {
          tickInterval: 5 * 4 * 1000,
        lineColor: '#FF0000',
        lineWidth: 1,
        plotLines: [{
            value: Date.UTC(2014,03,05),
            width: 1,
            color: 'green',
            dashStyle: 'dash',
        }]
    },

Upvotes: 0

Views: 513

Answers (2)

Paweł Fus
Paweł Fus

Reputation: 45079

In general, in Highcharts there's not such thing like range for plotLines. However you cna create simple function for that: http://jsfiddle.net/kZkWZ/57/

function generatePlotLines(from, to, interval) {
    var plotLines = [];

    while (from < to) {
        from += interval;
        plotLines.push({
            value: from,
            width: 1,
            color: 'green',
            dashStyle: 'dash',
            label: {
                text: 'some name',
                align: 'right',
                y: 122,
                x: 0
            }
        })
    }

    return plotLines;
}


$('#container').highcharts('StockChart', {

    xAxis: {
        plotLines: generatePlotLines(Date.UTC(2011, 0, 1), Date.UTC(2011, 3, 1), 7 * 24 * 3600 * 1000)
    },

    rangeSelector: {
        selected: 1
    },

    series: [{
        name: 'USD to EUR',
        data: usdeur
    }]
});

Upvotes: 1

wergeld
wergeld

Reputation: 14442

What you are looking for is a plotBand. This allows a range to be used. General usage is like:

        xAxis: {        
            plotBands: [{ // mark the weekend
                color: '#FCFFC5',
                from: Date.UTC(2010, 0, 2),
                to: Date.UTC(2010, 0, 4)
            }],
...

EDIT - Based on clarification you can generate a series like so:

chart: {
    events: {
        load: function () {
            // set up the updating of the chart each second
            var series = this.series[1];
            var Xmin = this.xAxis[0].min;
            var Xmax = this.xAxis[0].max;
            //console.log(Xmin);
            //console.log(Xmax);
            series.pointInterval = 24 * 3600 * 1000;
            series.pointStart = Date.UTC(2011, 0, 01, 0, 0, 0, 0);
            for (var i = Xmin; i < Xmax; i = i + (24 * 3600 * 1000)) {
                var x = i,
                    y = 1;
                series.addPoint([x, y], true);
            }

        }
    }
},

You need to make that new series prior (but with no data):

series: [{
    name: 'USD to EUR',
    data: usdeur
}, {
    name: 'Interval',
    type: 'column',
    data: []
}

Demo here. Doing this every second on that chart you are using is going to grind. Mine is doing it every day. Doing it every minute takes a long time. Note that I am only adding it to the viewable min/max on load. If you want it to span the entire chart you are going to have to define your own Xmin and Xmax.

Upvotes: 2

Related Questions