How to use PlotLines only for drilldown option? - highcharts

Question

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.

Answer 1

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'
}
}]
}
});
});