Rosace NEO

by Flyout

HTML

<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/drilldown.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>

<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

CSS

#container {
	min-width: 320px;
	max-width: 600px;
	margin: 0 auto;
}

JavaScript

Highcharts.setOptions({
  lang: {
    drillUpText: '< Modules'
  }
});

var chart = Highcharts.chart('container', {
    chart: {
      polar: true,
      type: 'column',
      animation: false,
      events: {
        drilldown: function (e) {
        	var nomModule = e.point.name;
          var nomSerie = e.point.series.name;
          var drilldowns = {
          	'REFERENTIEL': {
                data: [{
                  name: 'Service 1',
                  value : 1,
                  color: '#ff4d4d'
                },{
                  name: 'Service 2',
                  value: 2,
                  color: '#ff4d4d'
                }, {
                  name: 'Service 3',
                  value : 1,
                  color: '#ffe066'
                },{
                  name: 'Service 4',
                  value: 2,
                  color: '#ffe066'
                }, {
                  name: 'Service 5',
                  value : 1,
                  color: '#66ff66'
                },{
                  name: 'Service 6',
                  value: 2,
                  color: '#66ff66'
                },]
          	},
            'REFERENTIEL_Erreur': {
                data: [{
                  name: 'Service 1',
                  value : 1,
                  color: '#ff4d4d'
                },{
                  name: 'Service 2',
                  value: 2,
                  color: '#ff4d4d'
                }]
            },
            'REFERENTIEL_Performance': {
                data: [{
                  name: 'Service 3',
                  value : 1,
                  color: '#ffe066'
                },{
                  name: 'Service 4',
                  value: 2,
                  color: '#ffe066'
                }]
            },
            'REFERENTIEL_Ok': {
                data: [{
                  name: 'Service 5',
                  value : 1,
                  color: '#66ff66'
                },{
                  name: 'Service...