Develop Reference

Total value contains part of current value in highcharts

how can I do something with my columns value in highcharts? I have two values: "total" and "current". Total is always bigger becouse it contains current value. I write some example in js Fiddle:
link to example
series: [{
name: 'John Total',
data: [8, 9, 4, 7, 6],
stack: 'male'
}, {
name: 'John Current',
data: [3, 4, 3, 2, 5],
stack: 'male'
}, {
name: 'Jane Total',
data: [8, 5, 9, 8, 9],
stack: 'female'
}, {
name: 'Jane Current',
data: [1, 0, 4, 4, 3],
stack: 'female'
}]
I want to dislplay chart where total value is a maxiumm value of column and current column as a part of total column. In my example in first column of "John Total" should be 8 and have part of "John Current" which is 3. In my code example values is summed and finish value is 11. How can I fix that and got columns like in picture?
This series have maxium values:
series: [{
name: 'John Total',
data: [8, 9, 4, 7, 6],
},
And this series have results as a part of total. How many points John get from Total:
{
name: 'John Current',
data: [3, 4, 3, 2, 5],
stack: 'male'
},
So first column should have max value 8 and include 3 like in picture. Blue column on picture should have 8 becouse we have this in first array and black column should to have 3. How can I acheive this when I have got Maxium value and part of this value In one column?

As per your comment
How can I acheive this when I have got Maxium value and part of this value In one column?
In this case you cannot use
stacking: 'normal'
You have to use overlapping column charts
plotOptions: {
column: {
grouping: false,
groupPadding: 0.4 //added padding to give some spacing between column
},
},
And series with
series:[{y: 8,x: 0.20 }, {y: 5,x: 1.20}, { y: 9,x: 2.20}, {y: 8,x: 3.20 }, {y: 9,x: 4.20}, ]},...];
here x value represents the position of the column(if you don't define x in series, column will overlap each other)
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},
plotOptions: {
column: {
grouping: false,
groupPadding: 0.4
},
},
series: [{
name: 'Jane Total',
data: [{
y: 8,
x: 0.20
}, {
y: 5,
x: 1.20
}, {
y: 9,
x: 2.20
}, {
y: 8,
x: 3.20
}, {
y: 9,
x: 4.20
}, ]
}, {
name: 'Jane Current',
data: [{
y: 1,
x: 0.20
}, {
y: 0,
x: 1.20
}, {
y: 4,
x: 2.20
}, {
y: 4,
x: 3.20
}, {
y: 3,
x: 4.20
}, ]
}, {
name: 'John Total',
data: [8, 9, 4, 7, 6],
}, {
name: 'John Current',
data: [3, 4, 3, 2, 5],
}]
});
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Update as per OP
I want to deliver array with values under variable to data: and I want fill only Y axis without writing {y:array1}, {y:array2} for every value in array
For this you can use array map function to update array of object
$scoe=new Object();
$scoe.johnTotal = [7,8,9];
$scoe.janeTotal = [7,8,9];
$scoe.janeTotal=$scoe.janeTotal.map((el,i)=>{
el={y:el,x: i+0.20};
return el;
})
$scoe.johnCurrent = [2,5,6];
$scoe.janeCurrent = [3,4,6];
$scoe.janeCurrent=$scoe.janeCurrent.map((el,i)=>{
el={y:el,x: i+0.20};
return el;
})
Updated fiddle demo

How to go to the last active series after clicking drillUp button in highcharts?

I am not sure if this is a bug. Take the case of multi series drill down. After a legend item has been clicked, the series for the item is hidden and then we drill down. From here, if one drills up then it should go to last active state, i.e. multi series but with one series hidden. Instead of going to last active state, drill up goes to initial series data.
To reproduce, please goto this fiddle. Reproducible steps below the code.
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Highcharts multi-series drilldown'
},
subtitle: {
text: 'Click columns to drill down to single series. Click categories to drill down both.'
},
xAxis: {
type: 'category'
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: '2010',
data: [{
name: 'Republican',
y: 5,
drilldown: 'republican-2010'
}, {
name: 'Democrats',
y: 2,
drilldown: 'democrats-2010'
}, {
name: 'Other',
y: 4,
drilldown: 'other-2010'
}]
}, {
name: '2014',
data: [{
name: 'Republican',
y: 4,
drilldown: 'republican-2014'
}, {
name: 'Democrats',
y: 4,
drilldown: 'democrats-2014'
}, {
name: 'Other',
y: 4,
drilldown: 'other-2014'
}]
}],
drilldown: {
series: [{
id: 'republican-2010',
data: [
['East', 4],
['West', 2],
['North', 1],
['South', 4]
]
}, {
id: 'democrats-2010',
data: [
['East', 6],
['West', 2],
['North', 2],
['South', 4]
]
}, {
id: 'other-2010',
data: [
['East', 2],
['West', 7],
['North', 3],
['South', 2]
]
}, {
id: 'republican-2014',
data: [
['East', 2],
['West', 4],
['North', 1],
['South', 7]
]
}, {
id: 'democrats-2014',
data: [
['East', 4],
['West', 2],
['North', 5],
['South', 3]
]
}, {
id: 'other-2014',
data: [
['East', 7],
['West', 8],
['North', 2],
['South', 2]
]
}]
}
});
});
Click on any legend item, say '2010'. It will hide the corresponding columns.
Drill down any xAxis category, say 'Republicans'. This will only show the chart for Republicans across for directions.
Click drillUpButton (Back to 2014). This will show the chart for both 2010 and 2014. Instead it should have shown only for 2014.

nested series in highcharts drilldown

I am trying to use highcharts.js' drilldown with nested series. To keep things simple, I am using the official demo provided by highcharts.js:
http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/drilldown/multi-series/
drilldown: {
series: [{
id: 'republican-2010',
data: [
['East', 4],
['West', 2],
['North', 1],
['South', 4]
]
I would like to modify this example to also compare election years in the drilldown. The official demo's drilldown only shows a single election year for each region (north, south, etc). I would like to have the same blue/black columns (election year) in the drilldown graphs.
My attempts of nesting series in drilldowns are found here:
http://jsfiddle.net/draptik/bnvbsLd1/1/
drilldown: {
series: [{
id: 'republican-2010',
data: [{
series: [{
name: 'republican',
data: [{
name: 'north',
y: 3
}, {
name: 'west',
y: 3
}, {
name: 'east',
y: 3
}, {
name: 'south',
y: 3
}]
}, {
name: 'democrat',
Basically I just tried to nest a series in the drilldown's series data array, but this does not work.
Thankful for any pointer.

I think you should remove series property inside drilldown's data.
It'll be like this:
drilldown: {
series: [
{
id: 'republican-2010',
data: [{
name: 'republican',
y: 10,
drilldown: 'repbulican'
}]
}, // end of first series
{
id: 'repbulican',
data: [
['north' , 3],
['west' , 3],
['east', 3],
['south', 3]
]
}
] // end of series array
} // end of drilldown object
I already made an example for 'republican-2010' series only to show you how to do it.
Just do the same for other series.

Can HighChart support multiple graph types in a single drilldown?

From the following fiddle we can implement drilldown in highCharts :http://jsfiddle.net/gh/get/jquery/1.7.2/highslide-software/highcharts.com/tree/master/samples/highcharts/drilldown/basic/
Code:
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}],
drilldown: {
series: [{
id: 'animals',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
});
});
But my requirement is when you perform a drill down, I need to show multiple charts showing same data, for example a spline as well as bar chart. I tried a lots of trial and error, but no luck. Is it possible to implement this kind of feature with HighCharts or any other jQuery plugins? Kindly share your thoughts.
My existing graph with HighCharts :
It's combination of bar and spline.
When I click a bar, this should result in the following drilldown view:
Please help to achieve this.

Drilldown more than 1 subreport using Highcharts

I am using the latest version of Highcharts which is Highcharts 3.0.9 And I need to do multiple level of drilldown. The example provided only showing 1 level of drilldown only.
The sample code:
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
}
}
},
series: [{
name: 'Things',
colorByPoint: true,
data: [{
name: 'Animals',
y: 5,
drilldown: 'animals'
}, {
name: 'Fruits',
y: 2,
drilldown: 'fruits'
}, {
name: 'Cars',
y: 4,
drilldown: 'cars'
}]
}],
drilldown: {
series: [{
id: 'animals',
data: [
['Cats', 4],
['Dogs', 2],
['Cows', 1],
['Sheep', 2],
['Pigs', 1]
]
}, {
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
})
The link of the code : jsfiddle
So how to do multiple level of drilldown using the new version?

You have done it well Hayu Rahiza.
All you need to do is repeat the same you did in series section in the drill down section also
{
name: 'Toyota',
y: 4,
drilldown: 'Toyota'
},{
id: 'Toyota',
data: [
['Corolla', 4],
['Fortuner', 2],
['Etios', 2],
['Liva', 10]
]
}
I've update your fiddle at http://jsfiddle.net/dP35L/1/
I Hope this will help you