Treemap final

by Flyout

HTML

<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/heatmap.js"></script>
<script src="https://code.highcharts.com/modules/treemap.js"></script>
<script src="https://code.highcharts.com/modules/drilldown.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/offline-exporting.js"></script>
<div id="container"></div>

CSS

#container {
  min-width: 300px;
  max-width: 600px;
  min-height: 550px;
  max-height: 6000px;
  margin: 0 auto;
}

JavaScript

$('#container').highcharts({
   chart: {
     type: 'treemap',
   },

   title: {
     text: 'Supervision de la Performance des Traitements NEO'
   },

   subtitle: {
     text: 'Performance',
     y: 55,
   },

   legend: {
     verticalAlign: 'top',
     y: 65,
   },

   tooltip: {
     formatter: function() {
       var s = '<b>' + this.point.name + '<b>' + '<br/>';
       s += 'Executions: ' + this.point.value + '<br/>';
       s += 'Moyenne: ' + this.point.moyenne + '<br/>';
       s += 'Reference: ' + this.point.reference + '<br/>';
       s += 'Performance: ' + Math.round(this.point.reference / this.point.moyenne * 100) + ' %' + '<br/>';
       return s;
     }
   },

   colorAxis: {
     dataClassColor: 'category',
     dataClasses: [{
       name: 'Satisfaisante',
       color: '#66ff66'
     }, {
       name: '>= 1 lente',
       color: '#ffe066'
     }, {
       name: '>= 1 erreur',
       color: '#ff4d4d'
     }]
   },

   series: [{
     layoutAlgorithm: 'stripes',
     layoutStartingDirection: 'horizontal',
     borderWidth: 3,
     dataLabels: {
       style: {
         color: '#404040',
         textShadow: false
       }
     },
     data: [{
       name: 'Traitement 1',
       value: 10,
       moyenne: 500,
       reference: 520,
       color: '#66ff66'
     }, {
       name: 'Traitement 2',
       value: 13,
       moyenne: 50,
       reference: 100,
       color: '#ffe066'
     }, {
       name: 'Traitement 5',
       value: 20,
       moyenne: 200,
       reference: 150,
       color: '#ff4d4d'
     }, {
       name: 'Traitement 3',
       value: 15,
       moyenne: 200,
       reference: 165,
       color: '#ffe066'
     }, {
       name: 'Traitement 7',
       value: 33,
       moyenne: 200,
       reference: 132,
       color: '#66ff66'
     }, {
       name: 'Traitement 8',
       value: 50,
       moyenne: 200,
       reference: 300,
       color: '#66ff66'
     }, {
       name: 'Traitement 4',
       value: 18,
       moyenne: 200,
  ...