I am trying to show column chart and line chart in combination in drill down using highcharts , but not getting success, but when applying this without drill down, it is easily showing both charts.
I am using this code:
$(function () {
var defaultTitle = "Total Distance By Site";
var drilldownTitle = "Ave. Journey Distance By Vehicle Type";
var ydrillupTitle = "km";
var ydrilldownTitle = "";
var xdrillupcat = ['Site A', 'Site B', 'Site C', 'Site D'];
var xdrilldowncat = ['Waste', 'Medium Truck', 'Mid-Sized', 'Car'];
var chart = new Highcharts.Chart({
chart: {
type: 'column',
renderTo: 'totdisbyloc',
events: {
drilldown: function(e) {
chart.setTitle({ text: drilldownTitle });
chart.xAxis[0].setCategories(xdrilldowncat);
chart.yAxis[0].axisTitle.attr({
text: ydrilldownTitle
});
},
drillup: function(e) {
chart.setTitle({ text: defaultTitle });
chart.xAxis[0].setCategories(xdrillupcat);
chart.yAxis[0].axisTitle.attr({
text: ydrillupTitle
});
}
}
},
title: {
text: defaultTitle
},
subtitle: {
text: ''
},
xAxis: {
categories: xdrillupcat
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: ydrillupTitle
}
},
plotOptions: {
column: {
stacking: 'normal',
showInLegend: true
}
},
series:[
{
name:'Car',
tooltip: {
headerFormat: '<span style="font-size:11px">{}</span>',
pointFormat: '<span>Car</span>: <b>{point.y}</b> of total: {point.stackTotal}<br/>'
},
data: [{
name: "Car",
title: "Ave. Journey Distance By Car",
y: 5,
drilldown: "Car"
}, {
name: "Mid-Sized",
title: "Ave. Journey Distance By Mid-Sized",
y: 4,
drilldown: "Mid-Sized"
}, {
name: "Medium Truck",
title: "Ave. Journey Distance By Medium Truck",
y: 3,
drilldown: "Medium Truck"
}, {
name: "Large Truck",
title: "Ave. Journey Distance By Large Truck",
y: 6,
drilldown: "Large Truck"
}]
},
{
name:'Mid-Sized',
tooltip: {
headerFormat: '<span style="font-size:11px">{}</span>',
pointFormat: '<span>Mid-Sized</span>: <b>{point.y}</b> of total: {point.stackTotal}<br/>'
},
data: [{
name: "Car",
title: "Ave. Journey Distance By Car",
y: 2,
drilldown: "Car"
}, {
name: "Mid-Sized",
title: "Ave. Journey Distance By Mid-Sized",
y: 2,
drilldown: "Mid-Sized"
}, {
name: "Medium Truck",
title: "Ave. Journey Distance By Medium Truck",
y: 3,
drilldown: "Medium Truck"
}, {
name: "Large Truck",
title: "Ave. Journey Distance By Large Truck",
y: 2,
drilldown: "Large Truck"
}]
},
{
name:'Medium Truck',
tooltip: {
headerFormat: '<span style="font-size:11px">{}</span>',
pointFormat: '<span>Medium Truck</span>: <b>{point.y}</b> of total: {point.stackTotal}<br/>'
},
data: [{
name: "Car",
y: 4,
drilldown: "Car"
}, {
name: "Mid-Sized",
y: 5,
drilldown: "Mid-Sized"
}, {
name: "Medium Truck",
y: 3,
drilldown: "Medium Truck"
}, {
name: "Large Truck",
y: 7,
drilldown: "Large Truck"
}]
},
{
name:'Large Truck',
tooltip: {
headerFormat: '<span style="font-size:11px">{}</span>',
pointFormat: '<span>Large Truck</span>: <b>{point.y}</b> of total: {point.stackTotal}<br/>'
},
data: [{
name: "Car",
y: 5,
drilldown: "Car"
}, {
name: "Mid-Sized",
y: 3,
drilldown: "Mid-Sized"
}, {
name: "Medium Truck",
y: 4,
drilldown: "Medium Truck"
}, {
name: "Large Truck",
y: 7,
drilldown: "Large Truck"
}]
}
],
drilldown: {
series: [
{
title: "Ave. Journey Distance by Car",
showInLegend: false,
name: "Car",
type: "column",
id: "Car",
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y}'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{}</span>',
pointFormat: '<span>{point.name}</span>: <b>{point.y}</b> of total<br/>'
},
data: [
["Large Truck", 24],
["Medium Truck", 17],
["Mid-Sized", 8],
["Car", 10]
]
},
{
title: "Ave. Journey Distance by Car",
showInLegend: false,
name: "Car",
type: "spline",
id: "Car",
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y}'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{}</span>',
pointFormat: '<span>{point.name}</span>: <b>{point.y}</b> of total<br/>'
},
data: [
["Large Truck", 22],
["Medium Truck", 15],
["Mid-Sized", 6],
["Car", 8]
]
},
{
title: "Ave. Journey Distance by Mid-Sized",
name: "Mid-Sized",
showInLegend: false,
type: "column",
id: "Mid-Sized",
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y}'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{}</span>',
pointFormat: '<span>{point.name}</span>: <b>{point.y}</b> of total<br/>'
},
data: [
["Large Truck", 24],
["Medium Truck", 17],
["Mid-Sized", 8],
["Car", 10]
]
},
{
title: "Ave. Journey Distance by Medium Truck",
name: "Medium Truck",
showInLegend: false,
type: "column",
id: "Medium Truck",
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y}'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{}</span>',
pointFormat: '<span>{point.name}</span>: <b>{point.y}</b> of total<br/>'
},
data: [
["Large Truck", 24],
["Medium Truck", 17],
["Mid-Sized", 8],
["Car", 10]
]
},
{
title: "Ave. Journey Distance by Large Truck",
name: "Large Truck",
showInLegend: false,
type: "column",
id: "Large Truck",
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}: {point.y}'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{}</span>',
pointFormat: '<span>{point.name}</span>: <b>{point.y}</b> of total<br/>'
},
data: [
["Large Truck", 24],
["Medium Truck", 17],
["Mid-Sized", 8],
["Car", 10],
]
}
]
}
// ... more options
});
});
Using dynamic drill down it is possible to use addSingleSeriesAsDrilldown function for each series and call chart.applyDrilldown(); at the end of drill down.
Example: http://jsfiddle.net/zn1o2xzL/
Related
import React, {
useState
} from "react";
import {
render
} from "react-dom";
import HighchartsReact from "highcharts-react-official";
import Highcharts from "highcharts";
import drilldown from "highcharts/modules/drilldown.js";
drilldown(Highcharts);
export const DrillDown = () => {
const [chartOptions, setChartOptions] = useState({
chart: {
type: "bar",
height: 650,
events: {
drilldown: function(e) {
console.log(e.seriesOptions)
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
Ingredients: {
name: "Ingredients",
color: " #ff0000",
data: [
["Nutrients", 22],
["Sweetners", 13],
["Organic/Natural", 2]
],
enableMouseTracking: false
},
Taste: {
name: "Taste",
color: " #ff0000",
data: [
["Baby's Choice", 37],
["Parent's Choice", 5]
],
enableMouseTracking: false
}
},
drilldowns1 = {
Ingredients: {
name: "Ingredients",
color: "#C8C6C6",
data: [
["Nutrients", 4],
["Sweetners", 2],
["Organic/Natural", 2]
],
enableMouseTracking: false
},
Taste: {
name: "Taste",
color: "#C8C6C6",
data: [
["Baby's Choice", 9],
["Parent's Choice", 4]
],
enableMouseTracking: false
}
},
drilldowns2 = {
Ingredients: {
name: "Ingredients",
color: "yellow",
data: [
["Nutrients", 0],
["Sweetners", 0],
["Organic/Natural", 0]
],
enableMouseTracking: false
},
Taste: {
name: "Taste",
color: "yellow",
data: [{
name: "Baby's Choice",
y: 0,
drilldown: true
},
{
name: "Parent's Choice",
y: 0,
drilldown: true
}
],
enableMouseTracking: false
}
},
drilldowns3 = {
Ingredients: {
name: "Ingredients",
color: "green",
data: [
["Nutrients", 25],
["Sweetners", 12],
["Organic/Natural", 18]
],
enableMouseTracking: false
},
Taste: {
name: "Taste",
color: "green",
data: [{
name: "Baby's Choice",
y: 42,
drilldown: true
},
{
name: "Parent's Choice",
y: 8,
drilldown: true
}
],
enableMouseTracking: false
}
},
series = drilldowns[e.point.name],
series1 = drilldowns1[e.point.name],
series2 = drilldowns2[e.point.name],
series3 = drilldowns3[e.point.name];
chart.addSingleSeriesAsDrilldown(e.point, series);
chart.addSingleSeriesAsDrilldown(e.point, series1);
chart.addSingleSeriesAsDrilldown(e.point, series2);
chart.addSingleSeriesAsDrilldown(e.point, series3);
chart.applyDrilldown();
}
}
}
},
title: {
text: "Category Drivers",
align: "left",
style: {
fontWeight: "200",
fontSize: "2vw"
}
},
xAxis: {
type: "category",
style: {
fontSize: "6vw"
}
},
yAxis: {
min: 0,
labels: {
formatter: function() {
return this.axis.defaultLabelFormatter.call(this) + "%";
},
},
tickInterval: 10,
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: "gray",
textOutline: 'none'
}
}
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold',
color: ( // theme
Highcharts.defaultOptions.title.style &&
Highcharts.defaultOptions.title.style.color
) || 'gray',
textOutline: 'none'
}
},
legend: {
enabled: true,
reversed: true
},
tooltip: {
enabled: false
},
plotOptions: {
bar: {
stacking: "normal"
},
series: {
borderWidth: 0,
dataLabels: {
enabled: false,
style: {
textShadow: false,
fontSize: "1vw"
}
},
states: {
hover: {
enabled: false
}
}
}
},
series: [{
name: "Negative",
color: " #ff0000",
data: [{
name: "Baby Tolerance",
y: 12,
drilldown: false
},
{
name: "Ingredients",
y: 16,
enableMouseTracking: true,
drilldown: true
},
{
name: "Health Benefits",
y: 6,
drilldown: false
},
{
name: "Taste",
y: 9,
enableMouseTracking: true,
drilldown: true
},
{
name: "Peer Recommendation",
y: 0.5,
drilldown: false
},
{
name: "Expert Advocacy",
y: 2,
drilldown: false
},
{
name: "Brand Value",
y: 3.5,
drilldown: false
},
{
name: "Convenience",
y: 2,
drilldown: false
},
{
name: "Price",
y: 3.5,
drilldown: false
}
],
enableMouseTracking: false
},
{
name: "Mixed",
color: "#bfbfbf",
data: [{
name: "Baby Tolerance",
y: 8,
drilldown: false
},
{
name: "Ingredients",
y: 4,
enableMouseTracking: true,
drilldown: true
},
{
name: "Health Benefits",
y: 3,
drilldown: false
},
{
name: "Taste",
y: 3,
enableMouseTracking: true,
drilldown: true
},
{
name: "Peer Recommendation",
y: 11,
drilldown: false
},
{
name: "Expert Advocacy",
y: 3,
drilldown: false
},
{
name: "Brand Value",
y: 0.5,
drilldown: false
},
{
name: "Convenience",
y: 3,
drilldown: false
},
{
name: "Price",
y: 0.5,
drilldown: false
}
],
enableMouseTracking: false
},
{
name: "Neutral",
color: "#ffc000",
data: [{
name: "Baby Tolerance",
y: 1,
drilldown: false
},
{
name: "Ingredients",
y: 0,
enableMouseTracking: true,
drilldown: true
},
{
name: "Health Benefits",
y: 0,
drilldown: false
},
{
name: "Taste",
y: 0,
enableMouseTracking: true,
drilldown: true
},
{
name: "Peer Recommendation",
y: 0,
drilldown: false
},
{
name: "Expert Advocacy",
y: 0,
drilldown: false
},
{
name: "Brand Value",
y: 0,
drilldown: false
},
{
name: "Convenience",
y: 0,
drilldown: false
},
{
name: "Price",
y: 0,
drilldown: false
}
],
enableMouseTracking: false
},
{
name: "Positive",
color: " #00b050",
data: [{
name: "Baby Tolerance",
y: 20,
drilldown: false
},
{
name: "Ingredients",
y: 15,
enableMouseTracking: true,
drilldown: 'sad'
},
{
name: "Health Benefits",
y: 11,
drilldown: false
},
{
name: "Taste",
y: 7,
enableMouseTracking: true,
drilldown: 'dsa'
},
{
name: "Peer Recommendation",
y: 5,
drilldown: false
},
{
name: "Expert Advocacy",
y: 11,
drilldown: false
},
{
name: "Brand Value",
y: 11,
drilldown: false
},
{
name: "Convenience",
y: 6,
drilldown: false
},
{
name: "Price",
y: 3,
drilldown: false
}
],
enableMouseTracking: false
}
],
drilldown: {
series: []
}
});
return ( <
div >
<
HighchartsReact highcharts = {
Highcharts
}
options = {
chartOptions
}
/> <
/div>
);
};
I am using recharts for designing the graphs in reactJS. I tried using drilldown function from highcharts to achieve another bar chart on clicking a particular bar of the original bar chart but I don't want the original graph to disappear. I want the original graph to decrease itsenter image description here size and show the new bar chart on its right side.
Here is the code I have written.
And I don't want the original graph to disappear.
Here are the attached images that will be helpful.
On clicking the verbatim button, I have to achieve this
enter image description here
Any kind of help will be appreciated.
Please can you tell me, is it possible to create relations between bubbles (lines from one bubble to other(s))?
Example:
SE->FL->NL
FL->DE
SE->BE->DE
DE->NL
Demo:
http://jsfiddle.net/2pLog7fw/
Sure, it can be done. One way of creating lines is to set lineWidth to be higher than zero for bubble series.
Live demo: http://jsfiddle.net/kkulig/2d7u7orx/
But this only creates one relation within a series (from the first point to the last one).
The solution here is to create a new scatter series for every relation:
{
data: [
[80.3, 86.1],
[80.8, 91.5],
[80.4, 102.5]
], // SE -> FI -> NL
type: 'scatter'
}, {
data: [
[86.5, 102.9],
[80.4, 102.5]
], // DE -> NL
type: 'scatter'
}
Configuration for all scatter series (plotOptions):
scatter: {
lineWidth: 1, // show the line
marker: {
radius: 0
}
}
Live demo: http://jsfiddle.net/kkulig/x8r6uj5q/
If you want an arrow that shows the direction of the relation you can use the code from this demo: http://jsfiddle.net/kkulig/mLsbzgnp/
This is right answer for my question:
"You can use scatter series to connect bubbles"
https://github.com/highcharts/highcharts/issues/7410
Example
Highcharts.chart('container', {
chart: {
type: 'bubble',
plotBorderWidth: 1,
zoomType: 'xy'
},
legend: {
enabled: false
},
title: {
text: 'Sugar and fat intake per country'
},
subtitle: {
text: 'Source: Euromonitor and OECD'
},
xAxis: {
gridLineWidth: 1,
title: {
text: 'Daily fat intake'
},
labels: {
format: '{value} gr'
},
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 65,
label: {
rotation: 0,
y: 15,
style: {
fontStyle: 'italic'
},
text: 'Safe fat intake 65g/day'
},
zIndex: 3
}]
},
yAxis: {
startOnTick: false,
endOnTick: false,
title: {
text: 'Daily sugar intake'
},
labels: {
format: '{value} gr'
},
maxPadding: 0.2,
plotLines: [{
color: 'black',
dashStyle: 'dot',
width: 2,
value: 50,
label: {
align: 'right',
style: {
fontStyle: 'italic'
},
text: 'Safe sugar intake 50g/day',
x: -10
},
zIndex: 3
}]
},
tooltip: {
useHTML: true,
headerFormat: '<table>',
pointFormat: '<tr><th colspan="2"><h3>{point.country}</h3></th></tr>' +
'<tr><th>Fat intake:</th><td>{point.x}g</td></tr>' +
'<tr><th>Sugar intake:</th><td>{point.y}g</td></tr>' +
'<tr><th>Obesity (adults):</th><td>{point.z}%</td></tr>',
footerFormat: '</table>',
followPointer: true
},
plotOptions: {
series: {
dataLabels: {
enabled: true,
format: '{point.name}'
}
}
},
series: [{
data: [{
x: 95,
y: 95,
z: 15.8,
name: 'BE',
country: 'Belgium'
}, {
x: 86.5,
y: 102.9,
z: 16,
name: 'DE',
country: 'Germany'
}, {
x: 80.8,
y: 91.5,
z: 15.8,
name: 'FI',
country: 'Finland'
}, {
x: 80.4,
y: 102.5,
z: 16,
name: 'NL',
country: 'Netherlands'
}, {
x: 80.3,
y: 86.1,
z: 18.8,
name: 'SE',
country: 'Sweden'
}]
}, {
type: 'scatter',
lineWidth: 1,
enableMouseTracking: false,
data: [
[95, 95], [86.5, 102.9],
[86.5, null],
[86.5, 102.9], [80.4, 102.5],
[86.5, null],
[86.5, 102.9], [80.3, 86.1]
]
}]
});
Live demo: http://jsfiddle.net/2pLog7fw/1/
I need to get Category name (Age>90 Days,Age<90 Days,Age<60 Days,Age<30 Days,Age<14 Days,Age<7 Days) when click on the related area of the graph.
For example when I click on the red area it want to alert "Age > 90 Days".
Graph Image is here!!!
Here is the my Hi chart code.
Highcharts.chart('ageContainer', {
chart: {
type: 'area',
},
colors: ['#39AA59', '#CEAE22', '#3E90BC','#B787E6','#ea780e','#F85858'].reverse(),
title: {
text: 'Age of queued patches during the last year'
},
xAxis: {
categories: lastMonthsName,
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: 'Patch count'
},
labels: {
formatter: function () {
return this.value;
}
}
},
tooltip: {
split: true,
valueSuffix: ' patches'
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
},
series: [{
name: 'Age > 90 Days',
data: getData[5]
},{
name: 'Age < 90 Days',
data: getData[4]
},{
name: 'Age < 60 Days',
data: getData[3]
},{
name: 'Age < 30 Days',
data: getData[2]
},{
name: 'Age < 14 Days',
data: getData[1]
},{
name: 'Age < 7 Days',
data: getData[0]
}]});
Check plotOptions.area.events.click for more info.Also see plotOptions.area.trackByArea. Your post does not contain live example. Using official example to give solutions.Hope this helps
Highcharts.chart('container', {
chart: {
type: 'area'
},
title: {
text: 'Historic and Estimated Worldwide Population Growth by Region'
},
subtitle: {
text: 'Source: Wikipedia.org'
},
xAxis: {
categories: ['1750', '1800', '1850', '1900', '1950', '1999', '2050'],
tickmarkPlacement: 'on',
title: {
enabled: false
}
},
yAxis: {
title: {
text: 'Billions'
},
labels: {
formatter: function() {
return this.value / 1000;
}
}
},
tooltip: {
split: true,
valueSuffix: ' millions'
},
plotOptions: {
area: {
stacking: 'normal',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
},
series: {
cursor: 'pointer',
trackByArea: true,
stickyTracking: false,
events: {
click: function(event) {
alert(this.name)
}
}
}
},
series: [{
name: 'Asia',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'Africa',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'Europe',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'America',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: 'Oceania',
data: [2, 2, 2, 6, 13, 30, 46]
}]
});
<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>
I am trying fetch bar value from a highchart drill down bar, but i can only fetch from last bar not the remaining onces.
Example is on this url https://jsfiddle.net/pravisivadasan/j8y21axp/
Can any one help me on this?
$(function () {
var chart;
var protocolNames = ['P1','P2','P3','P4','P5'];
$(document).ready(function() {
chart = new Highcharts.Chart({
chart: {
renderTo: 'container_inc',
type: 'column',
events: {
drilldown: function(e) {
parentSeriesIndex = e.point.series.index;
parentSeriesName = e.point.series.name;
chart.setTitle({ text:''});
chart.yAxis[0].setTitle({text:''});
//chart.xAxis[0].setCategories([], true);
chart.yAxis[1].update({
labels: {
enabled: false
},
title: {
text: null
}
});
},
drillup: function(e) {
chart.xAxis[0].setCategories(protocolNames, true);
chart.xAxis[0].update({labels:{rotation:0}});
chart.yAxis[1].update({
labels: {
enabled: true
},
title: {
text: ''
}
});
}
}
},
title: {
text: 'Incident - inflow vs Outflow'
},
credits: {
enabled: false
},
xAxis: [{
title: {
useHTML: true
},
type: "category",
//categories: protocolNames,
labels: {
useHTML: true,
rotation:0
}
}, {
title: {
useHTML: true
},
type: "category",
opposite: true,
//categories: protocolNames,
labels: {
useHTML: true,
rotation:0
}
}],
yAxis: [{
min: 0,
title: {
text: 'Percentage (%)'
}
}, {
title: {
text: ''
},
opposite: true
}],
tooltip: {
//shared: true
},
plotOptions: {
series: {
events:{
click: function (event) {
alert(event.point.name);
console.log(event);
}
}
}
},
series: [{
name: 'Opening Balance',
data: [{
name: 'P1',
y: 2 ,
drilldown: 'P1OBINC_VM'
}, {
name: 'P2',
y: 3,
drilldown: 'P2OBINC_VM'
}, {
name: 'P3',
y: 4,
drilldown: 'P3OBINC_VM'
},
{
name: 'P4',
y: 2,
drilldown: 'P4OBINC_VM'
},
{
name: 'P5',
y: 4,
drilldown: 'P5OBINC_VM'
}],
tooltip: {
valueSuffix: ' %'
}
},
{
name: 'Received',
color: '#000000',
data: [{
name: 'P1',
y: 4,
drilldown: 'P1RecvInc'
}, {
name: 'P2',
y: 5,
drilldown: 'P2RecvInc'
}, {
name: 'P3',
y:2 ,
drilldown: 'P3RecvInc'
},{
name: 'P4',
y:3,
drilldown: 'P4RecvInc'
},{
name: 'P5',
y: 4,
drilldown: 'P5RecvInc'
}],
tooltip: {
valueSuffix: ' %'
},
},{
name: 'Responsed',
color: '#90ED7D',
data: [{
name: 'P1',
y: 2 ,
drilldown: 'P1ResponsedInc'
}, {
name: 'P2',
y: 1,
drilldown: 'P2ResponsedInc'
}, {
name: 'P3',
y: 3,
drilldown: 'P3ResponsedInc'
},{
name: 'P4',
y: 4,
drilldown: 'P4ResponsedInc'
},{
name: 'P5',
y: 5,
drilldown: 'P5ResponsedInc'
}],
tooltip: {
valueSuffix: ' %'
},
},{
name: 'Resolved',
color: '#F7A35C',
data: [{
name: 'P1',
y: 5,
drilldown: 'P1ResolvedInc'
}, {
name: 'P2',
y: 5,
drilldown: 'P2ResolvedInc'
}, {
name: 'P3',
y: 6,
drilldown: 'P3ResolvedInc'
},{
name: 'P4',
y: 6,
drilldown: 'P4ResolvedInc'
},{
name: 'P5',
y: 5,
drilldown: 'P5ResolvedInc'
}],
tooltip: {
valueSuffix: ' %'
},
},{
name: 'Carried Forward',
color: '#0000ff',
data: [{
name: 'P1',
y: 6,
drilldown: 'P1CarriedInc'
}, {
name: 'P2',
y: 2,
drilldown: 'P2CarriedInc'
}, {
name: 'P3',
y: 3,
drilldown: 'P3CarriedInc'
},{
name: 'P4',
y: 4,
drilldown: 'P4CarriedInc'
},{
name: 'P5',
y: 5,
drilldown: 'P5CarriedInc'
}],
tooltip: {
valueSuffix: ' %'
},
},{
name: 'Queued',
color: '#F7A35C',
data: [{
name: 'P1',
y: 12,
drilldown: 'P1QueuedInc'
}, {
name: 'P2',
y:14,
drilldown: 'P2QueuedInc'
}, {
name: 'P3',
y: 15,
drilldown: 'P3QueuedInc'
},{
name: 'P4',
y: 21,
drilldown: 'P4QueuedInc'
},{
name: 'P5',
y: 46,
drilldown: 'P5QueuedInc'
}],
tooltip: {
valueSuffix: ' %'
},
},{
name: 'SLA Hold',
color: '#ffff00',
data: [{
name: 'P1',
y: 3,
drilldown: 'P1SLAInc'
}, {
name: 'P2',
y: 4,
drilldown: 'P2SLAInc'
}, {
name: 'P3',
y: 4,
drilldown: 'P3SLAInc'
},{
name: 'P4',
y: 5,
drilldown: 'P4SLAInc'
},{
name: 'P5',
y: 6,
drilldown: 'P5SLAInc'
}],
tooltip: {
valueSuffix: ' %'
}
}
],
drilldown: {
series: [{
name: 'OB',
id: 'P1OBINC_VM',
dataLabels: {
enabled: true
},
data: [
['OB P1 ',12]
],
Type: 'INC'
},
{
name: 'OB',
id: 'P2OBINC_VM',
dataLabels: {
enabled: true
},
data: [
['OB P2 ',4]
],
Type: 'INC'
},
{
name: 'OB',
id: 'P3OBINC_VM',
dataLabels: {
enabled: true
},
data: [
['OB P3 ',5],
],
Type: 'INC'
},
{
name: 'OB',
id: 'P4OBINC_VM',
dataLabels: {
enabled: true
},
data: [
['OB P4 ',6]
],
Type: 'INC'
},
{
name: 'OB',
id: 'P5OBINC_VM',
dataLabels: {
enabled: true
},
data: [
['OB P5 ',5]
],
Type: 'INC'
},{
name: 'Received',
id: 'P1RecvInc',
dataLabels: {
enabled: true
},
data: [
['Received P1 ',2]
],
Type: 'INC'
},{
name: 'Received',
id: 'P2RecvInc',
dataLabels: {
enabled: true
},
data: [
['Received P2 ',3]
],
Type: 'INC'
},{
name: 'Received',
id: 'P3RecvInc',
dataLabels: {
enabled: true
},
data: [
['Received P3 ',3]
],
Type: 'INC'
},{
name: 'Received',
id: 'P4RecvInc',
dataLabels: {
enabled: true
},
data: [
['Received P4 ',2]
],
Type: 'INC'
},{
name: 'Received',
id: 'P5RecvInc',
dataLabels: {
enabled: true
},
data: [
['Received P5 ',5]
],
Type: 'INC'
}, {
name: 'Responsed',
id: 'P1ResponsedInc',
dataLabels: {
enabled: true
},
data: [
['Responsed P1 ',6]
],
Type: 'INC'
},{
name: 'Responsed',
id: 'P2ResponsedInc',
dataLabels: {
enabled: true
},
data: [
['Responsed P2 ',7]
],
Type: 'INC'
},{
name: 'Responsed',
id: 'P3ResponsedInc',
dataLabels: {
enabled: true
},
data: [
['Responsed P3 ',3]
],
Type: 'INC'
},{
name: 'Responsed',
id: 'P4ResponsedInc',
dataLabels: {
enabled: true
},
data: [
['Responsed P4 ',6]
],
Type: 'INC'
},{
name: 'Responsed',
id: 'P5ResponsedInc',
dataLabels: {
enabled: true
},
data: [
['Responsed P5 ',7]
],
Type: 'INC'
},
{
name: 'Resolved',
id: 'P1ResolvedInc',
dataLabels: {
enabled: true
},
data: [
['Resolved P1 ',6]
],
Type: 'INC'
},
{
name: 'Resolved',
id: 'P2ResolvedInc',
dataLabels: {
enabled: true
},
data: [
['Resolved P2 ',7]
],
Type: 'INC'
},
{
name: 'Resolved',
id: 'P3ResolvedInc',
dataLabels: {
enabled: true
},
data: [
['Resolved P3 ',6]
],
Type: 'INC'
},
{
name: 'Resolved',
id: 'P4ResolvedInc',
dataLabels: {
enabled: true
},
data: [
['Resolved P4 ',4]
],
Type: 'INC'
},
{
name: 'Resolved',
id: 'P5ResolvedInc',
dataLabels: {
enabled: true
},
data: [
['Resolved P5 ',5]
],
Type: 'INC'
},
{
name: 'Carried Forward',
id: 'P1CarriedInc',
dataLabels: {
enabled: true
},
data: [
['Carried P1 ',7]
],
Type: 'INC'
},{
name: 'Carried Forward',
id: 'P2CarriedInc',
dataLabels: {
enabled: true
},
data: [
['Carried P2 ',8]
],
Type: 'INC'
},{
name: 'Carried Forward',
id: 'P3CarriedInc',
dataLabels: {
enabled: true
},
data: [
['Carried P3 ',8]
],
Type: 'INC'
},{
name: 'Carried Forward',
id: 'P4CarriedInc',
dataLabels: {
enabled: true
},
data: [
['Carried P4 ',4]
]
},{
name: 'Carried Forward',
id: 'P5CarriedInc',
dataLabels: {
enabled: true
},
data: [
['Carried P5 ',6]
]
}, {
name: 'Queued',
id: 'P1QueuedInc',
dataLabels: {
enabled: true
},
data: [
['Queued P1 ',2]
]
},{
name: 'Queued',
id: 'P2QueuedInc',
dataLabels: {
enabled: true
},
data: [
['Queued P2 ',3]
]
},{
name: 'Queued',
id: 'P3QueuedInc',
dataLabels: {
enabled: true
},
data: [
['Queued P3 ',4]
]
},{
name: 'Queued',
id: 'P4QueuedInc',
dataLabels: {
enabled: true
},
data: [
['Queued P4 ',5]
]
},{
name: 'Queued',
id: 'P5QueuedInc',
dataLabels: {
enabled: true
},
data: [
['Queued P5 ',6]
]
},{
name: 'SLA Hold',
id: 'P1SLAInc',
dataLabels: {
enabled: true
},
data: [
['SLA Hold P1 ',7]
]
},{
name: 'SLA Hold',
id: 'P2SLAInc',
dataLabels: {
enabled: true
},
data: [
['SLA Hold P2 ',5]
]
},{
name: 'SLA Hold',
id: 'P3SLAInc',
dataLabels: {
enabled: true
},
data: [
['SLA Hold P3 ',4]
]
},{
name: 'SLA Hold',
id: 'P4SLAInc',
dataLabels: {
enabled: true
},
data: [
['SLA Hold P4 ',3]
]
},{
name: 'SLA Hold',
id: 'P5SLAInc',
dataLabels: {
enabled: true
},
data: [
['SLA Hold P5 ',7]
]
}]
}
});
});
});
Hi I am currently developing a column high chart with a 3 level drill down however I am having bother naming the legend, I would like to have the legend displaying the data name however it is only displaying the series name at the moment.
Also I was having bother with the legend changing to the appropriately as it goes down through the different levels.
http://jsfiddle.net/amccormack10/tdy2x4dp/1/
$(function () {
// Create the chart
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Number of Students Enrolled & Withdrawn'
},
subtitle: {
text: 'Click the Columns to see Totals for each Level'
},
xAxis: {
type: 'category',
title: {
text: 'Students'
}
},
yAxis: {
title: {
text: 'Total Number of Students'
}
},
legend: {
enabled: true
//backgroundColor: '#FFFFFF',
//layout: 'vertical',
//floating: true,
//align: 'left',
//verticalAlign: 'top',
//x: 90,
//y: 60,
//shadow: true
},
series: [{
name: 'Overall Total of Students',
colorByPoint: true,
data: [{
name: 'Enrolled',
y: 44,
drilldown: 'LevelEnrolled'
}, {
name: 'Withdrawn',
y: 55,
drilldown: 'LevelWithdrawn'
}]
}],
drilldown: {
series: [{
name: 'Enrolled by Level',
colorByPoint: true,
id: 'LevelEnrolled',
data: [{
name: 'Level 1',
y: 23,
drilldown: 'Level1Enrolled'
}, {
name: 'Level 2',
y: 24,
drilldown: 'Level2Enrolled'
}, {
name: 'Level 3',
y: 11,
drilldown: 'Level3Enrolled'
}]
}, {
name: 'Withdrawn by Level',
colorByPoint: true,
id: 'LevelWithdrawn',
data: [{
name: 'Level 1',
y: 12,
drilldown: 'Level1Withdrawn'
}, {
name: 'Level 2',
y: 33,
drilldown: 'Level2Withdrawn'
}, {
name: 'Level 3',
y: 33,
drilldown: 'Level3Withdrawn'
}]
}, {
id: 'Level1Enrolled',
colorByPoint: true,
data: [
['CIT', 22],
['CS', 11],
['GD', 33],
['SD', 12],
['BIT', 34]
]
}, {
id: 'Level2Enrolled',
colorByPoint: true,
data: [
['CIT', 43],
['CS', 22],
['GD', 33],
['SD', 22],
['BIT', 22]
]
}, {
id: 'Level3Enrolled',
colorByPoint: true,
data: [
['CIT', 22],
['CS', 22],
['GD', 12],
['SD', 11],
['BIT', 23]
]
}, {
id: 'Level1Withdrawn',
colorByPoint: true,
data: [
['CIT', 23],
['CS', 11],
['GD', 2],
['SD', 1]
]
}, {
id: 'Level2Withdrawn',
colorByPoint: true,
data: [
['CIT', 3],
['CS', 2],
['GD', 4],
['SD', 7]
]
}, {
id: 'Level3Withdrawn',
colorByPoint: true,
data: [
['CIT', 3],
['CS', 4],
['GD', 5],
['SD', 8]
]
}]
}
});
});
Any help would be greatly appreciated.
Thanks