Highmaps to have a seperate legend by different report? - Javascript highcharts

Javascript examples for highcharts:Chart Legend

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

Description

Highmaps to have a seperate legend by different report?

Demo Code

ResultView the demo in separate window 

<html>
   <head> 
      <title>Iran - Highmaps</title> 
      <meta name="viewport" content="width=device-width, initial-scale=1"> 
      <script type="text/javascript" src="https://code.jquery.com/jquery-1.11.0.js"></script> 
      <style id="compiled-css" type="text/css">

#container {/*from  w ww.  jav a 2s  .  c o m*/
   height: 500px;
   min-width: 310px;
   max-width: 800px;
   margin: 0 auto;
}
.loading {
   margin-top: 10em;
   text-align: center;
   color: gray;
}


      </style> 
      <script type="text/javascript">
$(function () {
    // Initiate the chart
    $('#container').highcharts('Map', {
        plotOptions : {
                map : {
                  mapData: Highcharts.maps['countries/ir/ir-all'],
                joinBy: 'hc-key',
                states: {
                    hover: {
                        color: '#BADA55'
                    }
                },
                dataLabels: {
                    enabled: true,
                    format: '{point.name}'
                },
              events : {
              legendItemClick : function(){
                for(i=0; i < this.chart.series.length; i++) {
                  this.chart.series[i].hide();
                }
              },
            },
          }
        },
        title : {
            text : 'Highmaps basic demo'
        },
        mapNavigation: {
            enabled: true,
            buttonOptions: {
                verticalAlign: 'bottom'
            }
        },
        series : [{
          name : 'Report 1',
          visible : false,
          data : [{
            'hc-key' : "ir-ea",
            value : 1000,
          },{
            'hc-key' : "ir-kv",
            value : 1000,
          },{
            'hc-key' : "ir-kd",
            value : 1000,
          },{
            'hc-key' : "ir-wa",
            value : 1000,
          }],
          mapData: Highcharts.maps['countries/ir/ir-all'],
          joinBy: 'hc-key',
          states: {
            hover: {
              color: '#BADA55'
            }
          },
          dataLabels: {
            enabled: true,
            style : {
              textShadow : '',
            },
            format: '<span style="color:black">{point.name}</span>',
          }
        },{
          name : 'Report 2',
          data : [{
            'hc-key' : "ir-wa",
            value : '3000',
          },{
            'hc-key' : "ir-ea",
            value : '3000',
          }],
          mapData: Highcharts.maps['countries/ir/ir-all'],
          joinBy: 'hc-key',
          states: {
            hover: {
              color: '#BADA55'
            }
          },
          dataLabels: {
            enabled: true,
            style : {
              textShadow : '',
            },
            format: '<span style="color:black">{point.name}</span>',
          }
        }]
    });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/maps/highmaps.js"></script> 
      <script src="https://code.highcharts.com/maps/modules/exporting.js"></script> 
      <script src="https://code.highcharts.com/mapdata/countries/ir/ir-all.js"></script> 
      <div id="container"></div>  
   </body>
</html>

Related Tutorials