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
Related
I have a second data series that I would like to add to the tooltip on this Highmaps chart. The variable with the second set of data (data2) is in place, but I haven't added the series yet as each time I do it breaks the code. I would like the tooltip to show the data from the first series and then beneath that, show the data from the second series. So it would read something like:
Value
State name: 4.50
Ranking: 3
I think the second series should be added like this:
{name:'Ranking: ',
data: data2
}
but, like I said, when I add that it breaks the code. Beyond that, I can't figure out how to add that additional data to the tooltip, once I get there.
Here's the javascript code:
// Prepare demo data
// Data is joined to map using value of 'hc-key' property by default.
// See API docs for 'joinBy' for more info on linking data and map.
var data2 = [
['mx-3622', 0],
['mx-bc', 1],
['mx-bs', 2],
['mx-so', 3],
['mx-cl', 4],
['mx-na', 5],
['mx-cm', 6],
['mx-qr', 7],
['mx-mx', 8],
['mx-mo', 9],
['mx-df', 10],
['mx-qt', 11],
['mx-tb', 12],
['mx-cs', 13],
['mx-nl', 14],
['mx-si', 15],
['mx-ch', 16],
['mx-ve', 17],
['mx-za', 18],
['mx-ag', 19],
['mx-ja', 20],
['mx-mi', 21],
['mx-oa', 22],
['mx-pu', 23],
['mx-gr', 24],
['mx-tl', 25],
['mx-tm', 26],
['mx-co', 27],
['mx-yu', 28],
['mx-dg', 29],
['mx-gj', 30],
['mx-sl', 31],
['mx-hg', 32]
];
var data = [
['mx-3622', 0.00],
['mx-bc', 5.59],
['mx-bs', 4.05],
['mx-so', 4.77],
['mx-cl', 6.91],
['mx-na', 8.88],
['mx-cm', 8.01],
['mx-qr', 4.87],
['mx-mx', 5.01],
['mx-mo', 0.089],
['mx-df', 8.12],
['mx-qt', 7.32],
['mx-tb', 3.17],
['mx-cs', 1.15],
['mx-nl', 6.88],
['mx-si', 6.64],
['mx-ch', 2.19],
['mx-ve', 0.66],
['mx-za', 8.03],
['mx-ag', 10],
['mx-ja', 3.35],
['mx-mi', 3.91],
['mx-oa', 0.8],
['mx-pu', 1.53],
['mx-gr', 0.0],
['mx-tl', 2.95],
['mx-tm', 5.47],
['mx-co', 9.46],
['mx-yu', 8.62],
['mx-dg', 4.47],
['mx-gj', 8.33],
['mx-sl', 4.35],
['mx-hg', 4.75]
];
// Create the chart
Highcharts.mapChart('container', {
chart: {
map: 'countries/mx/mx-all'
},
title: {
text: 'Highmaps basic demo'
},
subtitle: {
text: 'Source map: Mexico'
},
mapNavigation: {
enabled: true,
buttonOptions: {
verticalAlign: 'bottom'
}
},
colorAxis: {
min: 0
},
series: [{
data: data,
name: 'Value',
states: {
hover: {
color: '#BADA55'
}
},
}]
});```
Here's a jsfiddle: https://jsfiddle.net/sstoker/81w2revu/15/
Any help would be very much appreciated!!!
You can add the second series in this way:
series: [{
data: data,
name: 'Value',
...
}, {
name: 'Ranking: ',
data: data2
}]
Live demo: https://jsfiddle.net/BlackLabel/amtycfbL/
But I think that a better solution would be to add the additional data field to the first series data and display it in a tooltip by using pointFormat option:
data.forEach(function(el, i) {
el.push(data2[i][1])
});
// Create the chart
Highcharts.mapChart('container', {
...
tooltip: {
pointFormat: 'Value {point.name} Ranking: {point.rank}'
},
series: [{
keys: ['hc-key', 'value', 'rank'],
data: data,
...
}]
});
Live demo: https://jsfiddle.net/BlackLabel/j809rcva/
API Reference: https://api.highcharts.com/highmaps/series.map.keys
How would I draw a spline on columns in each category in Highcharts?
Let's say, I have 5 categories on the x-axis, and each category has 4 columns. Now I want a spline that passes through all the 4 columns in the category (each category should have a separate spline on its corresponding columns)
Is it possible if categories and columns change dynamically?
For column series you can disable grouping and set pointPlacement to a number value. Than, you can set x data values for spline series to fit them to the columns:
Highcharts.chart('container', {
chart: {
type: 'column'
},
xAxis: {
type: 'category',
startOnTick: true,
min: 0
},
plotOptions: {
series: {
grouping: false,
pointWidth: 20
}
},
series: [{
data: [1, 1, 1, 1, 1],
pointPlacement: -0.3
}, {
data: [2, 2, 2, 2, 2],
pointPlacement: -0.1
}, {
data: [3, 3, 3, 3, 3],
pointPlacement: 0.1
}, {
data: [4, 4, 4, 4, 4],
pointPlacement: 0.3
}, {
type: 'spline',
pointRange: 11,
data: [
[-0.3, 1],
[-0.1, 2],
[0.1, 3],
[0.3, 4]
]
}, {
type: 'spline',
pointRange: 11,
data: [
[0.7, 1],
[0.9, 2],
[1.1, 3],
[1.3, 4]
]
}]
});
Live demo: http://jsfiddle.net/BlackLabel/bdsfty2o/
API Reference:
https://api.highcharts.com/highcharts/series.column.grouping
https://api.highcharts.com/highcharts/series.column.pointWidth
https://api.highcharts.com/highcharts/series.column.pointPlacement
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
I have a code to generate multiple charts for a single series.
code :
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
series: [{
data: [[6, 540], [7, 540], [7, 1620], [8, 1620]]
},{
data: [[6, 340], [7, 340], [7, 620], [8, 620]]
}]
});
i need to provide different caption for the series'.. How is it possible?
Simply add a name to your definition of series ... as shown in the documentation
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
series: [{
name: 'Series 1',
data: [[6, 540], [7, 540], [7, 1620], [8, 1620]]
},{
name: 'Series 2',
data: [[6, 340], [7, 340], [7, 620], [8, 620]]
}]
});