Reaching options of other charts from point event in pie chart - Javascript highcharts

Javascript examples for highcharts:Pie Chart

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

Description

Reaching options of other charts from point event in pie 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">
$(function () {/*  w w w. j av a2s . c o m*/
    var chart, chart2;
    chart = new Highcharts.Chart({
        chart: {
            renderTo: 'container'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                point: {
                    events: {
                        click: function () {
                            $.each(chart2.series[0].data, function (i, data) {
                                data.slice(false);
                            });
                        }
                    }
                },
                dataLabels: {
                    enabled: false
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'testname1',
            center: [70, 140],
            data: [
                ['Commerce', 33.0],
                ['Engineering', 32.3], {
                    name: 'Financial Services',
                    y: 18.8
                }, ['Logistics, Aviation & Shipping', 5.5],
                ['Seafood & Marine', 9.2],
                ['Corporate Services & others', 1.2]
            ]
        }]
    });
    chart2 = new Highcharts.Chart({
        chart: {
            renderTo: 'container1'
        },
        plotOptions: {
            pie: {
                allowPointSelect: true,
                cursor: 'pointer',
                size: 100,
                point: {
                    events: {
                        click: function () {
                            $.each(chart.series[0].data, function (i, data) {
                                data.slice(false);
                            });
                        }
                    }
                },
                dataLabels: {
                    enabled: false
                }
            }
        },
        series: [{
            type: 'pie',
            name: 'testname1',
            center: [70, 140],
            data: [
                ['Commerce', 33.0],
                ['Engineering', 32.3], {
                    name: 'Financial Services',
                    y: 18.8
                }, ['Logistics, Aviation & Shipping', 5.5],
                ['Seafood & Marine', 9.2],
                ['Corporate Services & others', 1.2]
            ]
        }]
    });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <script src="https://code.highcharts.com/modules/exporting.js"></script> 
      <div id="container" style="width: 200px; height: 400px; margin: 0 auto;float:left;"></div> 
      <div id="container1" style="width: 200px; height: 400px; margin: 0 auto;float:left;"></div>  
   </body>
</html>

Related Tutorials