How to draw a column/bar graph or something like timeline from the following data

Question

I have the following data

From the above data the need is to draw a timeline of the vechicle with different color for differnet number of times the rollers passed i.e.

I am unable to map the data points on chart or some vertical time line

Have tried using following highcharts:

column chart
heat maps
treemap

But unable to generate results as expected

score 1 · Accepted Answer · answered May 07 '23 at 11:09

You can make it a column-stacked chart with just one column:

Highcharts.chart('container', {
    chart: {
        type: 'column'
    },
    title: {
        text: 'Distances',
        align: 'left',
       
    },
    xAxis: {
        categories: [''],
        
    },
    yAxis: {
        min: 0,
        title: {
            text: 'distance in m'
        },
        stackLabels: {
            enabled: true,
            style: {
                fontWeight: 'bold',
                
                textOutline: 'none'
            }
        }
    },
    legend: {
        layour: 'horizontal',
        anchor: 'right',
        //x: 0,
        verticalAlign: 'bottom',
        
        borderWidth: 1,
        shadow: false
     },
    tooltip: {

        pointFormatter(original){ 
       return `<span style="color:${this.color}">●</span> from: ${this.stackY-this.y} to: ${this.stackY}`;
        }
    },
    plotOptions: {
        column: {
            stacking: 'normal',
            dataLabels: {
                //enabled: true
            }
        }
    },
    series: [
    {
        name: '2',
        data: [62],
        color: 'orange',
        showInLegend: false
    },
    {
        name: '1',
        data: [48],
        color: 'red',
        showInLegend: false
    },{
        name: '2',
        data: [26],
        color: 'orange',
        showInLegend: false
    },{
        name: '4',
        data: [49],
        color: 'green'
    },{
        name: '3',
        data: [2],
        color: 'darkgreen'
    },{
        name: '2',
        data: [7],
        color: 'orange',
        showInLegend: false
    },{
        name: '3',
        data: [2],
        color: 'red',
        showInLegend: false
    },{
        name: '2',
        data: [45],
        color: 'orange'
    },{
        name: '1',
        data: [10],
        color: 'red'
    },]
});

<div id="container" style="width:250px"></div>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/accessibility.js"></script>

Of course, the data in the series can be generated by a function taking the data from an original format and automatting some structures, like adding showInLegend: false for the categories that were already represented in the legend.

in your example its aggregating the results as in your inputs of data 2 and 7 are merged into data 10 and post that it shows 55 i.e. adding 10 + 45 so it concludes that the difference between the initial position and final position should be passed but is there a way we can determine from where in y-axis the coords should start, something like {name: '1', data: [startY: 0, endY: 10], color: ''red} — Navitas28, May 07 '23 at 15:09
Well, it can be done some other way, with fixed positioning like in [this example](https://www.highcharts.com/demo/column-placement), but before I do that, I should understand what exactly is problem with this, what do you mean it aggregates? The input format of data is not important, as I said in the last paragraph, I can write a function that transforms the data from another format, like the one in your message — kikon, May 07 '23 at 15:23
Here's an [updated version](https://jsfiddle.net/1s75aj9d/) that avoids some issues with legend click and hover; and [this](https://jsfiddle.net/7c5en2k0/) is a version that generates exactly the same thing from another format of data, through a small function `generateDataFromTo` — kikon, May 07 '23 at 17:04
Thanks @kikon [this](https://jsfiddle.net/7c5en2k0/) helped me a lot, by aggregate I meant in the earlier examples if you checkpoint where data is 2,7 are missing from the map also in the y-axis the highest point reached is the summation of all the data values, not the final y value — Navitas28, May 08 '23 at 08:49
I'm still not sure I understand - isn't the final y value the same as the summation of all values? Do you expect your data will have gaps? or overlaps? -- those possibilities are still not taken into account - the assumption used was that the end of a bar is equal to the start of the next — kikon, May 08 '23 at 08:57
I made a version that admits gaps in data - https://jsfiddle.net/tLoyu0hw/ and I introduced a gap between the last bar and the bar before (from 189 to 199) for testing purposes. Please let me know if that's what you wanted. Overlaps can also be implemented (if a bar may start lower than the previous one) - but that's slightly more complicated, just let me know if that's also a possibility — kikon, May 08 '23 at 09:11
No the final value was not the summation of earlier values for e.g in the latest two examples [1](https://jsfiddle.net/7c5en2k0/) [2](https://jsfiddle.net/tLoyu0hw/) the final value is `251` which is also the maximum value in the provided data while in earlier examples the final value was aggregating all the preceding y values , thanks for the help the last two fiddle works exactly as expected — Navitas28, May 08 '23 at 10:08

How to draw a column/bar graph or something like timeline from the following data

1 Answers1