Is is possible to draw a branched chart like in the picture below using Highcharts?
Here is a quick example of matching up the end points.
series: [{
data: [
[0, 29.9],
[1, 71.5],
[2, 100]
]
},{
data: [
[2, 100],
[3, 150]
]
},{
data: [
[2, 100],
[3, 50]
]
}]
http://jsfiddle.net/YmucT/
Related
How to draw a stacked chart and column chart in a single highchart
Yes, all you have to do is set the appropriate x value.
series: [{
data: [
[0, 1],
[1, 3],
[2, 5]
]
}, {
data: [
[0, 2],
[1, 2],
[2, 4]
]
}, {
data: [
[3, 8]
]
}]
Live demo: http://jsfiddle.net/BlackLabel/6m4e8x0y/4992/
API Reference: https://api.highcharts.com/highcharts/series.column.data
I want to create like below graph. How can I create like this graph?
The biggest value has to be in the middle of xAxis.
You can use xAxis.categories to set the xAxis labels and next you need to define the x value for each point in the data.
Demo: https://jsfiddle.net/BlackLabel/e7d6c2pm/
Highcharts.chart('container', {
chart: {
type: 'scatter'
},
xAxis: {
categories: ['0m', '150m', '250m', '350m', '550m', '700m', '550m', '350m', '150m', '0m'],
plotLines: [{
value: 5,
color: 'red'
}]
},
series: [{
data: [[0.1, 52], [2, 20], [3, 10], [2.5, 8], [2.8, 13]]
}, {
data: [[6, 52], [8, 20], [9, 10], [8.5, 8], [7, 13]]
}]
});
API: https://api.highcharts.com/highcharts/xAxis.categories
I'm exploring Highcharts Api and used a stacked grouped bar charts. I came on an idea on changing the bar's look. I wanted it to be a pointed bar. Would it be possible? Thanks in advance!
Image below:
Changing column series shape might be difficult because the logic behind the column series is meant to work with rectangles, so it would require extend/change Highcharts internal code.
Instead, you can use a polygon series. With a little of configuration, you should be able to get the desired effect.
$(function() {
var labels = {
1: 'Apples',
4: 'Bananas'
};
Highcharts.chart('container', {
chart: {
type: 'polygon'
},
xAxis: [{
min: -0.5,
max: 6,
tickPositions: [0, 2, 3, 5],
labels: {
enabled: false
}
}, {
offset: 0,
linkedTo: 0,
tickPositions: [1, 4],
tickLength: 0,
labels: {
formatter: function () {
return labels[this.value];
}
}
}],
yAxis: {
min: 0,
max: 100
},
series: [{
name: 'series 1',
id: 's1',
colorIndex: 0,
data: [
[0, 0],
[0, 25],
[2, 20],
[2, 0]
]
}, {
name: 'series 1',
linkedTo: 's1',
colorIndex: 0,
data: [
[3, 0],
[3, 68],
[5, 63],
[5, 0]
]
}, {
colorIndex: 1,
id: 's2',
name: 'series 2',
data: [
[0, 25],
[0, 50],
[2, 45],
[2, 20]
]
}, {
name: 'series 2',
colorIndex: 1,
linkedTo: 's2',
data: [
[3, 68],
[3, 78],
[5, 73],
[5, 63]
]
}]
});
});
example: http://jsfiddle.net/stfhhn7y/
I would like to have a chart that represent data like this.
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.
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/
I use different colors for the bars in a Highcharts bar chart to denote two different groups of data like so (abbreviated):
$(function () {
$('#moduleDistribution').highcharts({
colors: ['red', 'red', '#1aadce', '#1aadce'],
chart: {
type: 'column'
},
xAxis: {
type: 'category'
},
plotOptions: {
series: {
colorByPoint: true
}
},
series: [{
showInLegend: false,
data: [
['node', 291],
['wifi', 289],
['timer', 289],
['net', 285]
]
}]
});
});
Demo: http://jsfiddle.net/7Luob5k8/4/
How can I create a legend (or similar) to explain the meaning of the colors? I'd like to explain to the viewer why some bars are red and some are not.
You can achieve this by using 2 series. Make them visible in the legend. Assign the color you want to it. mention Category names in xAxis and use a [x,y] co-ordinates system to send the data to the chart.
your categories
xAxis: {
categories: ['node', 'wifi', 'timer', 'net', 'gpio', 'file', 'uart', 'i2c', 'mqtt', 'adc', '1wire', 'bit', 'pwm', 'spi', 'u8g', 'cjson', 'ws2812', 'coap']
},
your series will look like this.
series: [{
data: [
[0, 291],
[1, 289],
[2, 289],
[3, 285],
[4, 284],
[5, 283],
[6, 263]
],
color: '#FF0000'
}, {
data: [
[7, 135],
[8, 119],
[9, 100],
[10, 96],
[11, 89],
[12, 80],
[13, 65],
[14, 60],
[15, 57],
[16, 46],
[17, 20]
],
color: '#1aadce'
}]
Here I've updated your fiddle