API tools faq
paste
Advertisement
Guest User

Highstock

a guest
Apr 8th, 2017
173
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
JavaScript 4.41 KB | None | 0 0
raw download clone embed print report
  1. <!DOCTYPE HTML>
  2. <html>
  3.     <head>
  4.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5.         <title>Weather Database</title>
  6.         <link rel="shortcut icon" type="image/x-icon" href="icon.png">
  7.         <link rel="icon" sizes="192x192" href="icon.png">
  8.  
  9.         <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  10.         <script type="text/javascript">
  11.         $(function () {
  12.             var seriesOptions = [],
  13.                 seriesCounter = 0,
  14.                         units = [' °C', ' %', ' hPa', ' LUX', ''],
  15.                         digits = [1, 1, 2, 0, 0],
  16.                 names = ['Temperature', 'Humidity', 'Pressure', 'Luminance', 'Soil Humidity'];
  17.  
  18.             /**
  19.              * Create the chart when all data is loaded
  20.              * @returns {undefined}
  21.              */
  22.             function createChart() {
  23.  
  24.                 $('#container').highcharts('StockChart', {
  25.  
  26.                                 rangeSelector: {
  27.                                         buttons: [{
  28.                                                 type: 'hour',
  29.                                                 count: 1,
  30.                                                 text: '1h'
  31.                                         }, {
  32.                                                 type: 'hour',
  33.                                                 count: 12,
  34.                                                 text: '12h'
  35.                                         }, {
  36.                                                 type: 'day',
  37.                                                 count: 1,
  38.                                                 text: '1d'
  39.                                         }, {
  40.                                                 type: 'week',
  41.                                                 count: 1,
  42.                                                 text: '1w'
  43.                                         }, {
  44.                                                 type: 'month',
  45.                                                 count: 1,
  46.                                                 text: '1m'
  47.                                         }, {
  48.                                                 type: 'month',
  49.                                                 count: 6,
  50.                                                 text: '6m'
  51.                                         }, {
  52.                                                 type: 'year',
  53.                                                 count: 1,
  54.                                                 text: '1y'
  55.                                         }, {
  56.                                                 type: 'all',
  57.                                                 text: 'All'
  58.                                         }],
  59.                                         selected: 2
  60.                                 },
  61.  
  62.                                 yAxis: [{
  63.                                         title: {
  64.                                                 text: 'Temperature'
  65.                                         },
  66.                                         labels: {
  67.                                                 format: '{value} °C'
  68.                                         },
  69.                                         height: '25%', //$(window).height() / 4.93, //200,
  70.                                         offset: 0,
  71.                                         lineWidth: 2
  72.                                 }, {
  73.                                         title: {
  74.                                                 text: 'Humidity'
  75.                                         },
  76.                                         labels: {
  77.                                                 format: '{value} %'
  78.                                         },
  79.                                         top: '30%', //$(window).height() / 3.29, //300,
  80.                                         height: '12.5%', //$(window).height() / 9.86, //100,
  81.                                         offset: 0,
  82.                                         lineWidth: 2
  83.                                 }, {
  84.                                         title: {
  85.                                                 text: 'Pressure'
  86.                                         },
  87.                                         labels: {
  88.                                                 format: '{value} hPa'
  89.                                         },
  90.                                         top: '47.5%', //$(window).height() / 2.19, //450,
  91.                                         height: '12.5%', //$(window).height() / 9.86, // 100,
  92.                                         offset: 0,
  93.                                         lineWidth: 2,
  94.                                 }, {
  95.                                         title: {
  96.                                                 text: 'Luminance'
  97.                                         },
  98.                                         labels: {
  99.                                                 format: '{value} LUX'
  100.                                         },
  101.                                         top: '65%', //$(window).height() / 1.64, //600,
  102.                                         height: '12.5%', //$(window).height() / 9.86, //100,
  103.                                         offset: 0,
  104.                                         lineWidth: 2
  105.                                 }, {
  106.                                         title: {
  107.                                                 text: 'Soil Humidity'
  108.                                         },
  109.                                         top: '82.5%', //$(window).height() / 1.32, //750,
  110.                                         height: '12.5%', //$(window).height() / 9.86, //100,
  111.                                         offset: 0,
  112.                                         lineWidth: 2
  113.                                 }, {
  114.                                 }],
  115.  
  116.                                 scrollbar : {
  117.                                         enabled : false
  118.                                 },
  119.  
  120.                     series: seriesOptions
  121.                 });
  122.             }
  123.  
  124.             $.each(names, function (i, name) {
  125.  
  126.                 $.getJSON('sql_' + name.toLowerCase() + '.php',    function (data) {
  127.  
  128.                     seriesOptions[i] = {
  129.                         name: name,
  130.                         data: data,
  131.                                         yAxis: i,
  132.                                         tooltip: {
  133.                                 valueDecimals: digits[i], // 2
  134.                                                 valueSuffix: units[i]
  135.                             },
  136.                                         dataGrouping: {
  137.                                             units: [
  138.                                                         ['minute', [1]],
  139.                                                 ['hour', [1]],
  140.                                                 ['day', [1]],
  141.                                                 ['month', [1]],
  142.                                                 ['year', null]
  143.                                             ],
  144.                                             groupPixelWidth: 10
  145.                                         }
  146.                     };
  147.  
  148.                     seriesCounter += 1;
  149.  
  150.                     if (seriesCounter === names.length) {
  151.                         createChart();
  152.                     }
  153.                 });
  154.             });
  155.         });
  156.  
  157.         </script>
  158.     </head>
  159.     <body bgcolor="#2a2a2b">
  160. <script src="https://code.highcharts.com/stock/highstock.js"></script>
  161. <script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
  162. <script type="text/javascript" src="sand-signika.js"></script> <!-- sand-signika.js dark-unica.js-->
  163.  
  164. <div id="container" style="height:98vh; min-width: 310px"></div>
  165.     </body>
  166. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!