keep a pie chart sorted - Javascript highcharts

Javascript examples for highcharts:Pie Chart

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

Description

keep a pie chart sorted

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="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script> 
      <script type="text/javascript">
$(function () {/*from ww w .ja  va2s .  co m*/
    var chart;
    $(document).ready(function () {
        options = {
            chart: {
                renderTo: 'container',
                plotBackgroundColor: null,
                plotBorderWidth: null,
                plotShadow: false
            },
            plotOptions: {
                pie: {
                    dataLabels: {
                        enabled: false
                    },
                    showInLegend: true
                }
            },
            series: [{
                type: 'pie',
                data: [{
                    name: "foo",
                    color: "blue",
                    y: 4,
                }, {
                    name: "bar",
                    color: "red",
                    y: 2,
                }, {
                    name: "baz",
                    color: "green",
                    y: 1,
                }]
            }]
        }
        chart = new Highcharts.Chart(options);
    });
    $('#update2').click(function() {
        if(chart)
            chart.destroy();
        options.series[0].data = [{
                    name: "bar",
                    color: "red",
                    y: 8,
                }, {
                    name: "foo",
                    color: "blue",
                    y: 4,
                }, {
                    name: "baz",
                    color: "green",
                    y: 1,
                }];
        chart = new Highcharts.Chart(options);
    });
});

      </script> 
   </head> 
   <body> 
      <script src="https://code.highcharts.com/highcharts.js"></script> 
      <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div> 
      <button id="update2">Point.upate</button>  
   </body>
</html>

Related Tutorials