From ab2123a0f9c89807c303767509349f8002cff333 Mon Sep 17 00:00:00 2001
From: guimoz <guillaume.goessel@supelec.fr>
Date: Mon, 30 Jan 2017 01:23:52 +0100
Subject: [PATCH] Ajout du graphe (oubli...)

---
 templates/home.html | 46 ++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 45 insertions(+), 1 deletion(-)

diff --git a/templates/home.html b/templates/home.html
index 7c1c2a3..ac7d60c 100644
--- a/templates/home.html
+++ b/templates/home.html
@@ -3,7 +3,7 @@
 <h2>Toi aussi, joue au rézoman avec la rezo-roulette Les Metzquetaires !</h2>
 <table style="width:100%"><tr>
   <td>
-    <div id="container" style="min-width: 310px; height: 400px; max-width: 600px; margin: 0 auto"></div>
+    <div id="container" style="min-width: 310px; max-width: 600px; margin: 0 auto"></div>
   </td>
   <td>
     <p id="play" style="text-align: center; font-size: 1.5em">
@@ -25,5 +25,49 @@
     </p>
   </td>
 </tr></table>
+<script>
+$(function () {
+    Highcharts.chart('container', {
+        chart: {
+            plotBackgroundColor: null,
+            plotBorderWidth: 0,
+            plotShadow: false
+        },
+        title: {
+            text: 'Browser<br>shares<br>2015',
+            align: 'center',
+            verticalAlign: 'middle',
+            y: 40
+        },
+        tooltip: {
+            pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
+        },
+        plotOptions: {
+            pie: {
+                dataLabels: {
+                    enabled: true,
+                    distance: -50,
+                    style: {
+                        fontWeight: 'bold',
+                        color: 'white'
+                    }
+                },
+                startAngle: -90,
+                endAngle: 90,
+                center: ['50%', '75%']
+            },
+        },
+        series: [{
+            type: 'pie',
+            name: 'Etat du Rezo',
+            innerSize: '50%',
+            data: [
+                ['Tranchés',   {{ stat[0] }}],
+                ['Vivants',    {{ stat[1] }}]
+            ]
+        }]
+    });
+});
+</script>
 {% endif %}
 {% endblock %}