<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Rezo-roulette</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}" /> <script type="text/javascript" src="{{ url_for('static', filename='javascript.js') }}"></script> <script type="text/javascript" src="{{ url_for('static', filename='highcharts-custom.js') }}"></script> <script type="text/javascript" src="{{ url_for('static', filename='jquery-3.1.1.min.js') }}"></script> <link rel="shortcut icon" type="image/x-icon" href="{{ url_for('static', filename='favicon.ico') }}" /> </head> <body> <div id="body_bis"> <div id="content_container"> <div id="content_topleft" class="corner"> </div> <div id="content_topright" class="corner"> </div> <div id="content"> {% with messages = get_flashed_messages() %} {% if messages %} <ul class=flashes> {% for message in messages %} <li>{{ message }}</li> {% endfor %} </ul> {% endif %} {% endwith %} {% block content %}{% endblock %} </div> <div id="content_bottomleft" class="corner"> </div> <div id="content_bottomright" class="corner"> </div> <div id="container" style="min-width: 310px; max-width: 600px; margin: 0 auto"></div> </div> </div> <script type="text/javascript"> $(function () { Highcharts.chart('container', { chart: { plotBackgroundColor: null, plotBorderWidth: 0, plotShadow: false }, title: { text: 'Etat du Rezo', 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', {{ stats[0] }}], ['Vivants', {{ stats[1] }}] ] }] }); }); </script> </body> </html>