How can I hide and show a category in highcharts
I am trying to make a dynamic way for the user to switch highchart categories, I looked at this question which seemed to have what I was looking for, I added code to my page, changed a few things.
The problem is that when I hide the category (years) it changes the category number to the category position in the highchart and when I show it displays the data for that category but also adds a new category .. There is my http: // jsfiddle .net / antonioj1015 / 3pxbat0p /
$(function () {
var chart = new Highcharts.Chart({
chart: {
renderTo: 'container',
type: 'line'
},
title: {
text: 'Name',
x: -20 //center
},
subtitle: {
text: 'Source: ',
x: -20
},
xAxis: {
categories: ['2009','2010','2011']
},
yAxis: {
title: {
text: 'Porc (%)'
},
plotLines: [{
value: 0,
width: 1,
color: '#808080'
}]
},
tooltip: {
valueSuffix: '%'
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{ id: 'id09', name: '0-9', data: [0.29, 0.29, 0.26] },
{ id: 'id1019', name: '10-19', data: [0.96, 1.08, 0.87] },
{ id: 'id2029', name: '20-29', data: [2.55, 2.34, 1.68] },
{ id: 'id3039', name: '30-39', data: [5.37, 4.67, 4.04] },
{ id: 'id4049', name: '40-49', data: [14.60, 12.65, 11.52] },
{ id: 'id5059', name: '50-59', data: [27.02, 25.68, 25.00] },
{ id: 'id6069', name: '60-69', data: [26.16, 27.28, 28.48] },
{ id: 'id7079', name: '70-79', data: [16.99, 18.80, 20.33] },
{ id: 'id80omas', name: '80 o mas', data: [6.07, 7.21, 7.82] }]
});
$("#chkbox_2009").on("click", function(e){
var tmp_pl = $.trim($(this).data("val"));
var cat_name = $(this).data("val");
if($(this).is(":checked")){
var categories = chart.xAxis[0].categories;
categories.push(cat_name);
chart.xAxis[0].setCategories(categories);
chart.get("id09").addPoint(0.29);
chart.get("id1019").addPoint(0.96);
chart.get("id2029").addPoint(2.55);
chart.get("id3039").addPoint(5.37);
chart.get("id4049").addPoint(14.60);
chart.get("id5059").addPoint(27.02);
chart.get("id6069").addPoint(26.16);
chart.get("id7079").addPoint(16.99);
chart.get("id80omas").addPoint(6.07);
chart.redraw();
} else {
var cat;
var data_series = [];
$.each(chart.series, function(sKey, sVal){
var j = sVal.data.length - 1;
var isRemoved = false;
var dt;
while(!isRemoved && j >= 0) {
var dVal = sVal.data[j];
if (dVal.category === cat_name) {
dVal.remove();
sVal.xIncrement --;
isRemoved = true;
}
j--;
}
$.each(sVal.data, function(k,v){
v.update({
x: k
});
});
});
var categories = chart.xAxis[0].categories;
categories.splice( $.inArray(cat_name, categories), 1 );
chart.xAxis[0].setCategories(categories);
chart.redraw();
}
});
$("#chkbox_2010").on("click", function(e){
var tmp_pl = $.trim($(this).data("val"));
var cat_name = $(this).data("val");
if($(this).is(":checked")){
var categories = chart.xAxis[0].categories;
categories.push(cat_name);
chart.xAxis[0].setCategories(categories);
chart.get("id09").addPoint(0.29);
chart.get("id1019").addPoint(1.08);
chart.get("id2029").addPoint(2.34);
chart.get("id3039").addPoint(4.67);
chart.get("id4049").addPoint(12.65);
chart.get("id5059").addPoint(25.68);
chart.get("id6069").addPoint(27.28);
chart.get("id7079").addPoint(18.80);
chart.get("id80omas").addPoint(7.21);
chart.redraw();
} else {
var cat;
var data_series = [];
$.each(chart.series, function(sKey, sVal){
var j = sVal.data.length - 1;
var isRemoved = false;
var dt;
while(!isRemoved && j >= 0) {
var dVal = sVal.data[j];
if (dVal.category === cat_name) {
dVal.remove();
sVal.xIncrement --;
isRemoved = true;
}
j--;
}
$.each(sVal.data, function(k,v){
v.update({
x: k
});
});
});
var categories = chart.xAxis[0].categories;
categories.splice( $.inArray(cat_name, categories), 1 );
chart.xAxis[0].setCategories(categories);
chart.redraw();
}
});
$("#chkbox_2011").on("click", function(e){
var tmp_pl = $.trim($(this).data("val"));
var cat_name = $(this).data("val");
if($(this).is(":checked")){
var categories = chart.xAxis[0].categories;
categories.push(cat_name);
chart.xAxis[0].setCategories(categories);
chart.get("id09").addPoint(0.26);
chart.get("id1019").addPoint(0.87);
chart.get("id2029").addPoint(1.68);
chart.get("id3039").addPoint(4.04);
chart.get("id4049").addPoint(11.52);
chart.get("id5059").addPoint(25.00);
chart.get("id6069").addPoint(28.48);
chart.get("id7079").addPoint(20.33);
chart.get("id80omas").addPoint(7.82);
chart.redraw();
} else {
var cat;
var data_series = [];
$.each(chart.series, function(sKey, sVal){
var j = sVal.data.length - 1;
var isRemoved = false;
var dt;
while(!isRemoved && j >= 0) {
var dVal = sVal.data[j];
if (dVal.category === cat_name) {
dVal.remove();
sVal.xIncrement --;
isRemoved = true;
}
j--;
}
$.each(sVal.data, function(k,v){
v.update({
x: k
});
});
});
var categories = chart.xAxis[0].categories;
categories.splice( $.inArray(cat_name, categories), 1 );
chart.xAxis[0].setCategories(categories);
chart.redraw();
}
});});
Thank!!
+3
source to share
1 answer
Entered into category settings, etc., you can catch the checkbox event and show / hide a specific SVG element.
var $check,
val;
$('input[name="cat"]').click(function(){
$check = $(this);
val = $check.val();
$.each(chart.xAxis[0].ticks, function(i, tick){
if(tick.label && tick.label.textStr == val){
$check.is(':checked') ? tick.label.show() : tick.label.hide();
}
});
});
0
source to share