We Keep Coding

Highcharts donut percentage issue

I'm trying a visualization using Highcharts. I want to change outer donut's values. The values should be in percentage. For example, if y value is 23, data values are 11 and 12, but I want to display them as pecentage of y (11*100/23)...Is it possible?
Code
$(function () {
var a = [];
var colors = Highcharts.getOptions().colors,
categories = ['pool_ipv4_02','pool_ipv4_03','pool_ipv6_02','pool_ipv6_03','pool_ipv4_01','pool_ipv6_01'],
data = [{
y: 13.45,
color: colors[0],
drilldown: {
name: 'Pool1 Info',
categories: ['Used', 'Free'],
data: [12.73,0.72],
color: colors[0]
}
}, {
y: 20.38,
color: colors[1],
drilldown: {
name: 'Pool2 Info',
categories: ['Used', 'Free'],
data: [14.03,6.35],
color: colors[1]
}
}, {
y: 24.03,
color: colors[2],
drilldown: {
name: 'Pool3 Info',
categories: ['Used', 'Free'],
data: [12.73,11.3],
color: colors[2]
}
}, {
y: 11.77,
color: colors[3],
drilldown: {
name: 'Pool4 Info',
categories: ['Used', 'Free'],
data: [7.43,4.34],
color: colors[3]
}
},{
y: 19.33,
color: colors[4],
drilldown: {
name: 'Pool5 Info',
categories: ['Used', 'Free'],
data: [4.73,14.6],
color: colors[4]
}
},{
y: 11.04,
color: colors[5],
drilldown: {
name: 'Pool6 Info',
categories: ['Used', 'Free'],
data: [4.73,6.31],
color: colors[5]
}
}],
browserData = [],
versionsData = [],
i,
j,
dataLen = data.length,
drillDataLen,
brightness;
a[0] = data[0].drilldown.data[0]*100/(data[0].drilldown.data[0]+data[0].drilldown.data[1]);
a[1] = data[0].drilldown.data[1]*100/(data[0].drilldown.data[0]+data[0].drilldown.data[1]);
console.log(a[0]);
console.log(a[1]);
// Build the data arrays
for (i = 0; i < dataLen; i += 1) {
console.log(data[i]);
// add browser data
browserData.push({
name: categories[i],
y: data[i].y,
color: data[i].color
});
console.log(data[i].drilldown.data[0]);
console.log(data[i].drilldown.data[1]);
// add version data
drillDataLen = data[i].drilldown.data.length;
for (j = 0; j < drillDataLen; j += 1) {
brightness = 0.2 - (j / drillDataLen) / 5;
versionsData.push({
name: data[i].drilldown.categories[j],
y: data[i].drilldown.data[j],
color: Highcharts.Color(data[i].color).brighten(brightness).get()
});
}
}
// Create the chart
$('#container2').highcharts({
chart: {
type: 'pie'
},
title: {
text: 'BNG3 Pool Information'
},
yAxis: {
title: {
text: 'Total percent market share'
}
},
plotOptions: {
pie: {
shadow: false,
center: ['50%', '50%']
}
},
tooltip: {
valueSuffix: '%'
},
credits: {
enabled: false
},
series: [{
name: 'Pool',
data: browserData,
size: '60%',
dataLabels: {
formatter: function () {
return this.y > 5 ? this.point.name : null;
},
color: '#ffffff',
distance: -30
}
}, {
name: 'Utilization',
data: versionsData,
size: '80%',
innerSize: '60%',
dataLabels: {
formatter: function () {
// display only if larger than 1
return this.y > 1 ? '<b>' + this.point.name + ':</b> ' + this.y + '%' : null;
}
}
}]
});
});

High Chart Data label Formatter not working properly

I am developing chart with the help of Highchart but data label is not showing correct. On each bar I want to write "hello, hello1, hello2 etc." on the bars but currently it's showing Y axis value.
Check on js fiddle http://jsfiddle.net/NM2Cp/251/
js code is
var count = 0;
var options = {
exporting: {
url: 'http://export.highcharts.com/'
},
chart: {
type: 'column'
},
title: {
text: 'Monthly Average Rainfall'
},
legend:{
enabled:false
},
subtitle: {
text: 'Source: WorldClimate.com'
},
xAxis: {
categories: [
'Attitude',
'Identity',
'Role',
'Agility',
'Fairness',
'Conflict'
],
crosshair: true
},
yAxis: {
min: 0,
max:100,
tickInterval:10,
title: {
text: 'Rainfall (mm)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.1f} mm</b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
column: {
pointPadding: 0.2,
borderWidth: 0
},
series: {
dataLabels: {
overflow: 'none',
crop: false,
align:'left',
enabled: true,
color: '#000',
style: {fontWeight: 'bolder'},
formatter: function() {
return "hello";
},
inside: true,
rotation: 270
},
pointPadding: 0.1,
groupPadding: 0.1
}
},
series: [{
//name: 'Subcategory1',
data: [{ y: 19.9, color: '#BF0B23'}, { y: 59.9, color: '#01DFD7'}, { y: 49.9, color: '#8258FA'}, { y: 59.9, color: '#04B404'}, { y: 36.9, color: '#B404AE'}, { y: 32.9, color: '#F6CECE'}]
}, {
// name: 'Subcategory2',
data: [{ y: 83.9, color: '#BF0B23'}, { y: 49.9, color: '#01DFD7'}, { y: 29.9, color: '#8258FA'}, { y: 89.9, color: '#04B404'}, { y: 49.9, color: '#B404AE'}, { y: 89.9, color: '#F6CECE'}]
}, {
//name: 'Subcategory3',
data: [{ y: 95.9, color: '#BF0B23'}, { y: 49.9, color: '#01DFD7'}, { y: 15.9, color: '#8258FA'}, { y: 79.9, color: '#04B404'}, { y: 76.9, color: '#B404AE'},{ y: 75.9, color: '#F6CECE'}]
}]
};
var obj = {},
exportUrl = options.exporting.url;
obj.options = JSON.stringify(options);
obj.type = 'image/png';
obj.async = true;
$.ajax({
type: 'post',
url: exportUrl,
data: obj,
success: function (data) {
var imgContainer = $("#imgContainer");
$('<img>').attr('src', exportUrl + data).attr('width', '250px').appendTo(imgContainer);
$('<a>or Download Here</a>').attr('href', exportUrl + data).appendTo(imgContainer);
}
});
Image on high chart is

Instead of using (in plotOptions -> series -> dataLabels):
formatter: function() ...
Use this:
format: "Hello",
Please refer to: http://api.highcharts.com/highcharts#plotOptions.bar.dataLabels

( Highcharts ) How to make dataLabels disappear if there is, a higher column?

I have a chart which has attribute column.grouping set to false,
and I would like to show data labels only on highest columns.
Here is an example
dataLabels: {
enabled: true
}
I have tried to find solution for couple hours now, I would appreciate any help.

I think it would be the easiest to use point.dataLabels.enabled option. Just preprocess data before rendering the chart, to determine which points should display values, see: http://jsfiddle.net/9f1maj3x/
And code:
function enableLabels(d_1, d_2) {
// compare two data series and enable dataLabel for a higher column:
$.each(d_1, function (i, point) {
if (point > d_2[i]) {
d_1[i] = {
dataLabels: {
enabled: true
},
y: d_1[i]
}
} else {
d_2[i] = {
dataLabels: {
enabled: true
},
y: d_2[i]
}
}
});
return [d_1, d_2];
}
Data example:
var data = [
[150, 73, 20],
[140, 90, 40],
[103.6, 178.8, 198.5],
[203.6, 198.8, 208.5]
];
var leftColumns = enableLabels(data[0], data[1]),
rightColumns = enableLabels(data[2], data[3]);
And example in Highcharts:
series: [{
name: 'Employees',
color: 'rgba(165,170,217,1)',
data: leftColumns[0],
pointPadding: 0.3,
pointPlacement: -0.2
}, {
name: 'Employees Optimized',
color: 'rgba(126,86,134,.9)',
data: leftColumns[1],
pointPadding: 0.4,
pointPlacement: -0.2
}, {
name: 'Profit',
color: 'rgba(248,161,63,1)',
data: rightColumns[0],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.3,
pointPlacement: 0.2,
yAxis: 1
}, {
name: 'Profit Optimized',
color: 'rgba(186,60,61,.9)',
data: rightColumns[1],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.4,
pointPlacement: 0.2,
yAxis: 1
}]

you can use
chart.yAxis[0].max;
or
this.dataMax
to get maximum value. to compare , in formatter function compare both and retrun larger one.

You can write a formatter for the dataLabel that checks if it's the highest for that yAxis, here's the API documentation:
http://api.highcharts.com/highcharts#plotOptions.series.dataLabels.formatter
After comments: You can take the data out of the chart object and use a formatter to pick the largest one, fiddle: http://jsfiddle.net/7zc5peyf/1/
var em = [150, 73, 20];
var eo = [140, 90, 40];
data label code:
data: em,
dataLabels:{
enabled: true,
formatter: function(){
if(this.y > eo[this.point.index]){
return this.y;
}
}
}

Here is my solution:
$(function () {
var something = {
chart: {
type: 'column'
},
title: {
text: 'Efficiency Optimization by Branch'
},
xAxis: {
categories: [
'Seattle HQ',
'San Francisco',
'Tokyo']
},
yAxis: [{
min: 0,
title: {
text: 'Employees'
}
}, {
title: {
text: 'Profit (millions)'
},
opposite: true
}],
legend: {
shadow: false
},
tooltip: {
shared: true
},
plotOptions: {
column: {
grouping: false,
shadow: false,
borderWidth: 0
},
series: {
events: {
hide: function () {
console.log(this);
},
show: function () {
console.log(this);
},
legendItemClick: function () {
for (var i = 0; i < something.series.length; i++) {
if (something.series[i].name === this.name) {
something.series[i].visible = !this.visible;
}
}
console.log(this.name);
}
}
}
},
series: [{
name: 'Employees',
color: 'rgba(165,170,217,1)',
visible: true,
data: [150, 73, 20],
pointPadding: 0.3,
pointPlacement: -0.2,
dataLabels: {
enabled: true,
formatter: function () {
var index = something.xAxis.categories.indexOf(this.x);
if ((this.y > something.series[1].data[index]) || !something.series[1].visible) {
console.log(something.series.visible);
return this.y + '*';
}
return '';
}
}
}, {
name: 'Employees Optimized',
color: 'rgba(126,86,134,.9)',
visible: true,
data: [140, 90, 40],
pointPadding: 0.4,
pointPlacement: -0.2,
dataLabels: {
enabled: true,
formatter: function () {
var index = something.xAxis.categories.indexOf(this.x);
if ((this.y > something.series[0].data[index]) || !something.series[0].visible) {
console.log(something.series.visible);
return this.y + '*';
}
return '';
}
}
}, {
name: 'Profit',
color: 'rgba(248,161,63,1)',
visible: true,
data: [193.6, 128.8, 144.5],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.3,
pointPlacement: 0.2,
yAxis: 1,
dataLabels: {
enabled: true,
formatter: function () {
var index = something.xAxis.categories.indexOf(this.x);
if ((this.y > something.series[3].data[index]) || !something.series[3].visible) {
return this.y + '*';
}
return '';
}
}
}, {
name: 'Profit Optimized',
color: 'rgba(186,60,61,.9)',
visible: true,
data: [123.6, 198.8, 208.5],
tooltip: {
valuePrefix: '$',
valueSuffix: ' M'
},
pointPadding: 0.4,
pointPlacement: 0.2,
yAxis: 1,
dataLabels: {
enabled: true,
formatter: function () {
var index = something.xAxis.categories.indexOf(this.x);
if ((this.y > something.series[2].data[index]) || !something.series[2].visible) {
console.log(something.series.visible);
return this.y + '*';
}
return '';
}
}
}]
};
$('#container').highcharts(something);
});
http://jsfiddle.net/7zc5peyf/4/

Issue on jQuery - Javascript Submit Closing Tag

Can you please take a look at following code and let me know why I am not able to initialize the closing tag for
$("#submitform").on("click", function (e) {});
I already tried it in http://www.jshint.com/ but it doesn't show any dis match character it took me hours to work on it but unfortunately I couldn't find out what is causing this. The weird thing is the application is working fine and I am not getting any error on console!
$("#submitform").on("click", function (e) {
$("div.alert").remove();
// Validation
var proceed = true;
if (targetPower == "Target Energy") {
$('#counter').parent().after('<div class="alert alert-danger err"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>This is a Requierd Field</div>');
proceed = false;
}
if ($("#scenSelect").val() == "0") {
$('#counter1').parent().after('<div class="alert alert-danger err"> <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>Please Select From List</div>');
proceed = false;
}
if (proceed) {
//Change Concat
targetPower = targetPower.replace(/\D/g, '');
senario = $("#scenSelect").val();
var mapquery = senario + "_" + targetPower;
var data = 'column=' + mapquery;
if (qtype == "econo") {
var req = $.ajax({
type: "POST",
data: data,
dataType: 'json',
url: "assets/econo.php"
});
req.done(function (points) {
coords = points;
st = map.set();
for (var i = 0; i < coords.length; i++) {
var circle = map.circle(coords[i][0], coords[i][1], 5);
st.push(circle);
}
st.attr({
fill: '#FF6600',
translation: "4,4",
stroke: '#FFF',
'stroke-width': 1.5,
opacity: 1,
});
st.hover(function () {
this.animate({
fill: 'red',
opacity: .6,
r: 8,
'stroke-width': 2
}, 300)
}, function () {
this.animate({
//fill: '#98ED00',
fill: '#FF6600',
opacity: 1,
'stroke-width': 1.5,
r: 5
}, 300)
});
}); //done first
var req2 = $.ajax({
type: "POST",
data: data,
dataType: 'json',
url: "assets/econocharts.php"
});
req2.done(function (data) {
var cars = [];
cars.push(data[0]);
cars.push(data[1]);
cars.push(data[2]);
cars.push(data[3]);
cars.push(data[4]);
$('#chart1').highcharts({
chart: {
type: 'column'
},
credits: {
enabled: false
},
title: {
text: 'Economy Model',
style: {
color: '#FFF',
fontWeight: 'normal',
fontSize: '11',
marginBottom: '30'
}
},
xAxis: {
categories: ['ROR Facilities'],
},
yAxis: {
title: {
text: 'Number of Facilities'
},
tickInterval: 50,
max: 300
},
legend: {
enabled: false
},
tooltip: {
formatter: function () {
return this.x + ' <b>' + this.y + '</b>';
}
},
series: [{
data: [{
name: 'Point 1',
color: '#00FF00',
y: cars[0]
}]
}]
});
// Second Chart
$('#chart2').highcharts({
chart: {
type: 'column'
},
credits: {
enabled: false
},
title: {
text: 'title!',
style: {
color: '#FFF',
fontWeight: 'normal',
fontSize: '11',
marginBottom: '30'
}
},
xAxis: {
plotLines: [{
color: 'grey',
value: '.5',
width: '3'
}],
categories: ['Powerlines', 'Roads'],
style: {
color: Highcharts.getOptions().colors[0]
},
},
yAxis: [{ // Primary yAxis
labels: {
format: '{value}',
style: {
color: Highcharts.getOptions().colors[1]
}
},
title: {
text: 'Km Powerline',
style: {
color: Highcharts.getOptions().colors[1]
}
}
}, { // Secondary yAxis
title: {
text: 'Km Roads',
style: {
color: Highcharts.getOptions().colors[0]
}
},
labels: {
format: '{value} ',
style: {
color: Highcharts.getOptions().colors[0]
}
},
opposite: true
}],
legend: {
enabled: false
},
tooltip: {
formatter: function () {
return this.x + ' <b>' + this.y + ' Km</b>';
}
},
series: [{
name: 'Powerline',
//color: '#0066FF',
type: 'column',
yAxis: 1,
data: [0, cars[2]],
tooltip: {
valueSuffix: ' km'
}
}, {
name: 'Roads',
type: 'column',
data: [cars[1], 0],
tooltip: {
valueSuffix: ' km'
}
}]
});
// Third Chart
$('#chart3').highcharts({
chart: {
type: 'column'
},
credits: {
enabled: false
},
title: {
text: 'The Chart Title Goes Here!',
style: {
color: '#FFF',
fontWeight: 'normal',
fontSize: '11',
marginBottom: '30'
}
},
xAxis: {
categories: ['Penstocks'],
},
yAxis: {
labels: {
formatter: function () {
return this.value / 1000;
}
},
title: {
text: 'Km Penstocks'
},
tickInterval: 100000,
max: 1500000
},
legend: {
enabled: false
},
tooltip: {
formatter: function () {
return this.x + ' <b>' + this.y + ' m</b>';
}
},
series: [{
data: [{
name: 'Point 1',
color: '#00FF00',
y: cars[4]
}]
}]
});
// Four Chart
$('#chart4').highcharts({
chart: {
type: 'column'
},
credits: {
enabled: false
},
title: {
text: 'The Chart Title Goes Here!',
style: {
color: '#FFF',
fontWeight: 'normal',
fontSize: '11',
marginBottom: '30'
}
},
xAxis: {
categories: ['Total Cost Per Year'],
},
yAxis: {
labels: {
formatter: function () {
return this.value / 1000000;
}
},
title: {
text: 'Million $'
},
tickInterval: 100000000,
max: 1300000000
},
legend: {
enabled: false
},
tooltip: {
formatter: function () {
return this.x +
' <b>' + this.y + '< $/b>';
}
},
series: [{
data: [{
name: 'Point 1',
color: '#00FF00',
y: cars[3]
}]
}]
});
});
} //end of ecolo
if (qtype == "ecolo") {
var add = 'img/' + $("#aniSelect").val() + '.png';
image2.animate({
opacity: 0
}, 500, mina.easein, function () {
image2.remove();
image2 = map.image(add, -100, 0, 794, 680).insertBefore(st).animate({
opacity: 1,
x: 0
}, 500, mina.easeout);
});
var selectedanimal = $("#aniSelect").val();
var dataecolo = 'column=' + mapquery + '&animal=' + selectedanimal;
if ($('#c1').is(':checked')) {
var req = $.ajax({
type: "POST",
data: dataecolo,
dataType: 'json',
url: "assets/ecolo_yes.php"
});
req.done(function (points) {
coords = points;
st = map.set();
for (var i = 0; i < coords.length; i++) {
var circle = map.circle(coords[i][0], coords[i][1], 5);
st.push(circle);
}
st.attr({
fill: '#FF6600',
translation: "4,4",
stroke: '#FFF',
'stroke-width': 1.5,
opacity: 1,
});
st.hover(function () {
this.animate({
fill: 'red',
opacity: .6,
r: 8,
'stroke-width': 2
}, 300)
}, function () {
this.animate({
//fill: '#98ED00',
fill: '#FF6600',
opacity: 1,
'stroke-width': 1.5,
r: 5
}, 300)
});
}); //done first
//Performance
var req3 = $.ajax({
type: "POST",
data: dataecolo,
dataType: 'json',
url: "assets/ecolochart_yes.php"
});
req3.done(function (data) {
var cuyes = [];
cuyes.push(data[0]);
cuyes.push(data[1]);
cuyes.push(data[2]);
cuyes.push(data[3]);
cuyes.push(data[4]);
$('#chart1').highcharts({
chart: {
type: 'column'
},
credits: {
enabled: false
},
title: {
text: 'Economy Model',
style: {
color: '#FFF',
fontWeight: 'normal',
fontSize: '11',
marginBottom: '30'
}
},
xAxis: {
categories: ['ROR Facilities'],
},
yAxis: {
title: {
text: 'Number of Facilities'
},
tickInterval: 50,
max: 300
},
legend: {
enabled: false
},
tooltip: {
formatter: function () {
return this.x + ' <b>' + this.y + '</b>';
}
},
series: [{
data: [{
name: 'Point 1',
color: '#00FF00',
y: cuyes[0]
}]
}]
}); // End of Chart One
// Third Chart
$('#chart3').highcharts({
chart: {
type: 'column'
},
credits: {
enabled: false
},
title: {
text: 'The Chart Title Goes Here!',
style: {
color: '#FFF',
fontWeight: 'normal',
fontSize: '11',
marginBottom: '30'
}
},
xAxis: {
categories: ['Penstocks'],
},
yAxis: {
labels: {
formatter: function () {
return this.value / 1000;
}
},
title: {
text: 'Km Penstocks'
},
tickInterval: 100000,
max: 1500000
},
legend: {
enabled: false
},
tooltip: {
formatter: function () {
return this.x + ' <b>' + this.y + ' m</b>';
}
},
series: [{
data: [{
name: 'Point 1',
color: '#00FF00',
y: cuyes[4]
}]
}]
}); //end of Chart 3
});
} //end of if Checked
else {}
} // end of ecolo
} // end of procced
mapReset();
e.preventDefault();
});

How to create a multi y-axis chart with drill down in Highcharts

http://jsfiddle.net/cgelinas78/pLDeq/54/
A few things...
Why aren't the dollar amounts showing up on the left y-axis?
When one drills down on the 1st column and then comes back - why does the "Budget" series turn black?
Here's my code:
$(function(){
function setChartColumn(name, categories, data, type) {
chart.xAxis[0].setCategories(categories);
var dataLen = data.length;
while(chart.series.length>0)
chart.series[0].remove();
for(var i = 0; i< dataLen; i++){
chart.addSeries({
type: (i == 0 ? 'column' : 'spline'),
name: name[i],
data: data[i],
color: colors[i]
});
}
}
function setChart(name, categories, data, color, type) {
chart.xAxis[0].setCategories(categories);
var dataLen = data.length;
chart.series[0].remove();
if(dataLen === 1){
chart.series[0].remove();
} else {
for(var i = 0; i< chart.series.length; i++){
chart.series[i].remove();
}
}
for(var i = 0; i< dataLen; i++){
chart.addSeries({
type: type,
name: name,
stacking: 'normal',
data: data[i],
color: color || 'white'
});
}
}
var colors = Highcharts.getOptions().colors;
var categories = ['Jan','Feb','Mar','Apr','May','Jun', 'Jul', 'Aug', 'Sept', 'Oct', 'Nov', 'Dec'],
name = 'Expenses',
name2 = 'Budget',
data = [
{
y:100,
drilldown: {
name:'Marketing',
type:'column',
categories:['Silverline','Google','CNN'],
data:[
{name:'Recommedation',y:15},
{name: 'Legal Fees', y:50},
{name: 'Click Ads', y:35}
],
color: colors[0]
}
},
{
y:402,
drilldown: {
name:'Expenses',
type:'column',
categories:['1','2','3','4'],
data:[
{name:'Recommedation',y:67},
{name:'Recommedation',y:34},
{name:'Recommedation',y:1},
{name:'Recommedation',y:11}
],
color: colors[0]
}
},
{
y:343,
drilldown: {
name:'Misc',
type:'column',
categories:['A', 'B', 'C'],
data:[
{name:'Recommendation',y:82},
{name:'Area',y:5},
{name:'Observation',y:6}
],
color: colors[0]
}
},
{
y:175,
drilldown: {
name:'A',
type:'column',
categories:['B','C','D'],
data:[
{name:'Recommendation',y:17},
{name:'Recommendation',y:20},
{name:'Recommendation',y:50}
],
color: colors[0]
}
},
{
y:229,
drilldown: {
name:'Expense 1',
type:'column',
categories:['Category 1'],
data:[
{name:'Recommendation',y:15},
{name:'Observation',y:2}],
color: colors[0]
}
},
{
y:533
},
{y:166},
{y:445},
{y:312},
{y:310},
{y:230},
{y:40}],
data2 = [1000,990,851,805,729,699, 650, 550, 450, 350, 250, 150, 50];
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
zoomType: 'xy'
},
title: {
text: '2013 Mizuho Budget'
},
subtitle: {
text: 'Click for more details and click to return.'
},
xAxis: [{
categories: categories
}],
yAxis: [{
labels: {
formatter: function(){
return '$' + this.value;
},
style: { color: '#89A54E' }
},
title: {
text: 'Budget',
style: { color: '#89A54E' }
},
opposite: true
},
{ // Secondary yAxis
gridLineWidth: 0,
labels: {
formatter: function() {
return '$' + this.value;
},
style: {color: '#4572A7'}
},
title: {
text: 'Expenses',
style: {color: '#4572A7'}
}
}],
plotOptions: {
spline: { showInLegend: true},
column: {
cursor: 'pointer',
point: {
events: {
click:
function() {
var drilldown = this.drilldown;
if (drilldown) {
setChart([drilldown.name, drilldown.name1, drilldown.name2, drilldown.name3, drilldown.name4, drilldown.name5], drilldown.categories, [drilldown.data, drilldown.data1, drilldown.data2, drilldown.data3, drilldown.data4, drilldown.data5], drilldown.color, [drilldown.type]);
} else {
setChartColumn([name,name2], categories, [data,data2], ['column','column']);
}
}
}
},
showInLegend: true,
dataLabels: {
enabled: false,
color: colors[0],
style: { fontWeight: 'bold' },
formatter: function() {
return '$' + this.y;
}
}
}
},
tooltip: { shared: true },
credits:{ enabled:false },
legend: { backgroundColor: '#FFFFFF' },
series: [{
name: name,
color: '#4572A7',
type: 'column',
data: data
},
{
name: name2,
color: '#89A54E',
type: 'spline',
data: data2
}]
});
});

1) You don't have either of your series assigned to use the 2nd axis. Add yAxis:1 to one of your series and it will show up.
2) You are setting the color of the line originally to #89A54E and then in setChart you set it to color[i]
3) Look at what you are passing into setChart:
setChart([drilldown.name, drilldown.name1, drilldown.name2, drilldown.name3, drilldown.name4, drilldown.name5], drilldown.categories, [drilldown.data, drilldown.data1, drilldown.data2, drilldown.data3, drilldown.data4, drilldown.data5], drilldown.color, [drilldown.type]);
SetChart adds a series for each of the 3rd parameter: [drilldown.data, drilldown.data1, drilldown.data2, drilldown.data3, drilldown.data4, drilldown.data5]