SHARE
TWEET

maandgrafiek.php

a guest Jan 10th, 2015 659 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.         <title>Energieverbruik per dag</title>
  6.         <script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
  7.         <script type="text/javascript">
  8.         $(document).ready(function() {
  9.             var options = {
  10.                 chart: {
  11.                     renderTo: 'container',
  12.                     type: 'column',
  13.                     marginRight: 130,
  14.                     marginBottom: 25
  15.                 },
  16.                 title: {
  17.                     text: 'Energieverbruik',
  18.                     x: -20 //center
  19.                 },
  20.                 subtitle: {
  21.                     text: '',
  22.                     x: -20
  23.                 },
  24.                 xAxis: {
  25.                     categories: []
  26.                 },
  27.                 yAxis: {
  28.                     title: {
  29.                         text: 'kWh / m3'
  30.                     },
  31.                     plotLines: [{
  32.                         value: 0,
  33.                         width: 1,
  34.                         color: '#808080'
  35.                     }]
  36.                 },
  37.                 tooltip: {
  38.                     formatter: function() {
  39.                             return '<b>'+ this.series.name +'</b><br/>'+
  40.                             this.y+ ' kWh / m3';
  41.                     }
  42.                 },
  43.                 legend: {
  44.                     layout: 'vertical',
  45.                     align: 'right',
  46.                     verticalAlign: 'top',
  47.                     x: -10,
  48.                     y: 100,
  49.                     borderWidth: 0
  50.                 },
  51.                 series: []
  52.             }
  53.            
  54.             $.getJSON("data_maandgrafiek.php", function(json) {
  55.                 options.xAxis.categories = json[0]['data'];
  56.                 options.series[0] = json[1];
  57.                 options.series[1] = json[2];
  58.                 options.series[2] = json[3];
  59.                 options.series[3] = json[4];
  60.  
  61.                 chart = new Highcharts.Chart(options);
  62.             });
  63.         });
  64.         </script>
  65.         <script src="http://code.highcharts.com/highcharts.js"></script>
  66.         <script src="http://code.highcharts.com/modules/exporting.js"></script>
  67.     </head>
  68.     <body>
  69.  
  70.         <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
  71.     </body>
  72. </html>
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top