gauge_1.json

{
  "alias": "gauge_1",
  "name": "Gauge 1",
  "descriptor": {
    "type": "latest",
    "sizeX": 9,
    "sizeY": 8,
    "resources": [
      {
        "url": "https://www.gstatic.com/charts/loader.js"
      }
    ],
    "templateHtml": "\r\n       <div id=\"chart_div\"></div>",
    "templateCss": "\n#container{\n\n}\n\n#chart_div {\n\n      display: flex;\n  flex-flow: row wrap;\n  justify-content: center;\n  align-items: center;\n  text-align: center;\n \n}",
    "controllerScript": "var data;\nvar options;\nvar chart;\nself.onInit = function() {\n    var settings = self.ctx.settings;\n      google.charts.load('current', {'packages':['gauge']});\n      google.charts.setOnLoadCallback(drawChart);\n\n      function drawChart() {\n\n        data = google.visualization.arrayToDataTable([\n          ['Label', 'Value'],\n          [settings.description || \"Temp.\", 0]\n        ]);\n\n        options = {\n          width: self.ctx.width, height: self.ctx.height,\n          min: settings.minValue || 0, max: settings.maxValue,\n          greenFrom: settings.greenStart, greenTo: settings.greenEnd,\n          redFrom: settings.redStart, redTo: settings.redEnd,\n          yellowFrom:settings.yellowStart, yellowTo: settings.yellowEnd,\n          minorTicks: 5\n        };\n\n        chart = new google.visualization.Gauge($('#chart_div', self.ctx.$container)[0]);\n\n        chart.draw(data, options);\n        \n        self.onDataUpdated();\n\n        \n      }\n}\n\nself.onDataUpdated = function() {\n    var settings = self.ctx.settings;\n    var value = 0;\n    console.log (self.ctx);\n    \n    if (self.ctx.data.length > 0)\n    {\n        \n        if (self.ctx.data[0].data.length > 0)\n        value = self.ctx.data[0].data[0][1];\n        console.log (value);\n\n      \n        }\n    \n        \n        if (data !=undefined)\n        {\n            console.log (value);\n            data.setValue(0, 1, value);\n            chart.draw(data, options);\n        }\n}\n\nself.onResize = function() {\n    //if (options != undefined)\n    //{\n    //options.width = self.ctx.width;\n    //options.height = self.ctx.height;\n    //}\n    //$('#chart_div', self.ctx.$container)[0].style.marginLeft = -200 + self.ctx.width/2 + \"px\";\n    \n    \n    //if (chart != undefined)\n   //chart.draw(data, options);\n   self.onInit();\n}\n\nself.onDestroy = function() {\n}\n",
    "settingsSchema": "{\n    \"schema\": {\n        \"type\": \"object\",\n        \"title\": \"Settings\",\n        \"properties\": {\n            \"description\": {\n                \"title\": \"Description\",\n                \"type\": \"string\",\n                \"default\": \"\"\n            },\n            \"maxValue\": {\n                \"title\": \"Maximum Value\",\n                \"type\": \"number\",\n                \"default\": 100\n            },\n            \"minValue\": {\n                \"title\": \"Minimum Value\",\n                \"type\": \"number\",\n                \"default\": 0\n            },\n            \"greenStart\": {\n                \"title\": \"Start green area\",\n                \"type\": \"number\",\n                \"default\": 0\n            },\n            \"greenEnd\": {\n                \"title\": \"End green area\",\n                \"type\": \"number\",\n                \"default\": 0\n            },\n            \"yellowStart\": {\n                \"title\": \"Start Yellow area\",\n                \"type\": \"number\",\n                \"default\": 0\n            },\n            \"yellowEnd\": {\n                \"title\": \"End Yellow area\",\n                \"type\": \"number\",\n                \"default\": 0\n            },\n            \"redStart\": {\n                \"title\": \"Start Red area\",\n                \"type\": \"number\",\n                \"default\": 0\n            },\n            \"redEnd\": {\n                \"title\": \"End Red area\",\n                \"type\": \"number\",\n                \"default\": 0\n            }\n            \n        },\n        \"required\": [\"maxValue\"]\n    },\n    \"form\": [\n        \"description\",\n        \"maxValue\",\n        \"minValue\",\n        \"greenStart\",\n        \"greenEnd\",\n        \"yellowStart\",\n        \"yellowEnd\",\n        \"redStart\",\n        \"redEnd\"\n            ]\n}",
    "dataKeySettingsSchema": "{}\n",
    "defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"entityAliasId\":null,\"filterId\":null,\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Random\",\"color\":\"#2196f3\",\"settings\":{},\"_hash\":0.15479322438769105,\"funcBody\":\"var value = Math.random() * 100;\\nreturn value;\",\"units\":null,\"decimals\":null,\"usePostProcessing\":null,\"postFuncBody\":null}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{},\"title\":\"Gauge 1\"}"
  }
}