javascript - Highcharts: Selecting single series from plot with multiple series -


i have plot similar 1 shown in js fiddle:

http://jsfiddle.net/r76kmsfr/

$(function () {     $('#container').highcharts({         legend: {             align: "left"         },         chart: {             type: 'spline'         },         title: {             text: 'snow depth @ vikjafjellet, norway'         },         subtitle: {             text: 'irregular time data in highcharts js'         },         xaxis: {             type: 'datetime',             datetimelabelformats: { // don't display dummy year                 month: '%e. %b',                 year: '%b'             },             title: {                 text: 'date'             }         },         yaxis: {             title: {                 text: 'snow depth (m)'             },             min: 0         },         tooltip: {             headerformat: '<b>{series.name}</b><br>',             pointformat: '{point.x:%e. %b}: {point.y:.2f} m'         },          plotoptions: {             spline: {                 marker: {                     enabled: true                 }             }         },          series: [{             name: "winter 2012-2013",             // define data points. series have dummy year             // of 1970/71 in order compared on same x axis. note             // in javascript, months start @ 0 january, 1 february etc.             data: [                 [date.utc(1970, 9, 21), 0],                 [date.utc(1970, 10, 4), 0.28],                 [date.utc(1970, 10, 9), 0.25],                 [date.utc(1970, 10, 27), 0.2],                 [date.utc(1970, 11, 2), 0.28],                 [date.utc(1970, 11, 26), 0.28],                 [date.utc(1970, 11, 29), 0.47],                 [date.utc(1971, 0, 11), 0.79],                 [date.utc(1971, 0, 26), 0.72],                 [date.utc(1971, 1, 3), 1.02],                 [date.utc(1971, 1, 11), 1.12],                 [date.utc(1971, 1, 25), 1.2],                 [date.utc(1971, 2, 11), 1.18],                 [date.utc(1971, 3, 11), 1.19],                 [date.utc(1971, 4, 1), 1.85],                 [date.utc(1971, 4, 5), 2.22],                 [date.utc(1971, 4, 19), 1.15],                 [date.utc(1971, 5, 3), 0]             ]         }, {             name: "winter 2013-2014",             data: [                 [date.utc(1970, 9, 29), 0],                 [date.utc(1970, 10, 9), 0.4],                 [date.utc(1970, 11, 1), 0.25],                 [date.utc(1971, 0, 1), 1.66],                 [date.utc(1971, 0, 10), 1.8],                 [date.utc(1971, 1, 19), 1.76],                 [date.utc(1971, 2, 25), 2.62],                 [date.utc(1971, 3, 19), 2.41],                 [date.utc(1971, 3, 30), 2.05],                 [date.utc(1971, 4, 14), 1.7],                 [date.utc(1971, 4, 24), 1.1],                 [date.utc(1971, 5, 10), 0]             ]         }, {             name: "winter 2014-2015",             data: [                 [date.utc(1970, 10, 25), 0],                 [date.utc(1970, 11, 6), 0.25],                 [date.utc(1970, 11, 20), 1.41],                 [date.utc(1970, 11, 25), 1.64],                 [date.utc(1971, 0, 4), 1.6],                 [date.utc(1971, 0, 17), 2.55],                 [date.utc(1971, 0, 24), 2.62],                 [date.utc(1971, 1, 4), 2.5],                 [date.utc(1971, 1, 14), 2.42],                 [date.utc(1971, 2, 6), 2.74],                 [date.utc(1971, 2, 14), 2.62],                 [date.utc(1971, 2, 24), 2.6],                 [date.utc(1971, 3, 2), 2.81],                 [date.utc(1971, 3, 12), 2.63],                 [date.utc(1971, 3, 28), 2.77],                 [date.utc(1971, 4, 5), 2.68],                 [date.utc(1971, 4, 10), 2.56],                 [date.utc(1971, 4, 15), 2.39],                 [date.utc(1971, 4, 20), 2.3],                 [date.utc(1971, 5, 5), 2],                 [date.utc(1971, 5, 10), 1.85],                 [date.utc(1971, 5, 15), 1.49],                 [date.utc(1971, 5, 23), 1.08]             ]         }]     }); });

what allow user click on 1 of these series, hide other series on plot. how do that?

example: clicking on black series hide green , blue series.

what need hide series in click , show show 1 clicked on. have included code need below , here fiddle . way show graph user clicks on. in addition have 'show all' button, redraws whole chart. hope helps.

plotoptions: {             spline: {                 marker: {                     enabled: true                 }             },              series: {                 cursor: 'pointer',                 events: {                     click: function (event) {                       var chart = $('#container').highcharts();                        $(chart.series).each(function(){                           this.setvisible(false, false);                       });                       this.show();                     }                 }             }         },

Comments

Post a Comment

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

i'm looking dynamically populate select element names of items stored array. for reason it's not working , i'm not sure why. html: <div class="col-md-4 col-md-offset-4"> <select class="select1"> </select> , <select class="select2"> </select> </div> note i'm using bootstrap layout. here's jquery i'm using try , populate ".select1" jquery: select: function() { $.each(state.greens, function(index, value) { $(".select1").append("<option value =' " + index + " '>" + state.greens[index].name + "</option>"); }); } note function 'select' stored within object called 'display'. state.greens name of array i'm trying access. so @ end of html page call display.select(); call function. no error messages showing in console. also, saw question: appending
Read more

Android soft keyboard reverts to default keyboard on orientation change -

i'm building android soft keyboard , can't seem fix bug - have arabic , qwerty keyboard , when rotate device on qwerty keyboard (or arabic shift), it's if program has "restarted" , becomes arabic keyboard without shift. the onsaveinstancestate(bundle savedinstancestate) not work because application not extend activity inputmethodservice . i put following in android manifest android:configchanges="keyboard|keyboardhidden|orientation" android:windowsoftinputmode="stateunchanged|adjustresize"> i tried using @override public void onconfigurationchanged(configuration newconfig) { super.onconfigurationchanged(newconfig); log.i(mydebug, "config changed " + currentkeyboard.equals(qwerty)); } however, currentkeyboard.equals(qwerty)) results false , made sure true before orientation change. any appreciated. i think applications fault. if application restarting on orientation change
Read more

jquery - javascript onscroll fade same class but with different div -

i new @ javascript , want learn new. there wrong code : why div fades @ same time. i want ask how fade different div s same class name.can me , explain me. thanks in advance. javascript: $(window).scroll(function(){ if ($( "div.fade" ).offset().top - $(window).scrolltop() <= 100){ $('.fade').addclass( "fade-in"); } else { $('.fade').removeclass("fade-in"); } }); here jsfiddle onscroll = function () { var scrolltop = $(this).scrolltop() ; $("div.fade").each(function(){ if(($(this).offset().top - scrolltop) <= 100){ $(this).toggleclass("fade-in"); } }) }
Read more