Related
Why can't I use strings in data on a highchart doughnut chart? You can use it on Bar charts but not doughnut for some reason?
Example of strings in data for bar chart (no errors):
Fiddle: http://jsfiddle.net/8rsywuc7/
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: ['','','','','']
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
Example of strings in data for doughnut chart (see error):
Fiddle: http://jsfiddle.net/troqjcnz/
"data": [38, 44, 14, 20, 25, 75],
"name": "Male",
},
{
"data": ['','','','','',''],
"name": "Female",
},
{
"data": [38, 44, 14, 20, 25, 75],
"name": "No reply",
}
Notice that there is a big difference between those two series configs. In the first one, the data is an array of empty string, meanwhile in the second data becomes an array of objects where y is set to empty string. If you will do the same in the column, the same error will occur - see: http://jsfiddle.net/8rsywuc7/
series: [{
name: 'John',
data: [5, 3, 4, 7, 2]
}, {
name: 'Jane',
data: [{
name: 'test',
y: ''
}]
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5]
}]
What can I suggest is:
use null rather than empty strings (I am aware that it is not the same, but the output should be similar), demo: http://jsfiddle.net/BlackLabel/jokbgryz/
change the logic responsible for creating data for something like is done here: http://jsfiddle.net/BlackLabel/9bov21gf/
I have a dataset like so where each layer is a chart in itself (example dataset below), below chart only plots the first layer Week 1.
I would like to add a timeline axis to it (date picker and timeSelector(instead of rangeSelector))which lets me show the different layers upon interaction
var dataSequence = [{
name: 'Week 1',
data: [1, 2, 2, 1, 1, 2, 2]
}, {
name: 'Week 2',
data: [6, 12, 2, 3, 3, 2, 2]
}, {
name: 'Week 3',
data: [4, 5, 6, 5, 5, 4, 9]
}, {
name: 'Week 4',
data: [5, 5, 6, 6, 5, 6, 6]
}, {
name: 'Week 5',
data: [6, 7, 7, 6, 6, 6, 7]
}, {
name: 'Week 6',
data: [8, 9, 9, 8, 8, 8, 9]
}, {
name: 'Week 7',
data: [9, 10, 4, 10, 9, 9, 9]
}, {
name: 'Week 8',
data: [1, 10, 10, 10, 10, 11, 11]
}, {
name: 'Week 9',
data: [11, 11, 12, 12, 12, 11, 11]
}];
$('#container').highcharts({
chart: {
type: 'areaspline'
},
title: {
text: 'Highcharts with time control - weeks'
},
xAxis: {
categories: [
'Monday',
'Tuesday',
'Wednesday',
'Thursday',
'Friday',
'Saturday',
'Sunday'
]
},
yAxis: {
title: {
text: 'Fruit units'
}
},
plotOptions: {
areaspline: {
fillOpacity: 0.5
}
},
series: [{
name: 'By week',
data: dataSequence[0].data.slice()
}, {
name: 'Average week',
data: [6, 8, 6, 7, 7, 7, 6]
}]
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
<div id="container"></div>
I am aware of this motion plugin https://www.highcharts.com/blog/tutorials/176-charts-in-motion/ but I am looking for an inbuilt highchart solution.
I can imagine something can be cooked up with drilldown functionality? basically a chart which shows drill down series all the time and a timeline to interact.
What do you suggest? Is anyone aware of a solution here?
Thanks in advance.
You can add some custom buttons and on click use setData method to change the current data set:
document.getElementById('week3').addEventListener('click', function() {
chart.series[0].setData(dataSequence[2].data);
});
document.getElementById('week7').addEventListener('click', function() {
chart.series[0].setData(dataSequence[6].data);
});
Live demo: http://jsfiddle.net/BlackLabel/st12m4hn/
API Reference: https://api.highcharts.com/class-reference/Highcharts.Series#setData
Screenshot of issue
I have multiple series shown on a datetime axis.
The problem is that the same series can have multiple entries for the same date.
Is there a way to separate these stacks based on another ID variable that I'm passing to highcharts?
This example is close to what I need: https://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/demo/column-stacked-and-grouped/
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male'
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
stack: 'male'
}, {
name: 'Jane',
data: [2, 5, 6, 2, 1],
stack: 'female'
}, {
name: 'Janet',
data: [3, 0, 4, 4, 3],
stack: 'female'
}]
But instead of defining stack by series, I need it defined by individual data points.
But instead of defining stack by series, I need it defined by
individual data points.
Unfortunately, it will require a lot of custom code. However, there is a better solution with the use of linkedTo and id series properties. When you have the same series which have multiple entries for the same date split them as a separate series with different stack. Set for example id = '1' in the first series and linkedTo = '1' in the second one. When two series are linked, only the first one appears in the legend.
Example code:
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male',
id: 'john'
}, {
name: 'John',
data: [2, 5, 6, 2, 1],
stack: 'female',
linkedTo: 'john'
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
stack: 'male'
}, {
name: 'Janet',
data: [3, 0, 4, 4, 3],
stack: 'female'
}]
Demo:
https://jsfiddle.net/BlackLabel/ure08d4k/6/
According to http://api.highcharts.com/highcharts/series.line, by linking two series, "Toggling the visibility of this also toggles the linked series".
When linking two series, I expect them to both be activated when hovering a legend item. This does not work with this setup
Highcharts.chart('container', {
title: { text: 'Linked Series'},
series: [{
id: 2,
data: [3, 1, 3, 2]
}, {
id: 0,
data: [2, 3, 2, 1]
}, {
id: 1,
linkedTo: 2,
data: [1, 2, 1, 3]
}, ]
});
How can I make sure, that all linked series are hovered at the same time.
https://fiddle.jshell.net/papa_bravo/oxbm6mke/
It seems to be a small bug in Highcharts; if ids are numbers then turning off the visibility by clicking the legend does not work properly. If you convert ids to stings it works OK
Highcharts.chart('container', {
title: { text: 'Linked Series'},
series: [{
id: '2',
data: [3, 1, 3, 2]
}, {
id: '0',
data: [2, 3, 2, 1]
}, {
id: '1',
linkedTo: '2',
data: [1, 2, 1, 3]
}, ]
});
https://fiddle.jshell.net/oxbm6mke/6/
EDIT: Actually it's not a bug. According to the documentation linkedTo must be a string.
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