API tools faq
paste
Guest User

JSON Data To Google Charts

a guest
Sep 27th, 2018
262
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 5.74 KB | None | 0 0
raw download clone embed print report
  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>
Add Comment
Please, Sign In to add comment
Public Pastes
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!