Dependency wheel update

by kzoon

HTML

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://code.highcharts.com/modules/sankey.js"></script>
<script src="https://code.highcharts.com/modules/dependency-wheel.js"></script>
<script src="https://code.highcharts.com/modules/solid-gauge.js"></script>
<div id="container"></div>
<button id="myButton">Update series</button>

CSS

#container {
  height: 500px;
}

JavaScript

var chart = Highcharts.chart('container', {

 chart: {
    type: 'dependencywheel'
  },
  title: {
    text: 'Dependency Wheel Test'
  },

  series: [{

    nodes: [{
      id: 'Spain',
      colorIndex: 0
    }, {
      id: 'France',
      colorIndex: 1
    }, {
      id: 'Germany',
      colorIndex: 2
    }, {
      id: 'Spain',
      colorIndex: 3
    }, {
      id: 'United Kingdom',
      colorIndex: 4
    }, {
      id: 'Italy',
      colorIndex: 5
    }, {
      id: 'Metherlands',
      colorIndex: 6
    }],
    keys: ['from', 'to', 'weight'],
    data: [
      ['Spain', 'France', 5],
      ['Spain', 'United Kingdom', 1],
      ['Spain', 'Italy', 8],
      ['Spain', 'Netherlands', 1],
      ['France', 'Germany', 2],
      ['France', 'United Kingdom', 5],
      ['France', 'Italy', 3],
      ['Germany', 'Spain', 1],
      ['United Kingdom', 'Germany', 3],
      ['Italy', 'United Kingdom', 2]

    ],

    dataLabels: {
      color: 'black',
      textPath: {
        enabled: true,
        attributes: {
          dy: 5
        }
      },
      distance: 10
    },
    size: '95%'
  }]


});


$('#myButton').click(function() {

chart.series[0].setData([
    ['Spain', 'France', 1],
    ['Spain', 'United Kingdom', 5],
    ['Spain', 'Italy', 2],
    ['Spain', 'Netherlands', 6],
    ['France', 'Germany', 4],
    ['France', 'United Kingdom', 3],
    ['France', 'Italy', 8],
    ['Germany', 'Spain', 2],
    ['United Kingdom', 'Germany', 1],
    ['Italy', 'United Kingdom', 2]

  ]);
  
});