CODEWITHSUNDEEP
highcharts
Guilherme Reda
Guilherme Reda

Reputation: 115

Multiple columns on same series. Highchart

I would like to have a chart that represent data like this. enter image description here

the series code would be something like this.

series: [{ name: 'Car 1', data: [[1, 3], [4, 6], [7, 9]] }, { name: 'Car 2', data: [[2, 3], [8, 10], [12, 18]] }]

The first number on each array would be the starting point and the second the finishing point, and all arrays inside the main array would be on the same line.

Upvotes: 0

Views: 824

Answers (1)

Barbara Laird
Barbara Laird

Reputation: 12717

An inverted columnrange chart should work. Your data isn't formatted in a way that would work with what you want, but transforming it isn't difficult. If you aren't stuck with the data format you showed, you just need a point object with x, low, and high.

For example:

{
    x: 1,
    low: 0,
    high: 4
}

The following massages your current structure into the correct format:

$(function () {

    var series = [{
        name: 'Car 1',
        data: [
            [1, 3],
            [4, 6],
            [7, 9]
        ]
    }, {
        name: 'Car 2',
        data: [
            [2, 3],
            [8, 10],
            [12, 18]
        ]
    }, {
        name: 'Car 3',
        data: [
            [5, 9],
            [1, 2]
        ]
    }];

    // massage the data
    var data = [];
    for(var i=0;i<series.length;i++) {
        for(var j=0;j<series[i].data.length;j++) {
             data.push({
                 x: j, 
                 low: series[i].data[j][0],
                 high: series[i].data[j][1],
                 name: series[i].name
             });
        }
    }

    $('#container').highcharts({

        chart: {
            type: 'columnrange',
            inverted: true
        },

        plotOptions: {
            columnrange: {
                dataLabels: {
                    enabled: false
                }
            }
        },
        legend: {
            enabled: false
        },

        series: [{
            name: 'Cars',
            data: data
        }]

    });

});

http://jsfiddle.net/hqwrx4uy/

Upvotes: 2

Related Questions