Highcharts Demo

author(s): Torstein Hønsi

by Erik Jan de Wilde

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>

<div id="container" style="height: 400px"></div>
<button id="button1" class="autocompare">NL</button>
<button id="button2" class="autocompare">vt regio</button>
<button id="button3" class="autocompare">minder grote steden</button>

JavaScript

$(function() {
  Highcharts.setOptions({
    colors: ['#058DC7', '#50B432', '#ED561B', '#DDDF00', '#24CBE5', '#64E572', '#FF9655', '#FFF263', '#6AF9C4']
  });

  $('#container').highcharts({
    chart: {
      type: 'pie'
    },
    plotOptions: {
      pie: {
        dataLabels: {
          rotation: 0,
          formatter: function() {
            return this.point.name + ' (' + Math.round(this.percentage * 100) / 100 + '%)';
          }

        },
        size: '100%'
      }
    },

    series: [{
      startangle: 90,
      data: [
        ['mishandeling', 30],
        ['seksueel geweld', 10],
        ['bedreiging', 10],
        ['overig', 0]
      ],
      title: {
        // align: 'left',
        // x: 0
        // style: { color: XXX, fontStyle: etc }
        align: 'center',
        format: '<b>{name}</b>',
        verticalAlign: 'top',
        y: -40
      },
      name: 'Gemeente',
      innerSize: '10%',
      center: ['20%', '50%']
    }]


  });

 // the button action
  $('#button1').click(function() {
    var chart = $('#container').highcharts();
    chart.series[0].setData(
      [
        ['mishandeling', 5],
        ['seksueel geweld', 5],
        ['bedreiging', 5],
        ['overig', 11]
      ]
    );
  });
  
   // the button action
  $('#button2').click(function() {
    var chart = $('#container').highcharts();
    chart.series[0].setData(
      [
        ['mishandeling', 1],
        ['seksueel geweld', 1],
        ['bedreiging', 1],
        ['overig', 11]
      ]
    );
  });

   // the button action
   
  $('#button3').click(function() {
    var chart = $('#container').highcharts();
    chart.series[0].setData(
      [
       ['mishandeling', 30],
        ['seksueel geweld', 10],
        ['bedreiging', 10],
        ['overig', 0]
      ]
    );
  });
 
});