google gauge working

static/js/videogauges.js

@@ -1,60 +1,42 @@
-// var opts = {
-//   lines: 12,
-//   angle: 0.15,
-//   lineWidth: 0.44,
-//   pointer: {
-//     length: 0.9,
-//     strokeWidth: 0.035,
-//     color: '#000000'
-//   },
-//   limitMax: 'false',
-//   // percentColors: [[0.0, "#a9d70b" ], [0.50, "#a9d70b"], [1.0, "#a9d70b"]], // !!!!
-//   strokeColor: '#E0E0E0',
-//   generateGradient: true
-// };
-// var target = document.getElementById('angles');
-// var gauge = new Gauge(target).setOptions(opts);
-// gauge.maxValue = 90;
-// gauge.minValue = -90;
-// gauge.animationSpeed = 5;
-// gauge.set(-75);
+google.charts.load('current', {'packages':['gauge']});
+google.charts.setOnLoadCallback(drawSPMChart);
 
-// https://github.com/bernii/gauge.js/issues/193
+var spmdata = [
+  ['Label', 'Value'],
+  ['SPM', 21.0],
+
+];
+
+var spmoptions = {
+  min:0, max: 50,
+  width: 400, height: 120,
+  greenFrom: 20, greenTo: 30,
+  yellowFrom: 30,yellowTo: 40,
+  redFrom: 40, redTo: 50,
+  majorTicks: ['0','10','20','30','40','50'],
+  minorTicks: 10
+};
+
+var data = null;
+var spmchart = null;
+
+// SPM chart
+function drawSPMChart() {
+
+  data = new google.visualization.arrayToDataTable(spmdata);
 
 
-var opts = {
-    angle: 0, // The span of the gauge arc
-    lineWidth: 0.2, // The line thickness
-    radiusScale: 0.89, // Relative radius
-    pointer: {
-      length: 0.54, // // Relative to gauge radius
-      strokeWidth: 0.053, // The thickness
-      color: '#000000' // Fill color
-    },
-    limitMax: false,     // If false, max value increases automatically if value > maxValue
-    limitMin: false,     // If true, the min value of the gauge will be fixed
-    colorStart: '#6FADCF',   // Colors
-    colorStop: '#8FC0DA',    // just experiment with them
-    strokeColor: '#E0E0E0',  // to see which ones work best for you
-    generateGradient: true,
-    highDpiSupport: true,     // High resolution support
-    staticZones: [
-        {strokeStyle: "#00FF00", min: 0, max: 2}, // Greem
-        {strokeStyle: "#0000FF", min: 2, max: 3}, // Blue`
-        {strokeStyle: "#00FFFF", min: 3, max: 4}, // Cyan
-        {strokeStyle: "#FFDD00", min: 4, max: 5}, // Orange
-        {strokeStyle: "#FF0000", min: 5, max: 6}  // Red
-     ],
 
-  };
-  var target = document.getElementById('basic'); // your canvas element
-  var gaugeboatspeed = new Gauge(target).setOptions(opts); // create sexy gauge!
-  gaugeboatspeed.maxValue = 6; // set max gauge value
-  gaugeboatspeed.setMinValue(0);  // Prefer setter over gauge.minValue = 0
-  gaugeboatspeed.animationSpeed = 10; // set animation speed (32 is default value)
-  gaugeboatspeed.set(0); // set actual value
+  spmchart = new google.visualization.Gauge(document.getElementById('basic'));
 
-// Define set_basic(values) so that gauges can be set by metricsgroups
-  function set_basic() {
-    gaugeboatspeed.set(boatspeed_now);
-  }
+  // spmchart.draw(data, spmoptions);
+
+  // Define set_basic(values) so that gauges can be set by metricsgroups
+
+};
+
+var spmchart;
+function set_basic() {
+  data.setCell(0,1,spm_now);
+  spmchart.draw(data, spmoptions)
+}