javascript - HighStock hiding specific series and axes based on checkboxes -
i have datatable has column of checkboxes. highstock chart. i'm trying make when corresponding checkbox in datatable checked, shows/hides appropriate series line on chart axis line using.
table:
<div class="panel-body"> <table id="data-table" class="table table-striped table-bordered nowrap" width="100%"> <thead> <tr> <th>list</th> <th class="all">foods</th> <th class="all"><input name="select_all" value="1" type="checkbox"></th> </tr> </thead> <tbody> <tr class="odd gradex"> <td>1</td> <td>apples</td> <td><input type="checkbox" id="name1" /></td> </tr> <tr class="odd gradex"> <td>2</td> <td>oranges</td> <td><input type="checkbox" id="name2" /></td> </tr> <tr class="odd gradex"> <td>3</td> <td>pears</td> <td><input type="checkbox" id="name3" /></td> </tr> </tbody> </table> </div> highstock:
var seriesoptions = [], seriescounter = 0, names = ['msft', 'aapl', 'goog']; /** * create chart when data loaded * @returns {undefined} */ function createchart() { highcharts.stockchart('container', { alignticks: false, rangeselector: { selected: 4 }, yaxis: [{ // primary yaxis tickamount: 8, tickinterval: 1, offset: 26, labels: { format: '{value}apples', style: { color: highcharts.getoptions().colors[2] } }, title: { text: 'apples', style: { color: highcharts.getoptions().colors[2] } }, opposite: true, min: 0, max: 100, }, { // secondary yaxis tickamount: 8, tickinterval: 1, title: { text: 'pears', style: { color: highcharts.getoptions().colors[0] } }, labels: { format: '{value} pears', style: { color: highcharts.getoptions().colors[0] } }, id: 'pears-axis', opposite: true, min: 0, max: 25, }, { // tertiary yaxis tickamount: 8, gridlinewidth: 0, title: { text: 'oranges', style: { color: highcharts.getoptions().colors[1] } }, labels: { format: '{value} oranges', style: { color: highcharts.getoptions().colors[1] } }, opposite: true, id: 'orange-axis', min: 0, max: 100, }], plotoptions: { series: { compare: '', showinnavigator: true } }, tooltip: { pointformat: '<span style="color:{series.color}">{series.name}</span>: <b>{point.y}</b> ({point.change}%)<br/>', valuedecimals: 2, split: true }, series: [{ name: 'pears', type: 'spline', yaxis: 1, data: [ [date.parse('05/30/2017 13:30:00'), 24], [date.parse('05/30/2017 13:45:00'), 24], [date.parse('05/30/2017 14:00:00'), 24], [date.parse('05/30/2017 14:15:00'), 24], [date.parse('05/30/2017 14:30:00'), 24], [date.parse('05/30/2017 14:45:00'), 24], [date.parse('05/30/2017 15:00:00'), 24], [date.parse('05/30/2017 15:15:00'), 24], [date.parse('05/30/2017 15:30:00'), 24], [date.parse('05/30/2017 15:45:00'), 24], [date.parse('05/30/2017 16:00:00'), 24], [date.parse('05/30/2017 16:15:00'), 24] ], tooltip: { valuesuffix: ' v' } }, { name: 'oranges', type: 'spline', yaxis: 2, data: [ [date.parse('05/30/2017 13:30:00'), 20], [date.parse('05/30/2017 13:45:00'), 30], [date.parse('05/30/2017 14:00:00'), 40], [date.parse('05/30/2017 14:15:00'), 50], [date.parse('05/30/2017 14:30:00'), 60], [date.parse('05/30/2017 14:45:00'), 60], [date.parse('05/30/2017 15:00:00'), 60], [date.parse('05/30/2017 15:15:00'), 60], [date.parse('05/30/2017 15:30:00'), 70], [date.parse('05/30/2017 15:45:00'), 76], [date.parse('05/30/2017 16:00:00'), 78], [date.parse('05/30/2017 16:15:00'), 80] ], marker: { enabled: false }, dashstyle: 'shortdot', tooltip: { valuesuffix: ' %' } }, { name: 'apples', type: 'spline', yaxis: 0, data: [ [date.parse('05/30/2017 13:30:00'), 70], [date.parse('05/30/2017 13:45:00'), 70], [date.parse('05/30/2017 14:00:00'), 76], [date.parse('05/30/2017 14:15:00'), 75], [date.parse('05/30/2017 14:30:00'), 78], [date.parse('05/30/2017 14:45:00'), 72], [date.parse('05/30/2017 15:00:00'), 80], [date.parse('05/30/2017 15:15:00'), 73], [date.parse('05/30/2017 15:30:00'), 75], [date.parse('05/30/2017 15:45:00'), 78], [date.parse('05/30/2017 16:00:00'), 72], [date.parse('05/30/2017 16:15:00'), 73] ], tooltip: { valuesuffix: ' °f' } }] }); } $.each(names, function (i, name) { $.getjson('https://www.highcharts.com/samples/data/jsonp.php?filename=' + name.tolowercase() + '-c.json&callback=?', function (data) { seriesoptions[i] = { name: name, data: data }; // we're loading data asynchronously, don't know order arrive. // keep counter , create chart when data loaded. seriescounter += 1; if (seriescounter === names.length) { createchart(); } }); }); i tried using code make when oranges checkbox selected, hides line/series oranges, oranges axis, upon unchecking box, both reappear. instead, keeps adding oranges axis on , on no matter checking box or unchecking box. how go fixing situation?
$('#name2').click(function() { var chart = $('#container').highcharts(); var series = chart.series; var seriesindex = 0 if (this.selected) { series[seriesindex].hide(); chart.get('oranges-axis').remove(); } else { series[seriesindex].show(); chart.addaxis({ // tertiary yaxis tickamount: 8, gridlinewidth: 0, title: { text: 'oranges', style: { color: highcharts.getoptions().colors[1] } }, labels: { format: '{value} oranges', style: { color: highcharts.getoptions().colors[1] } }, opposite: true, id: 'orange-axis', min: 0, max: 100, }); } });
you not have remove specific yaxis each time click on checkbox. if series linked specific series, hiding series hide yaxis automatically if min or max not applied. if want set min , max property, can update yaxis.visible parameter toggle axis visibility. take @ example below.
api reference:
http://api.highcharts.com/highcharts/yaxis.visible
http://api.highcharts.com/highcharts/axis.update
example:
http://jsfiddle.net/o8kdrmed/
Comments
Post a Comment