//JSON query
var json_data = [
{
"mip": {
"id": 125,
"name": "One",
"code": "One"
},
"briefNetSpendInEuro": 2200,
"postNetSpendInEuro": 0,
"proposalSpendInEuro": 3530
},
{
"mip": {
"id": 125,
"name": "Two",
"code": "Two"
},
"briefNetSpendInEuro": 12052,
"postNetSpendInEuro": 2516,
"proposalSpendInEuro": 5358
},
{
"mip": {
"id": 531,
"name": "Three",
"code": "Three"
},
"briefNetSpendInEuro": 5391,
"postNetSpendInEuro": 9812,
"proposalSpendInEuro": null
}
]
var categories = [];
var series = [];
var brief = [];
var post = [];
var proposal = [];
//JSON manipulation to prepare the data for the highchart
json_data.forEach(function(element) {
categories.push(element.mip.code);
brief.push(element.briefNetSpendInEuro = element.briefNetSpendInEuro || 0);
post.push(element.postNetSpendInEuro = element.postNetSpendInEuro || 0);
proposal.push(element.proposalSpendInEuro = element.proposalSpendInEuro || 0);
});
//Filter creation
$(function() {
var chart = new Highcharts.Chart('container', {
chart: {
type: 'column'
},
title: {
text: 'Spend per Media Group'
},
xAxis: {
categories: [{
"class": "One",
"name": "One"
}, {
"class": "Two",
"name": "Two"
}, {
"class": "Three",
"name": "Three"
}],
labels: {
formatter: function() {
return this.value.name;
},
useHTML: true
}
},
yAxis: {
min: 0,
title: {
text: 'Spend (EUR)'
}
},
tooltip: {
headerFormat: '<span style="font-size:10px">{point.key.name}</span><table>',
pointFormat: '<tr><td style="color:{series.color};padding:0">{series.name}: </td>' +
'<td style="padding:0"><b>{point.y:.,0f} </b></td></tr>',
footerFormat: '</table>',
shared: true,
useHTML: true
},
plotOptions: {
},
series: [{
name: 'Brief Net',
data: brief
}, {
name: 'Post Net',
data: post
}, {
name: 'Proposal',
data: proposal
}]
}, function() {
$('input[type=checkbox]').bind('click', function() {
togglePointsByClass(this.value, $(this).is(':checked'), chart)
});
});
var visibleArr = [0, 1, 2];
function togglePointsByClass(className, shouldShow, chart) {
var isChartDirty = false;
if (shouldShow) {
chart.xAxis[0].userOptions.categories.forEach(function(category, i) {
if (category.class === className) {
visibleArr.push(i);
}
});
} else {
chart.xAxis[0].userOptions.categories.forEach(function(category, i) {
if (category.class === className && visibleArr.indexOf(i) > -1) {
visibleArr.splice(visibleArr.indexOf(i), 1);
}
});
}
if (visibleArr.length) {
chart.xAxis[0].update({
min: Math.min.apply(null, visibleArr),
max: Math.max.apply(null, visibleArr)
})
}
}
$('#container').highcharts().redraw();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<div class="row">
<div class="col-xs-12">
<div class="box-first box-container">
<div class="row">
<div class="col-xs-4">
<input type="checkbox" name="One" value="One" checked> One
</div>
<div class="col-xs-4">
<input type="checkbox" name="Two" value="Two" checked> Two
</div>
<div class="col-xs-4">
<input type="checkbox" name="Three" value="Three" checked> Three
</div>
</div>
</div>
</div>
</div>
<div id="container" style="min-width: 310px; max-width: 800px; height: 400px; margin: 0 auto"></div>
