Related
I computed a graph in Highcharts which words perfectly well in any browser but internet explorer (see https://jsfiddle.net/statistik_tg/e69Lp3cv/). I had to add a drill down and drill up as the main chart and the drilled down chart include other metrics. Since then, it hasn't been working in IE.
Does anybody know asolution to let the code run in IE, too? Thanks in advance!
$(document).ready(function() {
var chart = {
type: 'column',
marginBottom: 220,
spacingBottom: 85,
events: {
drilldown: function (e) {
if (!e.seriesOptions) {
var chart = this,
drilldowns = {
'Thurgau': {
name: 'Übrige',
color: '#878787',
data: [
['2009', 106],
['2010', 107],
['2011', 102],
['2012', 102],
['2013', 100],
['2014', 102],
['2015', 107],
['2016', 120],
['2017', 121]
]
}
},
drilldowns2 = {
'Thurgau': {
name: 'Phyisotherapie',
color: '#B5B5B5',
data: [
['2009', 79],
['2010', 83],
['2011', 82],
['2012', 85],
['2013', 89],
['2014', 103],
['2015', 115],
['2016', 128],
['2017', 132]
]
}
},
drilldowns3 = {
'Thurgau': {
name: 'Laboratorien',
color: '#E39E00',
data: [
['2009', 42],
['2010', 43],
['2011', 45],
['2012', 48],
['2013', 55],
['2014', 57],
['2015', 63],
['2016', 69],
['2017', 73]
]
}
},
drilldowns4 = {
'Thurgau': {
name: 'Spitex',
color: '#CD3700',
data: [
['2009', 48],
['2010', 49],
['2011', 53],
['2012', 58],
['2013', 62],
['2014', 68],
['2015', 75],
['2016', 80],
['2017', 83]
]
}
},
drilldowns5 = {
'Thurgau': {
name: 'Pflegeheime',
color: '#8B0000',
data: [
['2009', 192],
['2010', 186],
['2011', 182],
['2012', 182],
['2013', 179],
['2014', 169],
['2015', 171],
['2016', 175],
['2017', 173]
]
}
},
drilldowns6 = {
'Thurgau': {
name: 'Apotheken',
color: '#FFED00',
data: [
['2009', 119],
['2010', 121],
['2011', 126],
['2012', 136],
['2013', 141],
['2014', 145],
['2015', 159],
['2016', 178],
['2017', 188]
]
}
},
drilldowns7 = {
'Thurgau': {
name: 'Ärzte Laboranalysen',
color: '#00B4E8',
data: [
['2009', 52],
['2010', 45],
['2011', 46],
['2012', 47],
['2013', 51],
['2014', 54],
['2015', 58],
['2016', 61],
['2017', 62]
]
}
},
drilldowns8 = {
'Thurgau': {
name: 'Ärzte Medikamente',
color: '#0064e6',
data: [
['2009', 339],
['2010', 331],
['2011', 327],
['2012', 329],
['2013', 335],
['2014', 330],
['2015', 342],
['2016', 361],
['2017', 369]
]
}
},
drilldowns9 = {
'Thurgau': {
name: 'Ärzte Behandlung (ohne Labor)',
color: '#27408B',
data: [
['2009', 477],
['2010', 490],
['2011', 509],
['2012', 521],
['2013', 563],
['2014', 586],
['2015', 632],
['2016', 646],
['2017', 655]
]
}
},
drilldowns10 = {
'Thurgau': {
name: 'Spital ambulant',
color: '#a2c510',
data: [
['2009', 474],
['2010', 481],
['2011', 524],
['2012', 533],
['2013', 579],
['2014', 597],
['2015', 602],
['2016', 658],
['2017', 675]
]
}
},
drilldowns11 = {
'Thurgau': {
name: 'Spital stationär',
color: '#3CA433',
data: [
['2009', 724],
['2010', 733],
['2011', 736],
['2012', 727],
['2013', 874],
['2014', 865],
['2015', 844],
['2016', 833],
['2017', 793]
]
}
},
series = drilldowns[e.point.name],
series2 = drilldowns2[e.point.name];
series3 = drilldowns3[e.point.name];
series4 = drilldowns4[e.point.name];
series5 = drilldowns5[e.point.name];
series6 = drilldowns6[e.point.name];
series7 = drilldowns7[e.point.name];
series8 = drilldowns8[e.point.name];
series9 = drilldowns9[e.point.name];
series10 = drilldowns10[e.point.name];
series11 = drilldowns11[e.point.name];
chart.addSingleSeriesAsDrilldown(e.point, series);
chart.addSingleSeriesAsDrilldown(e.point, series2);
chart.addSingleSeriesAsDrilldown(e.point, series3);
chart.addSingleSeriesAsDrilldown(e.point, series4);
chart.addSingleSeriesAsDrilldown(e.point, series5);
chart.addSingleSeriesAsDrilldown(e.point, series6);
chart.addSingleSeriesAsDrilldown(e.point, series7);
chart.addSingleSeriesAsDrilldown(e.point, series8);
chart.addSingleSeriesAsDrilldown(e.point, series9);
chart.addSingleSeriesAsDrilldown(e.point, series10);
chart.addSingleSeriesAsDrilldown(e.point, series11);
chart.applyDrilldown();
chart.yAxis[0].update({
min: 0,
max: 4000
})
}
},
drillup(){
this.yAxis[0].update({
min: 0,
max: 100
})
}
}
};
var plotOptions = {
column: {
stacking: 'normal'
}
};
var title = {
text: "Fast die Hälfte der Kosten im Kanton Thurgau für Spitalbehandlungen",
style: {
fontSize: '18px',
},
align: 'left'
};
var subtitle = {
text: 'Struktur der Bruttokosten nach Kostengruppe, Kanton Thurgau und Schweiz, 2017, Anteile in %/CHF pro versicherte Person¹',
style: {
fontSize: '12px'
},
align: 'left'
};
var yAxis = {
gridLineWidth: 1,
title: '',
lineWidth: 1,
max: 100
};
var xAxis = {
type: 'category'
};
var tooltip = {
valueSuffix: ' CHF'
};
var series = [{
name: 'Übrige',
tooltip: {
valueSuffix: ' %'
},
color: '#878787',
data: [{
name: 'Thurgau',
y: 3.7,
drilldown: true
},{
name: 'Schweiz',
y: 3.5,
drilldown: false
}]
},{
name: 'Physiotherapie',
tooltip: {
valueSuffix: ' %'
},
color: '#B5B5B5',
data: [{
name: 'Thurgau',
y: 4.0,
drilldown: true
},{
name: 'Schweiz',
y: 3.1,
drilldown: false
}]
},{
name: 'Laboratorien',
color: '#E39E00',
tooltip: {
valueSuffix: ' %'
},
data: [{
name: 'Thurgau',
y: 2.2,
drilldown: true
},{
name: 'Schweiz',
y: 2.8,
drilldown: false
}]
},{
name: 'Spitex',
color: '#CD3700',
tooltip: {
valueSuffix: ' %'
},
data: [{
name: 'Thurgau',
y: 2.5,
drilldown: true
},{
name: 'Schweiz',
y: 2.7,
drilldown: false
}]
},{
name: 'Pflegeheime',
tooltip: {
valueSuffix: ' %'
},
color: '#8B0000',
data: [{
name: 'Thurgau',
y: 5.2,
drilldown: true
},{
name: 'Schweiz',
y: 5.7,
drilldown: false
}]
},{
name: 'Apotheken',
tooltip: {
valueSuffix: ' %'
},
color: '#FFED00',
data: [{
name: 'Thurgau',
y: 5.7,
drilldown: true
},{
name: 'Schweiz',
y: 11.8,
drilldown: false
}]
},{
name: 'Ärzte Laboranalysen',
tooltip: {
valueSuffix: ' %'
},
color: '#00B4E8',
data: [{
name: 'Thurgau',
y: 1.9,
drilldown: true
},{
name: 'Schweiz',
y: 1.7,
drilldown: false
}]
},{
name: 'Ärzte Medikamente',
tooltip: {
valueSuffix: ' %'
},
color: '#0064e6',
data: [{
name: 'Thurgau',
y: 11.1,
drilldown: true
},{
name: 'Schweiz',
y: 6.3,
drilldown: false
}]
},{
name: 'Ärzte Behandlungen (ohne Labor)',
tooltip: {
valueSuffix: ' %'
},
color: '#27408B',
data: [{
name: 'Thurgau',
y: 19.7,
drilldown: true
},{
name: 'Schweiz',
y: 22.6,
drilldown: false
}]
},{
name: 'Spital ambulant',
tooltip: {
valueSuffix: ' %'
},
color: '#a2c510',
data: [{
name: 'Thurgau',
y: 20.3,
drilldown: true
},{
name: 'Schweiz',
y: 19.1,
drilldown: false
}]
},{
name: 'Spital stationär',
tooltip: {
valueSuffix: ' %'
},
color: '#3CA433',
data: [{
name: 'Thurgau',
y: 23.8,
drilldown: true
},{
name: 'Schweiz',
y: 20.7,
drilldown: false
}]
}];
var drilldown = {
series: []
};
var legend = {
layout: 'horizontal',
align: 'center',
verticalAlign: 'bottom',
padding: 25,
symbolPadding: 10,
symbolWidth: 25,
margin: -10,
/*maxHeight: 150,*/
alignColumns: false,
reversed: false,
itemStyle: {
fontWeight: 'normal'
}
};
var credits = {
text: '<b>Hinweis: Für den Vergleich der Kostenanteile im Kanton Thurgau von 2009-2017 klicken Sie <br><b>auf den Balken oder die Balkenbeschriftung zum Thurgau<br>¹ Vergleich Thurgau-Schweiz Anteile in %, Vergleich Thurgau 2009-2017 Anteile in CHF<br>Dienststelle für Statistik Kanton Thurgau <br>Datenquellen: Bundesamt für Gesundheit, Monitoring der Krankenversicherungs-<br>Kostenentwicklung',
href: false,
style: {
color:'#999999',
cursor: false,
fontSize:'10px'
},
position: {
align: 'left',
x: 10,
y: -90
}
};
var exporting = {
allowHTML: true,
enabled: true,
filename:'2019_07_Krankenversicherungskosten_Brutto_2017',
buttons: {
contextButton: {
menuItems: "printChart separator downloadPNG downloadJPEG downloadSVG".split(" ")
}
},
/*csv: {
columnHeaderFormatter: function (item) {
if(item instanceof Highcharts.Axis) {
return 'Quartal';
} else {
if(item instanceof Highcharts.Series) {
return item.name;
}
}
}
}*/
};
var responsive = {
rules: [{
condition: {
maxWidth: 500
},
chartOptions: {
legend: {
enabled: false
}
}
}]
};
var highchartsOptions = Highcharts.setOptions ({
lang: {
decimalPoint: '.',
thousandsSep: "'",
months: ['Januar', 'Februar', 'März', 'April', 'Mai', 'Juni', 'Juli', 'August', 'September', 'Oktober', 'November', 'Dezember'],
weekdays: ['Sonntag', 'Montag', 'Dienstag', 'Mittwoch', 'Donnerstag', 'Freitag', 'Samstag'],
shortMonths: ['Jan', 'Feb', 'Mrz', 'Apr', 'Mai', 'Jun', 'Jul', 'Aug', 'Sep', 'Okt', 'Nov', 'Dez'],
contextButtonTitle: 'Drucken, Download, Export',
downloadJPEG: 'Download JPEG Bild',
downloadPNG: 'Download PNG Bild',
downloadSVG: 'Download SVG Vektor Bild',
downloadXLS: 'Download XLS',
printChart: 'Bild drucken',
viewData: 'Datentabelle ein-/ausblenden',
resetZoom: "Zoom zurücksetzen",
resetZoomTitle: "Zoom zurücksetzen",
drillUpText: "Zurück",
numericSymbols: null //otherwise by default ['k', 'M', 'G', 'T', 'P', 'E']
}
});
colors = ["#878787","#B5B5B5","#E39E00","#CD3700","#8B0000","#3CA433","#a2c510","#FFED00","#00B4E8","#0064e6","#27408B"]
var json = {};
json.chart = chart;
json.plotOptions = plotOptions;
json.title = title;
json.subtitle = subtitle;
json.yAxis = yAxis;
json.xAxis = xAxis;
json.tooltip = tooltip;
json.series = series;
json.drilldown = drilldown;
json.legend = legend;
json.credits = credits;
json.exporting = exporting;
json.responsive = responsive;
json.highchartsOptions = highchartsOptions;
json.colors = colors;
$('#2019_07_Krankenversicherungskosten_Brutto_2017').highcharts(json);
});
There is an error in IE developer tools console - you need to change JS line 230 from this:
drillup(){
into this:
drillup: function() {
and then it works fine in IE11
In a Highcharts line chart, I need to put the series name on the right of the last point of each one.
Unfortunately, even if I set chart.spacingRight and chart.marginRight, the space on the right is not used.
Is there any solution/workaround?
Jsfiddle
Highcharts.chart('container', {
chart: {
spacingRight: 200
},
plotOptions: {
series: {
label: {
enabled:false
},
pointStart: 2010,
dataLabels: {
enabled:true,
align:'left',
verticalAlign:'middle',
x:10,
formatter: function() {
return this.series.data.indexOf( this.point ) == this.series.data.length - 1 ? this.series.name : '';
}
}
}
},
series: [{
name: 'Installation',
data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
}, {
name: 'Manufacturing',
data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
}, {
name: 'Sales & Distribution',
data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
}, {
name: 'Project Development',
data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
}, {
name: 'Other',
data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
}],
});
You can do that with dataLabels.crop:false and dataLabels.overflow: 'allow'
dataLabels: {
overflow: 'allow',
crop:false,
...
Api documentation currently broken, so impossible to put the real link
Fiddle
I am trying to get the labels on the stacked bar graphs. The stack type in this is either male/female and I would like show that on the chart. Is there anyway to show it ?
Here is the link
https://jsfiddle.net/jq2e51Lx/
Here is the html:
<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>
Javascript
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas']
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
}
},
tooltip: {
formatter: function () {
return '<b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male'
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
stack: 'male'
}, {
name: 'Jane',
data: [2, 5, 6, 2, 1],
stack: 'female'
}, {
name: 'Janet',
data: [3, 0, 4, 4, 3],
stack: 'female'
}]
});
The OP wrote in a comment:
Thank you so much !, Works like a charm :)
Based on fiddle sample by #Barbara Laird
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Total fruit consumtion, grouped by gender'
},
xAxis: {
categories: ['Apples', 'Oranges', 'Pears', 'Grapes', 'Bananas'],
labels: {
y: 40
}
},
yAxis: {
allowDecimals: false,
min: 0,
title: {
text: 'Number of fruits'
},
stackLabels: {
enabled: true,
verticalAlign: 'bottom',
crop: false,
overflow: 'none',
y: 20,
formatter: function() {
return this.stack;
},
style: {
fontSize: '9px'
}
}
},
legend: {
labelFormatter: function() {
return this.name + ' (' + this.userOptions.stack + ')';
}
},
tooltip: {
formatter: function() {
var stackName = this.series.userOptions.stack;
return '<b>Stack name: </b>' + stackName + '<br/><b>' + this.x + '</b><br/>' +
this.series.name + ': ' + this.y + '<br/>' +
'Total: ' + this.point.stackTotal;
}
},
plotOptions: {
column: {
stacking: 'normal'
}
},
series: [{
name: 'John',
data: [5, 3, 4, 7, 2],
stack: 'male'
}, {
name: 'Joe',
data: [3, 4, 4, 2, 5],
stack: 'male'
}, {
name: 'Jane',
data: [2, 5, 6, 2, 1],
stack: 'female'
}, {
name: 'Janet',
data: [3, 0, 4, 4, 3],
stack: 'female'
}]
});
<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 have used Column with drilldown highchart.
and its drilldown is
I am getting the right output in its drilldown but I don't want PlotLine to be visible in the first image. How do I solve this?
$(document).ready(function () { });
angular.module('myModule', []).service("AttendanceService", function ($http) {
this.getdata = function () {
return $http({
method: "post",
url: "GetAttendanceReport",
params: [{ EmpID: $("#nameofEmp").val(), YearID: $("#YearIn").val() }],
dataType: "json"
});
};
}).controller('myController', function ($scope,AttendanceService) {
GetAlldata();
function GetAlldata() {
var getAttendanceData = AttendanceService.getdata();
getAttendanceData.then(function (Attendances) {
Highcharts.chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Attendance Report' + ' ' + $("#YearIn option:selected").text()
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Total Attendance Recorded'
},
plotLines: [{
value: 8,
color: '#ff0000',
width: 2,
zIndex: 4,
label: { text: 'goal' },
}],
},
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.2f}'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}mins</b> of total<br/>'
},
series: [{
name: 'Attendance',
colorByPoint: true,
data: [{
name: 'Jan',
y: Attendances.data.YearlyReport[0],
drilldown: 'Jan'
}, {
name: 'Feb',
y: Attendances.data.YearlyReport[1],
drilldown: 'Feb'
}, {
name: 'March',
y: Attendances.data.YearlyReport[2],
drilldown: 'March'
}, {
name: 'April',
y: Attendances.data.YearlyReport[3],
drilldown: 'April'
}, {
name: 'May',
y: Attendances.data.YearlyReport[4],
drilldown: 'May'
}, {
name: 'June',
y: Attendances.data.YearlyReport[5],
drilldown: 'June'
}, {
name: 'July',
y: Attendances.data.YearlyReport[6],
drilldown: 'July'
}, {
name: 'Aug',
y: Attendances.data.YearlyReport[7],
drilldown: 'Aug'
}, {
name: 'Sep',
y: Attendances.data.YearlyReport[8],
drilldown: 'Sep'
}, {
name: 'Oct',
y: Attendances.data.YearlyReport[9],
drilldown: 'Oct'
}, {
name: 'Nov',
y: Attendances.data.YearlyReport[10],
drilldown: 'Nov'
}, {
name: 'Dec',
y: Attendances.data.YearlyReport[11],
drilldown: 'Dec'
}]
}],
drilldown: {
series:
[{
name: 'Jan',
id: 'Jan',
data: [
[
'1',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 1])
],
[
'2',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 2])
],
[
'3',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 3])
],
[
'4',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 4])
],
[
'5',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 5])
],
[
'6',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 6])
],
[
'7',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 7])
],
[
'8',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 8])
],
[
'9',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 9])
],
[
'10',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 10])
],
[
'11',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 11])
],
[
'12',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 12])
],
[
'13',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 13])
],
[
'14',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 14])
],
[
'15',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 15])
],
[
'16',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 16])
],
[
'17',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 17])
],
[
'18',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 18])
],
[
'19',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 19])
],
[
'20',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 20])
],
[
'21',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 21])
],
[
'22',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 22])
],
[
'23',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 23])
],
[
'24',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 24])
],
[
'25',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 25])
],
[
'26',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 26])
],
[
'27',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 27])
],
[
'28',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 28])
],
[
'29',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 29])
],
[
'30',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 30])
],
[
'31',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 31])
]
]},and so on]
}
});
}, function () {
alert('Error in getting records');
});
} $("#btnLoad").click(function (event) {
GetAlldata();
});
$("#btnBack").click(function (event) {
window.location.href = "homepage";
});
});
This is the full code I have used.
You could remove and add plotLine dynamically when drilling down or up.
Example: http://jsfiddle.net/a5yzsarx/
$(function() {
$('#container').highcharts({
chart: {
events: {
drilldown: function() {
this.xAxis[0].removePlotLine('p1');
},
drillup: function() {
this.xAxis[0].addPlotLine({
id: 'p1',
value: 8,
color: '#ff0000',
width: 2,
zIndex: 4,
label: {
text: 'goal'
}
});
}
}
},
series: [{
type: 'column',
data: [{
y: 42,
drilldown: 's2'
}]
}],
drilldown: {
series: [{
id: 's2',
data: [1, 2, 3]
}]
},
yAxis: {
plotLines: [{
id: 'p1',
value: 8,
color: '#ff0000',
width: 2,
zIndex: 4,
label: {
text: 'goal'
}
}]
}
});
});
I have my highchart below
what I want is to colour those columns with some different colour which are having the value exactly 8.00
here is my code
$(document).ready(function () { });
angular.module('myModule', []).service("AttendanceService", function ($http) {
this.getdata = function () {
return $http({
method: "post",
url: "GetAttendanceReport",
params: [{ EmpID: $("#nameofEmp").val(), YearID: $("#YearIn").val() }],
dataType: "json"
});
};
}).controller('myController', function ($scope,AttendanceService) {
GetAlldata();
function GetAlldata() {
var getAttendanceData = AttendanceService.getdata();
getAttendanceData.then(function (Attendances) {
Highcharts.chart('container', {
chart: {
type: 'column',
events: {
drilldown: function () {
this.yAxis[0].addPlotLine({
id: 'p1',
value: 8,
color: '#ff0000',
width: 2,
zIndex: 4,
label: {
text: 'goal'
}
})
},
drillup: function () {
this.yAxis[0].removePlotLine('p1');
}
},
}
title: {
text: 'Attendance Report' + ' ' + $("#YearIn option:selected").text()
},
xAxis: {
type: 'category'
},
yAxis: {
title: {
text: 'Total Attendance Recorded',
plotLines: [{
id: 'p1',
value: 8,
color: '#ff0000',
width: 2,
zIndex: 4,
label: {
text: 'goal'
}
}]
},
}
legend: {
enabled: false
},
plotOptions: {
series: {
borderWidth: 0,
dataLabels: {
enabled: true,
format: '{point.y:.2f}'
}
}
},
tooltip: {
headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}mins</b> of total<br/>'
},
series: [{
name: 'Attendance',
colorByPoint: true,
data: [{
name: 'Jan',
y: Attendances.data.YearlyReport[0],
drilldown: 'Jan'
}, {
name: 'Feb',
y: Attendances.data.YearlyReport[1],
drilldown: 'Feb'
}, {
name: 'March',
y: Attendances.data.YearlyReport[2],
drilldown: 'March'
}, {
name: 'April',
y: Attendances.data.YearlyReport[3],
drilldown: 'April'
}, {
name: 'May',
y: Attendances.data.YearlyReport[4],
drilldown: 'May'
}, {
name: 'June',
y: Attendances.data.YearlyReport[5],
drilldown: 'June'
}, {
name: 'July',
y: Attendances.data.YearlyReport[6],
drilldown: 'July'
}, {
name: 'Aug',
y: Attendances.data.YearlyReport[7],
drilldown: 'Aug'
}, {
name: 'Sep',
y: Attendances.data.YearlyReport[8],
drilldown: 'Sep'
}, {
name: 'Oct',
y: Attendances.data.YearlyReport[9],
drilldown: 'Oct'
}, {
name: 'Nov',
y: Attendances.data.YearlyReport[10],
drilldown: 'Nov'
}, {
name: 'Dec',
y: Attendances.data.YearlyReport[11],
drilldown: 'Dec'
}]
}],
drilldown: {
series:
[{
name: 'Jan',
id: 'Jan',
data: [
[
'1',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 1])
],
[
'2',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 2])
],
[
'3',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 3])
],
[
'4',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 4])
],
[
'5',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 5])
],
[
'6',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 6])
],
[
'7',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 7])
],
[
'8',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 8])
],
[
'9',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 9])
],
[
'10',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 10])
],
[
'11',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 11])
],
[
'12',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 12])
],
[
'13',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 13])
],
[
'14',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 14])
],
[
'15',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 15])
],
[
'16',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 16])
],
[
'17',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 17])
],
[
'18',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 18])
],
[
'19',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 19])
],
[
'20',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 20])
],
[
'21',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 21])
],
[
'22',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 22])
],
[
'23',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 23])
],
[
'24',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 24])
],
[
'25',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 25])
],
[
'26',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 26])
],
[
'27',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 27])
],
[
'28',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 28])
],
[
'29',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 29])
],
[
'30',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 30])
],
[
'31',
parseFloat(Attendances.data.MonthlyReport[1 * 33 + 31])
]
]},and so on]
}
});
}, function () {
alert('Error in getting records');
});
} $("#btnLoad").click(function (event) {
GetAlldata();
});
$("#btnBack").click(function (event) {
window.location.href = "homepage";
});
});
I have used Column with drilldown highchart. Is there any way??
You can directly pass an attribute color the the datapoint of your series like this:
color: '#00ff00'
You then just need to cycle through your data and replace those point's color.
JsFiddle
You may find this question elsewhere on Stack Overflow helpful: Highcharts Change Bar Color Based on Value. Please refer to the accepted answer, which has code to iterate over the series and color them based on their value.