select range of data to create Treemap charts? - Javascript highcharts

Javascript examples for highcharts:Chart Range

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

Description

select range of data to create Treemap charts?

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Treemap Demo</title> 
      <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> 
      <style id="compiled-css" type="text/css">

#container {//from   w ww .  j  a v  a2  s.com
   min-width: 300px;
   max-width: 600px;
   margin: 0 auto;
}


      </style> 
      <script type="text/javascript">
$(function() {
  var data = [{
    name: 'A',
    value: 6,
  }, {
    name: 'B',
    value: 6,
  }, {
    name: 'C',
    value: 4,
  }, {
    name: 'D',
    value: 3,
  }, {
    name: 'E',
    value: 2,
  }, {
    name: 'F',
    value: 2,
  }, {
    name: 'G',
    value: 1,
  }, {
    name: 'H',
    value: 10,
  }, {
    name: 'I',
    value: 1,
  }, {
    name: 'J',
    value: 4,
  }, {
    name: 'K',
    value: 3,
  }, {
    name: 'L',
    value: 2,
  }, {
    name: 'M',
    value: 6,
  }, {
    name: 'N',
    value: 8,
  }];
  $('.btn').click(function() {
    var from = parseInt($('.from')[0].value),
      to = parseInt($('.to')[0].value),
      newData = [];
    if (!isNaN(from) && !isNaN(to)) {
      Highcharts.each(data, function(p) {
        if (p.value >= from && p.value <= to) {
          newData.push(p);
        }
      });
      $('#container').highcharts({
        series: [{
          type: 'treemap',
          data: $.extend(true, [], newData)
        }],
      });
    }
  });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/heatmap.js"></script> 
      <script src="https://code.highcharts.com/modules/treemap.js"></script> 
      <div id="container"></div> 
      <form>
          from 
         <input type="text" class="from">
          To 
         <input type="text" class="to"> 
      </form> 
      <button class="btn"> make chart </button>  
   </body>
</html>

Related Tutorials