<script>
$(function () {
var chart;
$(document).ready(function() {
var colors = Highcharts.getOptions().colors,
categories = ['Total', 'Match'],
name = 'total vs match',
data = [{
y: {!! $countTotalRecord['total'] !!},
color: colors[0],
drilldown: {
name: '',
categories: ['Low Confidence', 'No Answer', 'Missing Intent', 'Webhook Fail'],
data: [{!! $countTotalRecord['low confidence'] !!}, {!! $countTotalRecord['no answer'] !!}, {!! $countTotalRecord['missing intent'] !!}, {!! $countTotalRecord['webhook fail'] !!}],
color: colors[0]
}
}, {
y: {!! $countTotalRecord['match'] !!},
color: colors[1]
}];
function setChart(options) {
chart.series[0].remove(false);
chart.addSeries({
type: options.type,
name: options.name,
data: options.data,
color: options.color || 'white'
}, false);
chart.xAxis[0].setCategories(options.categories, false);
chart.redraw();
}
chart = new Highcharts.Chart({
chart: {
renderTo: 'container'
},
title: {
text: 'Chart'
},
xAxis: {
categories: categories
},
yAxis: {
title: {
text: ''
}
},
plotOptions: {
series: {
cursor: 'pointer',
point: {
events: {
click: function() {
var drilldown = this.drilldown;
var options;
if (drilldown) { // drill down
options = {
'name': drilldown.name,
'categories': drilldown.categories,
'data': drilldown.data,
'color': drilldown.color,
'type': 'pie'
};
} else { // restore
options = {
'name': name,
'categories': categories,
'data': data,
'type': 'column'
};
}
setChart(options);
}
}
},
dataLabels: {
enabled: true,
style: {
fontWeight: 'bold'
},
formatter: function() {
return this.y;
}
}
}
},
tooltip: {
formatter: function() {
var point = this.point,
s = this.x +':<b>'+ this.y +'</b><br/>'+ this.percentage +'%<br/>';
if (point.drilldown) {
s += 'Click to view '+ point.category +' data';
} else {
s += 'Click to return';
}
return s;
}
},
series: [{
type: 'column',
name: name,
data: data,
color: 'white'
}],
credits:{
enabled:false
},
exporting: {
enabled: false
}
});
});
});
</script>
&#13;