Filter data in line chart - Javascript highcharts

Javascript examples for highcharts:Line Chart

  1. HOME
  2. Javascript
  3. highcharts
  4. Line Chart

Description

Filter data in line chart

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script> 
      <script type="text/javascript">
$(function() {//www  . j a v  a2 s  .c o m
  var mod, bodyP, exist,
    series = [{
      name: 'CT ARM',
      mod: 'CT',
      data: [7.0, 6.9, 9.5],
      bodyPart: 'arm'
    }, {
      name: 'MRI BRAIN',
      mod: 'MRI',
      data: [-0.2, 0.8, 5.7],
      bodyPart: 'brain'
    }, {
      name: 'MRI WRIST',
      mod: 'MRI',
      data: [-0.9, 0.6, 3.5],
      bodyPart: 'wrist'
    }, {
      name: 'PET THYROID',
      mod: 'PET',
      data: [3.9, 4.2, 5.7],
      bodyPart: 'thyroid'
    }, {
      name: 'PET BRAIN',
      mod: 'PET',
      data: [1.9, 6.2, 2.7],
      bodyPart: 'brain'
    }, {
      name: 'PET HEART',
      mod: 'PET',
      data: [7.9, 1.2, 7],
      bodyPart: 'heart'
    }];
  $('#container').highcharts({
    series: []
  }, function(chart) {
    $('.mod').change(function() {
      mod = this.value;
      if (mod) {
        for (var i = chart.series.length - 1; i >= 0; i--) {
          if (!(chart.series[i].userOptions.mod == mod && (bodyP ? chart.series[i].userOptions.bodyPart == bodyP : true))) {
            chart.series[i].remove();
          }
        };
        Highcharts.each(series, function(p, i) {
          Highcharts.each(chart.series, function(ob, j) {
            if (ob.name == p.name) {
              exist = true;
            }
          })
          if (!exist && p.mod == mod && (bodyP ? p.bodyPart == bodyP : true)) {
            chart.addSeries(p);
          }
          exist = false;
        })
      }
    });
    $('.body').change(function() {
      bodyP = this.value;
      if (bodyP) {
        for (var i = chart.series.length - 1; i >= 0; i--) {
          if (!(chart.series[i].userOptions.bodyPart == bodyP && (mod ? chart.series[i].userOptions.mod == mod : true))) {
            chart.series[i].remove();
          }
        };
        Highcharts.each(series, function(p, i) {
          Highcharts.each(chart.series, function(ob, j) {
            if (ob.name == p.name) {
              exist = true
            }
          });
          if (!exist && p.bodyPart == bodyP && (mod ? p.mod == mod : true)) {
            chart.addSeries(p);
          }
          exist = false;
        })
      }
    });
  });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <select class="mod"> 
         <option value="">Mod</option> 
         <option value="CT">CT</option> 
         <option value="MRI">MRI</option> 
         <option value="PET">PET</option> 
      </select> 
      <select class="body"> 
         <option value="">bodyPart</option> 
         <option value="brain">brain</option> 
         <option value="arm">arm</option> 
         <option value="wrist">wrist</option> 
         <option value="thyroid">thyroid</option> 
         <option value="heart">heart</option> 
      </select> 
      <div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>  
   </body>
</html>

Related Tutorials