mardi 24 mars 2015

If statement for line colours

Please can you assist.. I am currently making a chart which will have two lines within it, a total needed line(black) and a total collected line(red or green). I would like to add an if statement to the code which will identify whether the line will be green or red. It should be green when it is above the total needed black line and red when it falls below. In my code I have made provision for what it may look like given the scenario.



$(function () {
$('#container').highcharts({
title: {
text: 'Total Contribution'
},
xAxis: {
categories: ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
},
labels: {
items: [{
html: 'Student VS Total contribution',
style: {
left: '-10px',
top: '-5px',
color: (Highcharts.theme && Highcharts.theme.textColor) || 'black'
}
}]
},
series: [{
type: 'column',
name: 'John',
data: [3, 2, 1, 3, 4, 6, 7, 8, 7, 9, 6, 9]
},

{
type: 'line',
name: 'Total Needed',
data: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[1],
fillColor: 'white'
}

}, {
type: 'line',
name: 'Total Collected - Good example',
data: [3, 5, 7, 7, 9, 10.5, 11, 12, 12, 13, 14, 14],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[6],
fillColor: 'white'
}
}, {
type: 'line',
name: 'Total Collected - BAD example',
data: [1, 1, 2, 2, 3, 3, 4.5, 4.5, 6, 7, 7, 8],
marker: {
lineWidth: 2,
lineColor: Highcharts.getOptions().colors[3],
fillColor: 'white'
}
},

{
type: 'pie',
name: 'Contribution',
tooltip: {
pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
},
plotOptions: {
pie: {
allowPointSelect: true,
cursor: 'pointer',
dataLabels: {
enabled: true,
format: '<b>{point.name}</b>: {point.percentage:.1f} %',
style: {
color: (Highcharts.theme && Highcharts.theme.contrastTextColor) || 'black'
}
}
}
},
data: [{
name: 'John',
y: 25,
color: Highcharts.getOptions().colors[0] // John's color
}, {
name: 'Total',
y: 75,
color: Highcharts.getOptions().colors[1] // Other's color
}],
center: [45, 42],
size: 100,
showInLegend: false,
dataLabels: {
enabled: false,
format: '<b>{point.name}</b>: {point.percentage:.1f} %'
}
}]
});
});


Also see here: http://ift.tt/1IpjYsP


Aucun commentaire:

Enregistrer un commentaire