Related
I'm trying to implement a drill down on a bar chart.
My data series are splitted on 6 categories on the x axis and I have three different series (Social, Cognitive and Language).
I would like to be able to drill down in my series. For example, 'social' is made of 'Family' and 'Personnal'.
My problem is that highchart only wants to drill down into one data serie. In my case I would like the drill down to display serveral data series.
In the fiddle below, I would like the drill down from 'Social' to display the series 'Family' and 'Personnal'. But highchart only display the 'Personnal' serie.
Is there a standard way to do this with Highcharts?
series: [
{
name: 'Social',
type: 'bar',
data: [
{ y: 10, drilldown: 'A' },
{ y: 5, drilldown: 'A' },
{ y: 3, drilldown: 'A' },
{ y: 1, drilldown: 'A' },
{ y: 0, drilldown: 'A' },
{ y: 0, drilldown: 'A' },
],
color: '#EEAA3C',
},
{
name: 'Cognitive',
type: 'bar',
data: [6, 3, 1, 0, 1, 1],
color: '#86BD4A',
},
{
name: 'Language',
type: 'bar',
data: [4, 2, 0, 2, 0, 0],
color: '#E26E3E',
},
],
drilldown: {
series: [
{
name: 'Family',
id: 'A',
type: 'bar',
data: [1, 1, 1, 0, 0, 0],
color: '#F2B553',
},
{
name: 'Personal',
id: 'A',
type: 'bar',
data: [9, 4, 2, 1, 0, 0],
color: '#F8CC87',
},
],
},
https://jsfiddle.net/pacambi/3k4eng7w/
Thanks !
I am working on creating a nested donut chart with highcharts.
I saw the below link :
can we make nested donut charts in highcharts?
is there a way we can add some space/margins around each donut.
Following the linked example, you could do something like that:
series: [{
type: 'pie',
name: 'Election',
size: '60%', // Change this parameter
innerSize: '50%', // Change this parameter
data: [
{name: "A", y: 20},
{name: "B", y: 10},
{name: "C", y: 15}
]
}, {
type: 'pie',
name: 'Proprietary or Undetectable',
innerSize: '80%', // Change this parameter
data: [
{name: "A", y: 10},
{name: "B", y: 15},
{name: "C", y: 20}
]
}]
Fiddle
I am having difficulty in drawing the bar chart as follows using Highcharts:
For drawing above chart, I guess that it is necessary to make one series has both positive and negative values for one category. But, I do not know how to make a series object in a Highchart option.
My code is here with JSFiddle.
I expected that below series worked, but it did not.
series: [{
name: 'Series 1',
data: [[-19, 10], [-31, 20]]
}, {
name: 'Series 2',
data: [[-10, 33], [-20, 56]]
}, {
name: 'Series 3',
data: [[-23, 10], [-30, 13]]
}
Also, I saw a Highchart's demo: Bar with negative stack. However, this demo has a different series structure with what I tried; it has only two series: "male or negative" and "female or positive". It seems difficult to have more than two series in this demo.
I am not 100% sure of exactly what values you want to go where, but the concept of how I would solve this, is as follows:
series: [{
name: 'Series 1',
data: [{x: 0, y: -19}, {x: 0, y: 10},
{x: 1, y: -31}, {x: 1, y: 20}]
}, {
name: 'Series 2',
data: [{x: 0, y: 33}, {x: 0, y: -10},
{x: 1, y: 56}, {x: 1, y: -20},]
}, {
name: 'Series 3',
data: [{x: 0, y: 10}, {x: 0, y: -23},
{x: 1, y: 13}, {x: 1, y: -30}]
}]
Where we still have the same 3 series, but we explicitly state which category the values should belong to, i.e. x: 0 is category 1, and x: 1 is category 2.
Working JSfiddle example: https://jsfiddle.net/ewolden/kdszxjn3/6/
I have two series only one difference in both series that 2018-07-09 is not exist in first series thats why graph show that point at the end of the graph that is wrong.
My Series are:
series: [{name: "Grouped rep_oos",
data:
[{name: "2018-07-01", y: 1.1},
{name: "2018-07-02", y: 2.02},
{name: "2018-07-03", y: 3.85},
{name: "2018-07-04", y: 0.0},
{name: "2018-07-05", y: 2.6},
{name: "2018-07-06", y: 1.06},
{name: "2018-07-07", y: 2.86},
{name: "2018-07-08", y: 0.98},
{name: "2018-07-10", y: 4.94},
{name: "2018-07-11", y: 4.21},
{name: "2018-07-12", y: 6.32},
{name: "2018-07-13", y: 2.73},
{name: "2018-07-14", y: 1.08},
{name: "2018-07-15", y: 1.08},
{name: "2018-07-16", y: 0.0},
{name: "2018-07-17", y: 0.78},
{name: "2018-07-18", y: 0.0},
{name: "2018-07-19", y: 3.95},
{name: "2018-07-20", y: 2.9},
{name: "2018-07-21", y: 3.64}],
yAxis: 1,
type: "line"},
{name: "Grouped change_in_conversion_prior_period",
data:
[{name: "2018-07-01", y: 37.44},
{name: "2018-07-02", y: -56.74},
{name: "2018-07-03", y: 30.89},
{name: "2018-07-04", y: 12.55},
{name: "2018-07-05", y: 52.73},
{name: "2018-07-06", y: -41.49},
{name: "2018-07-07", y: 47.71},
{name: "2018-07-08", y: 18.54},
{name: "2018-07-09", y: 53.38},
{name: "2018-07-10", y: -48.15},
{name: "2018-07-11", y: -57.37},
{name: "2018-07-12", y: 116.67},
{name: "2018-07-13", y: -53.5},
{name: "2018-07-14", y: 102.76},
{name: "2018-07-15", y: 91.67},
{name: "2018-07-16", y: -30.68},
{name: "2018-07-17", y: -27.08},
{name: "2018-07-18", y: 100.0},
{name: "2018-07-19", y: -26.32},
{name: "2018-07-20", y: 2.28},
{name: "2018-07-21", y: 15.8}],
yAxis: 1,
type: "line"}]
You have 2 solutions :
Changing xAxis.type and the date format API Doc
Highcharts.chart('container', {
xAxis: {
type: 'datetime'
},
...
series: [{
name: "Grouped rep_oos",
data: [
[1530403200000, 1.1],
[1530489600000, 2.02],
...
Fiddle
Add null data for empty and connectNulls API Doc
data:[
...
{name: "2018-07-09", y:null},
...],
connectNulls: true,
Fiddle
The names of the categories are created from the first series and then they are supplemented from the others, so in your case you can simply change the order of the series.
series: [{
name: "Grouped change_in_conversion_prior_period",
data: [{
name: "2018-07-01",
y: 37.44
},
{
name: "2018-07-02",
y: -56.74
},
...
],
type: "line"
}, {
name: "Grouped rep_oos",
data: [{
name: "2018-07-01",
y: 1.1
},
{
name: "2018-07-02",
y: 2.02
},
...
],
type: "line"
}]
Live demo: http://jsfiddle.net/BlackLabel/2d4Lmraj/
The problem occurs, because you're trying to pass the date as category name (name: [string_value]).
The way out of that is (as #Core972 said before) set your xAxis.type to datetime, but also process your data, because it should be passed as the timestamp value. You can achieve it by writing simple processing function, please take a look below:
function processData(data) {
var processed = []
data.forEach(function(series) {
processed.push({
name: series.name,
data: series.data.map(data => {
var myDate = data.name
myDate = myDate.split("-").map(elem => { return parseInt(elem) });
return [Date.UTC(myDate[0], myDate[1], myDate[2]), data.y]
}),
type: series.type
})
})
return processed
}
Function above takes one argument, which is your series (with current structure ofc.), and returns the array with processed series objects.
Live example: https://jsfiddle.net/h2rydgkc/
I have a stacked column chart that drills down to a pie chart. The drilldown works fine if the data point is clicked. However, the xAxis labels are also clickable which displays the all pie charts for those points in the series. Unfortunately they overlap.
Is there some way to disable drilldown on the xAxis labels?
Here is a JSFiddle: http://jsfiddle.net/uEQL2/
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
plotOptions: {
column : {
stacking : 'normal'
}
},
series: [{
name: 'On Time',
data: [{
name: 'Location 1',
y: 5,
drilldown: 'l1-ot'
}, {
name: 'Location 2',
y: 2,
drilldown: 'l2-ot'
}, {
name: 'Location 3',
y: 4,
drilldown: 'l3-ot'
}]
},{
name: 'Late',
data: [{
name: 'Location 1',
y: 5,
drilldown: 'l1-l'
}, {
name: 'Location 2',
y: 8,
drilldown: 'l2-l'
}, {
name: 'Location 3',
y: 6,
drilldown: 'l3-l'
}]
}],
drilldown: {
series: [{
type: 'pie',
id: 'l1-ot',
data: [
{name: 'Widget A', y: 2},
{name: 'Widget B', y: 3},
]
}, {
type: 'pie',
id: 'l1-l',
data: [
{name: 'Widget A', y: 1},
{name: 'Widget B', y: 4},
]
}, {
type: 'pie',
id: 'l2-ot',
data: [
{name: 'Widget A', y: 1},
{name: 'Widget B', y: 1},
]
}, {
type: 'pie',
id: 'l2-l',
data: [
{name: 'Widget A', y: 2},
{name: 'Widget B', y: 6},
]
},{
type: 'pie',
id: 'l3-ot',
data: [
{name: 'Widget A', y: 1},
{name: 'Widget B', y: 3},
]
}, {
type: 'pie',
id: 'l3-l',
data: [
{name: 'Widget A', y: 3},
{name: 'Widget B', y: 3},
]
}
]
}
})
});
This is how you can make x-axis labels unlickable on drilldown. Take a look at this demo: JSFIDDLE
code:
$(function () {
(function (H) {
//For X-axis labels
H.wrap(H.Point.prototype, 'init', function (proceed, series, options, x) {
var point = proceed.call(this, series, options, x),
chart = series.chart,
tick = series.xAxis && series.xAxis.ticks[x],
tickLabel = tick && tick.label;
//console.log("series");
//console.log(series);
if (point.drilldown) {
if (tickLabel) {
if (!tickLabel._basicStyle) {
tickLabel._basicStyle = tickLabel.element.getAttribute('style');
}
tickLabel.addClass('highcharts-drilldown-axis-label') .css({
'text-decoration': 'none',
'font-weight': 'normal',
'cursor': 'auto'
}).on('click', function () {
if (point.doDrilldown) {
return false;
}
});//remove this "on" block to make axis labels clickable
}
}
else if (tickLabel && tickLabel._basicStyle)
{
}
return point;
});
})(Highcharts);
// Create the chart
$('#container').highcharts({
.....
.......