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:
But unable to generate results as expected
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.