Guest User

Untitled

a guest
May 7th, 2017
454
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. HTML----------------
  2. <html>
  3. <head>
  4.  
  5. <title>Temperature - Humidity</title>
  6.  
  7. %%PLUGIN_CSS%%
  8. %%PLUGIN_JAVASCRIPT%%
  9.  
  10. </head>
  11.  
  12. <body>
  13. <div id="container">
  14.  
  15. <div id="inner">
  16. <span id="gauge_t"></span>
  17. <span id="gauge_h"></span>
  18. </div>
  19. </div>
  20. </body>
  21. </html>
  22.  
  23. CSS----------------
  24. <style type="text/css">
  25. body { background-color: #ffffff; }
  26. #container { height: 100%; width: 100%; display: table; }
  27. #inner { vertical-align: middle; display: table-cell; }
  28. #gauge_t { padding-left:70px; margin: 0; float:left; }
  29. #gauge_h { margin: 0; float:left; }
  30. //#gauge_at { margin: 0; float:left; }
  31. </style>
  32.  
  33. Javascript----------------
  34. <script type='text/javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
  35. <script type='text/javascript' src='https://www.google.com/jsapi'></script>
  36. <script type='text/javascript'>
  37.  
  38. // set your channel id here
  39. var channel_id = 38265;
  40. // set your channel's read api key here if necessary
  41. var api_key = '';
  42. // maximum value for the gauge
  43. var max_gauge_value = 100;
  44. // name of the gauges
  45. var gauge_t = 'Temp(*C)';
  46. var gauge_h = 'Humid(%)';
  47.  
  48. // global variables
  49. var chart_t,chart_h, charts, data;
  50.  
  51. // load the google gauge visualization
  52. google.load('visualization', '1', {packages:['gauge']});
  53. google.setOnLoadCallback(initChart);
  54.  
  55. // display the data
  56. function displayData(point,cht) {
  57. if(cht==1) {
  58. data.setValue(0, 0, gauge_t);
  59. data.setValue(0, 1, point);
  60. chart_t.draw(data, options_t);
  61. }
  62. else if(cht==2) {
  63. data.setValue(0, 0, gauge_h);
  64. data.setValue(0, 1, point);
  65. chart_h.draw(data, options_h);
  66. }
  67. }
  68.  
  69. // load the data
  70. function loadData() {
  71. // variable for the data point
  72. var p_t,p_h;
  73.  
  74. // get the data from thingspeak
  75. $.getJSON('https://api.thingspeak.com/channels/' + channel_id + '/feed/last.json?api_key=' + api_key, function(data) {
  76.  
  77. // get the data point
  78. p_t = data.field2;
  79. p_h = data.field3;
  80.  
  81. // if there is a data point display it
  82. if (p_t) {
  83. displayData(p_t,1);
  84. }
  85. if (p_h) {
  86. displayData(p_h,2);
  87. }
  88.  
  89. });
  90. }
  91.  
  92. // initialize the chart
  93. function initChart() {
  94.  
  95. data = new google.visualization.DataTable();
  96. data.addColumn('string', 'Label');
  97. data.addColumn('number', 'Value');
  98. data.addRows(1);
  99.  
  100. chart_t = new google.visualization.Gauge(document.getElementById('gauge_t'));
  101. chart_h = new google.visualization.Gauge(document.getElementById('gauge_h'));
  102. options_t = {animation:{duration: 4000, easing: 'out',}, width: 160, height: 160, greenFrom: 18, greenTo: 26, yellowFrom: 26, yellowTo: 35, redFrom: 35, redTo: 60, minorTicks: 15, max: 60, min: -15};
  103. options_h = {width: 125, height: 125, greenFrom: 35, greenTo: 60, yellowFrom: 60, yellowTo: 75, redFrom: 75, redTo: 100, minorTicks: 10, max: 100, min: 0};
  104.  
  105. loadData();
  106.  
  107. // load new data every 15 seconds
  108. setInterval('loadData()', 15000);
  109. }
  110.  
  111. </script>
RAW Paste Data