Selecting Points over multiple treemap chart - Javascript highcharts

Javascript examples for highcharts:Treemap Chart

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

Description

Selecting Points over multiple treemap 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://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
    $(window).load(function(){//  w  w  w .  j  a  v  a2  s  .co  m
$(function () {
    (function(H) {
    })(Highcharts)
    var prevPid = 0;
    var chart = {
        chart: {
             events: {
                load: function() {
                    $.each(this.series, function(i, s) {
                       $.each(s.data, function(j, p) {
                             p.pointAttr.select = {
                               fill: "red"
                            }
                       });
                    });
                }
            }
        },
        plotOptions: {
            series: {
                allowPointSelect: true,
                states: {
                    hover: {
                        brightness: 0.5
                    }
                },
                point: {
                    'events': {
                        select: function () {
                            var pId = this.series.data.indexOf(this);
                            var chart1 = $('#container').highcharts();
                            var chart2 = $('#container2').highcharts();
                            chart1.series[0].data[prevPid].setState('');
                            chart2.series[0].data[prevPid].setState('');
                            chart1.series[0].data[pId].setState('select');
                            chart2.series[0].data[pId].setState('select');
                            prevPid = pId;
                        }
                    }
                }
            }
        },
        series: [{
            type: "treemap",
            data: [{
                name: 'A',
                value: 6,
                colorValue: 1
            }, {
                name: 'B',
                value: 6,
                colorValue: 2
            }, {
                name: 'C',
                value: 4,
                colorValue: 3
            }]
        }]
    };
    $('#container').highcharts(chart);
    $('#container2').highcharts(chart);
});
    });

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.src.js"></script> 
      <script src="https://code.highcharts.com/modules/treemap.src.js"></script> 
      <div id="container" style="height: 400; width: 400px"></div> 
      <div id="container2" style="height: 400; width: 400px"></div>  
   </body>
</html>

Related Tutorials