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