Question

I am attempting to make a stacked column chart representing events on a timeline. I need evenly-spaced bars, that scroll left/right with their respective ticks. Currently upon scrolling, the columns remain in place and their data is updated to reflect the new timespan they represent (I assume).

For example: when scrolling one "step" to the right, I note these differences:

The column remains in place with updated data and the axis tick moves

The column remains in place with updated data and the axis tick moves to the left. This results in a 'graphic equalizer'-like effect when scrolling. (See fiddle)

What I need is to have the column represent the same data for the life of the chart, and to scroll left/right with its tick mark.

I suspect I'm misunderstanding something in the configuration. Any help/direction would be very much appreciated.

(As a side note: is there any easy way to style/color data from the past (with an xAxis datetime value of < today) differently to normal data?)

chart: {
    alignTicks: false,
    backgroundColor: '#eeeeee',
    events: {
        load: function (e) {
            this.xAxis[0].setExtremes(1390943153305, 1400015153305);
        }
    },
    ignoreHiddenSeries: true,
    renderTo: $('#chart')[0]
},
colors: ['#89f1a4','#68d9f7','#9eb9ef','#c49eef'],
credits: {enabled: false},
legend: {
    enabled: true,
    shadow: true
},
rangeSelector: {selected: 1},
title: {text: 'Global Events'},
navigator: {
    height: 40,
    xAxis: {
        gridLineWidth: 1
    },
    series: {type: 'column'}
},
plotOptions: {
    series: {
        showInLegend: true,
        stacking: 'normal',
        dataGrouping: {
            enabled: true,
            forced: true,
            units: [
                ['millisecond', [604800000]], // Attempting to force data into weekly groups, throws error if this is null
                ['second', [604800]],
                ['minute', [10080]],
                ['hour', [168]],
                ['day', [7]],
                ['week', [1]], // Expected this to be the only required option if I only want weekly grouping...
                ['month', null],
                ['year', null]
            ]
        }
    }
},
xAxis: {ordinal: false},
series: data
Was it helpful?

Solution

If you want just weekly grouping, then only that one set, see: http://jsfiddle.net/s6BmC/2/

I think that resolves your issue, right?

        plotOptions: {
            series: {
                showInLegend: true,
                stacking: 'normal',
                dataGrouping: {
                    enabled: true,
                    forced: true,
                    units: [ [ 'week', [1] ]]
                }
            }
        },

Regarding additional question: - yes you can set specific color for each point, but you need to determine on your own what color should be set:

data: [{ x: timestamp, y: value, color: color }, { x: timestamp, y: value, color: color }... ]

Another solution is to wrap setting color for column. Something similar I have done for candlestick: http://jsfiddle.net/79WZM/ (this solution requires much more knowledge of Highcharts).

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top