Highcharts - How to remove drilldown link on empty items? - javascript

I'm using Highcharts Stacked column and I need to remove drilldown link when some item is empty.
Preconditions:
Use value 0 or null when some item is empty because it's necessary to sort the chart columns.
Some columns may have drilldown and others not, depends on the data.
Please refer to the jsfiddle example:
http://jsfiddle.net/tsenffor/
How to reproduce:
Below the chart, uncheck the the "CCC" label.
Note that "Name 4 column" has no value, but the drilldown link is enabled. See the image below.
If possible hide the empty column, but I still need this value set 0 or null in the code because the columns sorting.
Find the related columns sorting issue here.
$(function () {
$('#container').highcharts({
chart: {
type: 'column'
},
title: {
text: 'Stacked column chart'
},
xAxis: {
type: 'category'
},
yAxis: {
min: 0,
title: {
text: 'Highchart test'
},
stackLabels: {
enabled: true,
style: {
fontWeight: 'bold'
}
}
},
legend: {
enabled: true
},
plotOptions: {
series: {
stacking: 'normal'
}
},
series: [{
name: 'AAA',
data: [{
name: 'Name 1',
y: 5,
drilldown: 'Name1AAA'
}, {
name: 'Name 4',
y: 0
}, {
name: 'Name 3',
y: 2
}, {
name: 'Name 2',
y: 2
}]
}, {
name: 'BBB',
data: [{
name: 'Name 1',
y: 10,
drilldown: 'Name1BBB'
}, {
name: 'Name 4',
y: 0
}, {
name: 'Name 3',
y: 0
}, {
name: 'Name 2',
y: 5
}]
}, {
name: 'CCC',
data: [{
name: 'Name 1',
y: 4,
drilldown: 'Name1CCC'
}, {
name: 'Name 4',
y: 12,
drilldown: 'Name4CCC'
}, {
name: 'Name 3',
y: 8
}, {
name: 'Name 2',
y: 1
}]
}],
drilldown: {
series: [{
name: 'Name 1 - AAA',
id: 'Name1AAA',
data: [
['Name 1/1', 2],
['Name 1/2', 2],
['Name 1/3', 1],
]
}, {
name: 'Name 1 - BBB',
id: 'Name1BBB',
data: [
['Name 1/1', 7],
['Name 1/2', 2],
['Name 1/3', 1],
]
}, {
name: 'Name 1 - CCC',
id: 'Name1CCC',
data: [
['Name 1/1', 2],
['Name 1/2', 3],
['Name 1/3', 4],
]
}, {
name: 'Name 4 - CCC',
id: 'Name4CCC',
data: [
['Name 4/1', 4],
['Name 4/2', 5],
['Name 4/3', 3],
]
}]
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="http://github.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
Is there a way to do this?
Thanks!

We can use drilldown option to control the drilldown.
drilldown: {
//for axis label
activeAxisLabelStyle: {
textDecoration: 'none',
fontStyle: 'italic'
},
//for datalabel
activeDataLabelStyle: {
textDecoration: 'none',
fontStyle: 'italic'
}
}
Reference:http://jsfiddle.net/gh/get/library/pure/highcharts/highcharts/tree/master/samples/highcharts/drilldown/labels/

To remove links of x-axis labels use this:
Highcharts.Tick.prototype.drillable = function () {};
Look this:
http://jsfiddle.net/tsenffor/3/

Related

Chart js grouped bar chart with individual label

I'm trying to implement a grouped bar chart with label for each bar chart. I don't want to have second label as a legend, basically i want 2 labels: one for group and one for element in dataset.
Something like:
Where do i need to put the second label(Male/Female), i put this label in datasets but it's not working.
Where do i need to put the second label(Male/Female), i put this label in datasets but it's not working.
You should declare and configure another x-axis. In the following example inspired by your data, I use options.scales.x.ticks.callback (see Labeling Axes | Chart.js) which allows me to inject new labels.
const ctx = document.getElementById('myChart');
new Chart(ctx, {
type: 'bar',
data: {
labels: ['Category 1', 'Category 2', 'Category 3', 'Category 4'],
datasets: [{
label: 'Dataset 1',
data: [3, 4, 4, 2],
stack: 'Stack 0'
}, {
label: 'Dataset 2',
data: [5, 3, 4, 7],
stack: 'Stack 0'
}, {
label: 'Dataset 3',
data: [3, 0, 4, 4],
stack: 'Stack 1'
}, {
label: 'Dataset 4',
data: [2, 5, 6, 2],
stack: 'Stack 1'
}]
},
options: {
scales: {
x: {
stacked: true,
ticks: {
font: {
weight: 'bold'
},
callback: () => 'Label 1 | Label 2'
}
},
x2: {
border: {
display: false
},
grid: {
display: false
}
},
y: {
stacked: true,
beginAtZero: true
}
},
plugins: {
legend: {
display: false
}
}
}
});
.chart-container {
position: relative;
width: 600px;
}
<script src="https://cdn.jsdelivr.net/npm/chart.js#4.2.0"></script>
<div class="chart-container">
<canvas id="myChart"></canvas>
</div>

Applying 'categories' to Y-Axis causes a gap between column start and X Axis in Highcharts?

I am setting up a simple column chart using Highcharts. After applying categories to my Y-Axis it causes my columns to raise off the x-axis.
I initially was using a chart someone else started with, however couldn't fix it and even after altering a few different fields on my chart. Notably, min and max, however I also tried a few others I found in the docs regarding spacing etc.
So I took a chart from the Highcharts documentation and explictly edited it to my needs. Here is the starting chart I began with. I edited each field to slowly turn it into the graph I need.
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Bar Title'
},
xAxis: {
categories: [
'Category 1',
'Category 2',
'Category 3',
'Category 4',
]
},
yAxis: {
title: '',
categories: ['', 'Cat 1', 'Cat 2', 'Cat 3', 'Cat 4', 'Cat 5'],
min: 0,
max: 5,
tickmarkPlacement: 'on'
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Score',
data: [1, 2, 3, 4]
}, {
name: 'Average Score',
data: [5, 4, 4, 4]
}]
});
This is as close as I can get. However, as noted by this image, there is a gap between my column and my x-axis.
If I remove the below line:
categories: ['', 'Cat 1', 'Cat 2', 'Cat 3', 'Cat 4', 'Cat 5'],
It gets a lot closer!
I'm just looking for a way to keep my Y-axis labels and have no gap. Any insight is appreciated.
You can't have categories on the xAxis and yAxis at the same time when you pass data with values. However, you can achieve what you expect using yAxsi.labels.formatter callback and mapping values to categories. Check demo and code posted below:
var categories = ['', 'Cat 1', 'Cat 2', 'Cat 3', 'Cat 4', 'Cat 5'];
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Bar Title'
},
xAxis: {
categories: [
'Category 1',
'Category 2',
'Category 3',
'Category 4',
]
},
yAxis: {
title: '',
min: 0,
max: 5,
labels: {
formatter: function() {
return categories[this.value];
}
}
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
}
},
series: [{
name: 'Score',
data: [1, 2, 3, 4]
}, {
name: 'Average Score',
data: [5, 4, 4, 4]
}]
});
Demo:
https://jsfiddle.net/BlackLabel/Lq6c0mgx/
API reference:
https://api.highcharts.com/highcharts/yAxis.labels.formatter

Get data in pie chart after click on column chart

I have been working on charts, My requirement is when i click on column i want to display data in pie chart format. Initially its working good means i am getting static data in the column chart, But i want to display data in pie chart like circle. i will place code which is working good in column format. But i want it in pie format. Initially column should be in column format, When i click on any on the column data should be display in pie format.
Thanks in advance
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<script>
// Create the chart
Highcharts.chart('container', {
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: [{
name: 'Mammals',
y: 4,
drilldown: 'mammals'
},
['Reptiles', 2],
['Vertebrates', 1]
]
},
// trying to get data in pie chart after click on any of the column
Highcharts.chart('container', {
chart: {
type: 'pie'
},
title: {
text: 'Basic drilldown'
},
xAxis: {
type: 'category'
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true
}
}
},
id: 'mammals',
data: [['Cats', 3], ['Dogs', 2], ['Platypus', 1]]
{
id: 'mammals',
data: [{
name: 'cats',
y: 4,
drilldown: 'cats'
},
['one', 2],
['two', 1]
]
},
// third drill down
{
id: 'cats',
data: [['Cats1', 3], ['Dogs1', 2], ['Platypus1', 1]]
},{
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
},
},
// end
{
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
});
</script>
// working good in column format
<script>
// Create the chart
Highcharts.chart('container', {
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: [{
name: 'Mammals',
y: 4,
drilldown: 'mammals'
},
['Reptiles', 2],
['Vertebrates', 1]
]
},
// second drill down
{
id: 'mammals',
data: [['Cats', 3], ['Dogs', 2], ['Platypus', 1]]
}, {
id: 'mammals',
data: [{
name: 'cats',
y: 4,
drilldown: 'cats'
},
['one', 2],
['two', 1]
]
},
// third drill down
{
id: 'cats',
data: [['Cats1', 3], ['Dogs1', 2], ['Platypus1', 1]]
},{
id: 'fruits',
data: [
['Apples', 4],
['Oranges', 2]
]
}, {
id: 'cars',
data: [
['Toyota', 4],
['Opel', 2],
['Volkswagen', 2]
]
}]
}
});
</script>

Highcharts GANTT Chart Tooltip Mouse-over Tracking Issue

By default, mouse-over tracking in Highcharts tracks to the closest point on the x-axis. This works well for other types of charts, however, with my GANTT chart
[ http://jsfiddle.net/2xkfm87e/11/ ], this results in non-intuitive results for end users. In the sample image below, note that the cursor is closest to the first Category 8 segment. However, point 1 of the Category 4 segment is the closest point on the x-axis and this is the tooltip that is rendered. I need to have the tracking be focused on the y-axis instead so that if the cursor is closest to a point on the y-axis, that tooltip is rendered.
Is this possible?
Thanks for your help!
$(function () {
// Define tasks
var tasks = [{
name: 'Category 1',
intervals: []
}, {
name: 'Category 2',
intervals: [{ // From-To pairs
from: Date.UTC(2010,5, 21),
to: Date.UTC(2015, 5, 21),
label: 'Category 2',
tooltip_data: 'this data'
}]
}, {
name: 'Category 3',
intervals: [{ // From-To pairs
from: Date.UTC(2011,05,16),
to: Date.UTC(2012,03,21 ),
label: 'Category 3',
tooltip_data: 'this data'
}, {
from: Date.UTC(2013,07,09),
to: Date.UTC(2015,05,22),
label: 'Category 3',
tooltip_data: 'this data'
}]
}, {
name: 'Category 4',
intervals: [{ // From-To pairs
from: Date.UTC(2013,07,18 ),
to: Date.UTC(2015,05,22),
label: 'Category 4',
tooltip_data: 'this data'
}]
}, {
name: 'Category 5',
intervals: [{ // From-To pairs
from: Date.UTC(2013,06,17),
to: Date.UTC(2014,04,21),
label: 'Category 5',
tooltip_data: 'this data'
}, {
from: Date.UTC(2015,01,22),
to: Date.UTC(2015,05,22),
label: 'Category 5',
tooltip_data: 'this data'
}]
}, {
name: 'Category 6',
intervals: [{ // From-To pairs
from: Date.UTC(2013,06,17),
to: Date.UTC(2014,04,21),
label: 'Category 6',
tooltip_data: 'this data'
}, {
from: Date.UTC(2015,01,22),
to: Date.UTC(2015,05,22),
label: 'Category 6',
tooltip_data: 'this data'
}]
}, {
name: 'Category 7',
intervals: [{ // From-To pairs
from: Date.UTC(2013,06,17),
to: Date.UTC(2014,04,21),
label: 'Category 7',
tooltip_data: 'this data'
}, {
from: Date.UTC(2015,01,22),
to: Date.UTC(2015,05,22),
label: 'Category 7',
tooltip_data: 'this data'
}]
}, {
name: 'Category 8',
intervals: [{ // From-To pairs
from: Date.UTC(2013,06,17),
to: Date.UTC(2014,04,21),
label: 'Category 8',
tooltip_data: 'this data'
}, {
from: Date.UTC(2015,01,22),
to: Date.UTC(2015,05,22),
label: 'Category 8',
tooltip_data: 'this data'
}]
}, {
name: 'Category 9',
intervals: [{ // From-To pairs
from: Date.UTC(2013,06,17),
to: Date.UTC(2014,04,21),
label: 'Category 9',
tooltip_data: 'this data'
}, {
from: Date.UTC(2015,01,22),
to: Date.UTC(2015,05,22),
label: 'Category 9',
tooltip_data: 'this data'
}]
}];
// re-structure the tasks into line seriesvar series = [];
var series = [];
$.each(tasks.reverse(), function(i, task) {
var item = {
name: task.name,
data: []
};
$.each(task.intervals, function(j, interval) {
item.data.push({
x: interval.from,
y: i,
label: interval.label,
from: interval.from,
to: interval.to,
tooltip_data: interval.tooltip_data
}, {
x: interval.to,
y: i,
from: interval.from,
to: interval.to,
tooltip_data: interval.tooltip_data
});
// add a null value between intervals
if (task.intervals[j + 1]) {
item.data.push(
[(interval.to + task.intervals[j + 1].from) / 2, null]
);
}
});
series.push(item);
});
// restructure the milestones
/*$.each(milestones, function(i, milestone) {
var item = Highcharts.extend(milestone, {
data: [[
milestone.time,
milestone.task
]],
type: 'scatter'
});
series.push(item);
});
*/
// create the chart
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: 'Category History'
},
xAxis: {
type: 'datetime'
},
yAxis: {
min:0,
max:8,
categories: ['Category 9',
'Category 8',
'Category 7',
'Category 6',
'Category 5',
'Category 4',
'Category 3',
'Category 2',
'Category 1'],
tickInterval: 1,
tickPixelInterval: 200,
labels: {
style: {
color: '#525151',
font: '12px Helvetica',
fontWeight: 'bold'
}
},
startOnTick: false,
endOnTick: false,
title: {
text: 'Criteria'
},
minPadding: 0.2,
maxPadding: 0.2,
fontSize:'15px'
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>'+ tasks[this.y].name + '</b><br/>'+this.point.options.tooltip_data +'<br>' +
Highcharts.dateFormat('%m-%d-%Y', this.point.options.from) +
' - ' + Highcharts.dateFormat('%m-%d-%Y', this.point.options.to);
}
},
plotOptions: {
line: {
lineWidth: 10,
marker: {
enabled: false
},
dataLabels: {
enabled: true,
align: 'left',
formatter: function() {
return this.point.options && this.point.options.label;
}
}
}
},
series: series
});
console.log(series);
});
It should be already fixed on the master branch: http://jsfiddle.net/2xkfm87e/14/
And fix will be included in the next release. URL to the branch's CDN:
<script src="http://github.highcharts.com/highstock.js"></script>
Ok, I got it working. Here are the results for anyone who might follow this path. http://jsfiddle.net/rwsavoy/2xkfm87e/16/ I am still giving credit to #Paweł Fus for this answer because he sent me in the right direction. Thanks Paweł!
Also, this functionality is available as of Highcharts 4.1.5. However, as of this writing, the latest version of Highstocks (2.1.5) does not (From the documentation, Highstocks includes most of Highcharts functionality).
$(function () {
/**
* Highcharts X-range series plugin
*/
(function (H) {
var defaultPlotOptions = H.getOptions().plotOptions,
columnType = H.seriesTypes.column,
each = H.each;
defaultPlotOptions.xrange = H.merge(defaultPlotOptions.column, {});
H.seriesTypes.xrange = H.extendClass(columnType, {
type: 'xrange',
parallelArrays: ['x', 'x2', 'y'],
animate: H.seriesTypes.line.prototype.animate,
/**
* Borrow the column series metrics, but with swapped axes. This gives free access
* to features like groupPadding, grouping, pointWidth etc.
*/
getColumnMetrics: function () {
var metrics,
chart = this.chart,
swapAxes = function () {
each(chart.series, function (s) {
var xAxis = s.xAxis;
s.xAxis = s.yAxis;
s.yAxis = xAxis;
});
};
swapAxes();
this.yAxis.closestPointRange = 1;
metrics = columnType.prototype.getColumnMetrics.call(this);
swapAxes();
return metrics;
},
translate: function () {
columnType.prototype.translate.apply(this, arguments);
var series = this,
xAxis = series.xAxis,
yAxis = series.yAxis,
metrics = series.columnMetrics;
H.each(series.points, function (point) {
barWidth = xAxis.translate(H.pick(point.x2, point.x + (point.len || 0))) - point.plotX;
point.shapeArgs = {
x: point.plotX,
y: point.plotY + metrics.offset,
width: barWidth,
height: metrics.width
};
point.tooltipPos[0] += barWidth / 2;
point.tooltipPos[1] -= metrics.width / 2;
});
}
});
/**
* Max x2 should be considered in xAxis extremes
*/
H.wrap(H.Axis.prototype, 'getSeriesExtremes', function (proceed) {
var axis = this,
dataMax = Number.MIN_VALUE;
proceed.call(this);
if (this.isXAxis) {
each(this.series, function (series) {
each(series.x2Data || [], function (val) {
if (val > dataMax) {
dataMax = val;
}
});
});
if (dataMax > Number.MIN_VALUE) {
axis.dataMax = dataMax;
}
}
});
}(Highcharts));
var series= [{
data: [ {
name: 'Catergory 1',
x: Date.UTC(2009,3,15),
x2: Date.UTC(2015,5,11),
y:8,
tooltip_data:'',
color:'#f45b5b'
} , {
name: 'Catergory 2',
x: Date.UTC(2013,10,12),
x2: Date.UTC(2014,6,17),
y:7,
tooltip_data:'Catergory 2 A',
color:'#2b908f'
} , {
name: 'Catergory 2',
x: Date.UTC(2014,6,18),
x2: Date.UTC(2015,5,11),
y:7,
tooltip_data:'',
color:'#2b908f'
} , {
name: 'Catergory 3',
x: Date.UTC(2009,6,21),
x2: Date.UTC(2015,5,11),
y:6,
tooltip_data:'',
color:'#e4d354'
} , {
name: 'Catergory 4',
x: Date.UTC(2011,8,29),
x2: Date.UTC(2015,5,11),
y:5,
tooltip_data:'',
color:'#f15c80'
} , {
name: 'Catergory 7',
x: Date.UTC(2009,3,15),
x2: Date.UTC(2014,6,17),
y:2,
tooltip_data:'Tooltip Catergory 7 A',
color:'#90ed7d'
} , {
name: 'Catergory 7',
x: Date.UTC(2014,6,18),
x2: Date.UTC(2015,5,11),
y:2,
tooltip_data:'',
color:'#90ed7d'
} , {
name: 'Catergory 8',
x: Date.UTC(2009,6,16),
x2: Date.UTC(2015,5,11),
y:1,
tooltip_data:'',
color:'#434348'
} , {
name: 'Category 9',
x: Date.UTC(2009,3,15),
x2: Date.UTC(2015,5,11),
y:0,
tooltip_data:'',
color:'#7cb5ec'
}] }];
// THE CHART
$('#container').highcharts({
chart: {
type: 'xrange'
},
title: {
text: 'Category History',
style: {
color: '#525151',
font: '20px Helvetica',
fontWeight: 'bold'
}
},
xAxis: {
type: 'datetime',
dateTimeLabelFormats:{
month: '%b - %Y'
},
labels: {
style: {
color: '#525151',
font: '12px Helvetica',
fontWeight: 'bold'
}
},
startOnTick: true,
tickmarkPlacement: 'on',
tickInterval: 3 * 30 * 24 * 3600 * 1000,
endOnTick: true,
minPadding: 0,
maxPadding: 0,
gridLineWidth: 1
},
yAxis: {
min:0,
useHTML: true,
categories: ['Category 9',
'Category 8',
'Category 7',
'Category 6',
'Category 5',
'Category 4',
'Category 3',
'Category 2',
'Category 1'],
tickInterval: 1,
tickPixelInterval: 200,
labels: {
style: {
color: '#525151',
font: '12px Helvetica',
fontWeight: 'bold'
}
},
startOnTick: false,
endOnTick: false,
title: {
text: 'Criteria',
style: {
color: '#525151',
font: '15px Helvetica',
fontWeight: 'bold'
}
},
minPadding: 0.2,
maxPadding: 0.2
},
legend: {
enabled: false
},
tooltip: {
formatter: function() {
return '<b>'+ this.point.options.name + '</b><br/>' + this.point.options.tooltip_data + '<br>' +
Highcharts.dateFormat('%m-%d-%Y', this.point.options.x) +
' - ' + Highcharts.dateFormat('%m-%d-%Y', this.point.options.x2 )+ '<br>';
}
},
plotOptions: {
series: {
borderRadius: 5,
pointWidth: 10,
colorByPoint: true
}
},
series: series
});
});

HighCharts, How to use a data name in a legend whilst also using drill downs in a column chart?

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

Categories

Resources