SHARE
TWEET

JSON Data To Google Charts

a guest Sep 27th, 2018 25 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. <html>
  2. <head>
  3. <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
  4. <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  5. <script type="text/javascript">
  6.  
  7.     //https://robotzero.one
  8.  
  9.     google.charts.load('current', {'packages':['line', 'corechart']});
  10.    
  11.     google.charts.setOnLoadCallback(drawPeltierChart);
  12.     google.charts.setOnLoadCallback(drawTempsChart);
  13.     google.charts.setOnLoadCallback(drawHumidityChart);
  14.    
  15.     var dataPeltier;
  16.     var dataTemps;
  17.     var dataHumidity;
  18.    
  19.     var peltierClassicChart;
  20.     var tempsClassicChart;
  21.     var humidityClassicChart;
  22.    
  23.     var peltierDiv;
  24.     var tempsDiv;
  25.     var humidityDiv;
  26.    
  27.     var peltierOptions;
  28.     var tempsOptions;
  29.     var humidityOptions;
  30.    
  31.    
  32.     function drawPeltierChart() {
  33.      
  34.       dataPeltier = new google.visualization.DataTable();
  35.       peltierDiv = document.getElementById('peltier_div');
  36.      
  37.       dataPeltier.addColumn('number', "Time");
  38.       dataPeltier.addColumn('number', "Peltier Temperature");      
  39.       dataPeltier.addColumn('number', "Fan Speed");
  40.  
  41.       peltierOptions = {
  42.         title: 'Pelter Temp and Fan Speed',
  43.         width: 800,
  44.         height: 500,
  45.         curveType: 'function',
  46.         theme: 'material',
  47.         animation: {
  48.             duration: 1000,
  49.             easing: 'in'
  50.             },
  51.         series: {
  52.           // Gives each series an axis name that matches the Y-axis below.
  53.           0: {targetAxisIndex: 0},
  54.           1: {targetAxisIndex: 1},
  55.             },
  56.         vAxes: {
  57.           // Adds titles to each axis.
  58.           0: {title: 'Temp (Celsius)'},
  59.           1: {title: 'Fan Speed'}
  60.             },
  61.        vAxes: {
  62.         0: {
  63.           ticks:[0, 10, 20, 30],
  64.             },
  65.         1: {
  66.           ticks:[20, 40, 60, 80, 100],
  67.             }
  68.         }
  69.       };  
  70.     }
  71.  
  72.     function drawTempsChart() {
  73.      
  74.       dataTemps = new google.visualization.DataTable();
  75.       tempsDiv = document.getElementById('temps_div');
  76.      
  77.       dataTemps.addColumn('number', "Time");
  78.       dataTemps.addColumn('number', "Air Temperature");      
  79.       dataTemps.addColumn('number', "Processed Temperature");
  80.  
  81.       tempsOptions = {
  82.         title: 'BME Sensor Temperatures',
  83.         width: 800,
  84.         height: 500,
  85.         curveType: 'function',
  86.         theme: 'material',
  87.         animation: {
  88.             duration: 1000,
  89.             easing: 'in'
  90.             },
  91.        vAxis: { ticks:[0, 10, 20, 30, 40]
  92.         }
  93.       };
  94.     }
  95.    
  96.     function drawHumidityChart() {
  97.      
  98.       dataHumidity = new google.visualization.DataTable();
  99.       humidityDiv = document.getElementById('humidity_div');
  100.      
  101.       dataHumidity.addColumn('number', "Time");
  102.       dataHumidity.addColumn('number', "Air Humidity");      
  103.       dataHumidity.addColumn('number', "Processed Humidity");
  104.  
  105.       humidityOptions = {
  106.         title: 'BME Sensor Humidity',
  107.         width: 800,
  108.         height: 500,
  109.         curveType: 'function',
  110.         theme: 'material',
  111.         animation: {
  112.             duration: 1000,
  113.             easing: 'in'
  114.             },
  115.         vAxis: { ticks:[30, 40, 50, 60, 70, 80]
  116.                 }
  117.       };
  118.     }
  119.    
  120.    
  121.     function updatePeltierChart() {
  122.         peltierClassicChart = new google.visualization.LineChart(peltierDiv);
  123.         peltierClassicChart.draw(dataPeltier, peltierOptions);
  124.     }
  125.      
  126.      
  127.     function updateTempsChart() {
  128.         tempsClassicChart = new google.visualization.LineChart(tempsDiv);
  129.         tempsClassicChart.draw(dataTemps, tempsOptions);
  130.     }
  131.      
  132.     function updateHumidityChart() {
  133.         humidityClassicChart = new google.visualization.LineChart(humidityDiv);
  134.         humidityClassicChart.draw(dataHumidity, humidityOptions);
  135.     }      
  136.    
  137.    
  138.     var interval = 0;
  139.     setInterval(ajaxCall, 5000); // get data every five seconds
  140.     function ajaxCall() {
  141.         $.ajax({
  142.             type: 'GET',
  143.             dataType: 'JSON',
  144.             cache: false,
  145.             url: 'sensordata.txt', // text file created by PHP script from sensor data
  146.         }).done(function (sensorsData) {
  147.             console.log(sensorsData);
  148.  
  149.             console.log('temp ' + sensorsData.peltier.peltier_temp);
  150.             console.log('fan ' + sensorsData.peltier.fan_speed);
  151.            
  152.             numberOfRows = dataPeltier.getNumberOfRows(); // should be the same for all charts
  153.             console.log(numberOfRows);
  154.             if (numberOfRows>10){
  155.                 dataPeltier.removeRow(numberOfRows-1);
  156.                 dataTemps.removeRow(numberOfRows-1);
  157.                 dataHumidity.removeRow(numberOfRows-1);
  158.             }            
  159.                      
  160.             dataPeltier.insertRows(0, [[interval, sensorsData.peltier.peltier_temp, sensorsData.peltier.fan_speed]]);
  161.             updatePeltierChart();
  162.            
  163.             dataTemps.insertRows(0, [[interval, sensorsData.sensor_temp.air_temp, sensorsData.sensor_temp.processed_temp]]);
  164.             updateTempsChart();
  165.            
  166.             dataHumidity.insertRows(0, [[interval, sensorsData.sensor_humidity.air_humidity, sensorsData.sensor_humidity.processed_humidity]]);
  167.             updateHumidityChart();            
  168.            
  169.         interval += 1;
  170.         });
  171.     }    
  172.  
  173.     </script>
  174. </head>
  175. <body>
  176. <!--Table and divs that hold the pie charts-->
  177. <table class="columns">
  178.   <tr>
  179.     <td><div id="peltier_div" style="border: 1px solid #ccc"></div></td>
  180.     <td><div id="temps_div" style="border: 1px solid #ccc"></div></td>
  181.   </tr>
  182.   <tr>
  183.     <td><div id="humidity_div" style="border: 1px solid #ccc"></div></td>
  184.     <td></td>
  185.   </tr>
  186. </table>
  187. </body>
  188. </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
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!
 
Top