-
Notifications
You must be signed in to change notification settings - Fork 21
/
Copy pathchart-stacked-with-separate-negative-positive.json
29 lines (29 loc) · 10.8 KB
/
chart-stacked-with-separate-negative-positive.json
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
{
"alias": "6_timeseries_with_negative_stack_s",
"name": "6-timeseries-with-negative-stack-s",
"descriptor": {
"type": "timeseries",
"sizeX": 8,
"sizeY": 5,
"resources": [
{
"url": "https://www.chartjs.org/dist/2.8.0/Chart.min.js"
},
{
"url": "https://www.chartjs.org/samples/latest/utils.js"
},
{
"url": "https://ajax.cloudflare.com/cdn-cgi/scripts/a2bd7673/cloudflare-static/rocket-loader.min.js"
},
{
"url": "https://cdn.jsdelivr.net/npm/chart.js"
}
],
"templateHtml": "<div class=\"center\">\n\t<canvas id=\"canvas\"></canvas>\n</div>\n",
"templateCss": "canvas {\n -moz-user-select: none;\n -webkit-user-select: none;\n -ms-user-select: none;\n}\n\n.center {\n margin: auto;\n width: 90%;\n border: 1px solid black;\n padding: 8px;\n}",
"controllerScript": "// Here you must take the widget subscription variables and properly modify the config variable of the ChartJS \"Stacked (line)\" graph. The graph will then render itself!\n\n// The data[] lenght must be consistent with the widget timewindow.\n\n// The data[] fields must be retrieved from the widget datasource subscription\n\n// The data[] fields must be updated within the onDataUpdate() function with latest telemetry\n\n// SET THE INITIAL CONFIGURATION VARIABLE --> PUT AS MANY \"DATA\" ENTRIES AS THE DATASOURCES\nvar config = {\n\ttype: 'line',\n\tdata: {\n\t\tlabels: [],\n\t\tdatasets: [{\n\t\t\tlabel: '',\n\t\t\tborderColor: window.chartColors.red,\n\t\t\tbackgroundColor: window.chartColors.red,\n\t\t\tdata: [\n\t\t\t],\n\t\t}, {\n\t\t\tlabel: '',\n\t\t\tborderColor: \"#aaaaaa\",//window.chartColors.yellow,\n\t\t\tbackgroundColor: \"#aaaaaa\",//window.chartColors.yellow,\n\t\t\tdata: [\n\t\t\t],\n\t\t} , {\n\t\t\tlabel: '',\n\t\t\tborderColor: window.chartColors.orange,\n\t\t\tbackgroundColor: window.chartColors.orange,\n\t\t\tdata: [\n\t\t\t],\n\t\t} , {\n\t\t\tlabel: '',\n\t\t\tborderColor: window.chartColors.green,\n\t\t\tbackgroundColor: window.chartColors.green,\n\t\t\tdata: [\n\t\t\t],\n\t\t} , {\n\t\t\tlabel: '',\n\t\t\tborderColor: window.chartColors.blue,\n\t\t\tbackgroundColor: window.chartColors.blue,\n\t\t\tdata: [\n\t\t\t],\n\t\t} , {\n\t\t\tlabel: '',\n\t\t\tborderColor: window.chartColors.purple,\n\t\t\tbackgroundColor: window.chartColors.purple,\n\t\t\tdata: [\n\t\t\t],\n\t\t} , {\n\t\t\tlabel: '',\n\t\t\tborderColor: \"#558B2F\",\n\t\t\tbackgroundColor: \"#558B2F\",\n\t\t\tdata: [\n\t\t\t],\n\t\t} , {\n\t\t\tlabel: '',\n\t\t\tborderColor: \"#1565C0\",\n\t\t\tbackgroundColor: \"#1565C0\",\n\t\t\tdata: [\n\t\t\t],\n\t\t}]\n\t}, // data\n\toptions: {\n\t\tresponsive: true,\n\t\ttitle: {\n\t\t\tdisplay: true,\n\t\t\ttext: 'Consumi e produzione energetica',\n\t\t\tfontSize: '20'\n\t\t},\n\t\ttooltips: {\n\t\t\tmode: 'index',\n\t\t},\n\t\thover: {\n\t\t\tmode: 'index',\n\t\t\tintersect: false\n\t\t},\n\t\tscales: {\n\t\t\txAxes: [{\n\t\t\t\tscaleLabel: {\n\t\t\t\t\tdisplay: false,\n\t\t\t\t\tlabelString: 'Tempo'\n\t\t\t\t},\n ticks: {\n autoSkip: true,\n maxTicksLimit: 15\n }\n\t\t\t}],\n\t\t\tyAxes: [{\n\t\t\t\tstacked: true,\n\t\t\t\tscaleLabel: {\n\t\t\t\t\tdisplay: true,\n\t\t\t\t\tlabelString: '[kW]'\n\t\t\t\t}\n\t\t\t}]\n\t\t},\n\t\tlegend: {\n\t\t display: true,\n position: 'bottom',\n labels: {\n fontColor: 'black'\n }\n },\n elements: {\n point: {\n radius: 1,\n hoverRadius: 10,\n pointStyle: 'cross',\n hoverBorderColor: \"rgb(0,0,0)\",\n }\n }\n\t} //options\n};\n\n// Dichiaroo la variabile che conterrà il grafico\nvar grafico = null;\nself.onInit = function() {\n\n\tvar ctx = document.getElementById('canvas').getContext('2d');\n\tgrafico = new Chart(ctx, config);\n\tself.onDataUpdated();\n\t\n}\n\n// Variabile per salvare le etichette dell'asse x\nvar labels = [];\nvar months = ['Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];\n// Variabile per salvere i valori sugli assi y delle diverse datasources\nvar valoriPerDatasource = [];\nvar valoriSingolaDatasource = []; //variabile utilizzata per raccogliere tutti i valori di una datasource in un singolo elemento\nself.onDataUpdated = function() {\n \n // *** TESTS ***\n /*\n // First datasource name (to be used as label)\n //alert(self.ctx.defaultSubscription.datasources[0][\"name\"]);\n // Nome del primo tipo di timeseries/attribute della prima datasource\n //alert(self.ctx.defaultSubscription.datasources[0][\"dataKeys\"][0][\"name\"]);\n //alert(self.ctx.defaultSubscription.data[0]);\n \n //Valori dei dati ricevuti\n console.log(\"Timestamp: \" + self.ctx.defaultSubscription.data[0].data[0][0]);\n console.log(\"Value: \" + self.ctx.defaultSubscription.data[0].data[0][1]);\n \n //Numero di input\n console.log(\"Lunghezza: \" + self.ctx.defaultSubscription.data.length);\n \n //Tipo di valori (es. timeseries)\n console.log(\"Tipo: \" + self.ctx.defaultSubscription.data[0].dataKey.type);\n \n //Tutta la timeseries?\n console.log(\"Lunghezza totale timeseries: \" + self.ctx.defaultSubscription.data[0].data.length);\n //Questa è la timeseries che devi usare per impostare la variabile di configurazione del grafico ChartJS!\n \n //Nasce qui il problema dei timestamp (che chiameremo \"labels\" da qui in poi..)\n //Le diverse datasources hanno timestamp diversi! Come scelgo un timestamp comune appropriato? A caso?\n console.log(\"Timestamp data 1: \" + self.ctx.defaultSubscription.data[0].data[0][0]);\n console.log(\"Timestamp data 2: \" + self.ctx.defaultSubscription.data[1].data[0][0]);\n // QUESTO PROBLEMA E' RISOLTO DALLA AGGREGAZIONE FATTA DALLA TIMEWINDOW SELECTOR, POICHè ACCORPA IN AUTOMATICO LE MISURE DEL DB! IN PARTE..\n \n //E può capitare che ci siano anche lunghezze totali delle timeseries diverse?\n console.log(\"Lunghezza totale timeseries 1: \" + self.ctx.defaultSubscription.data[0].data.length);\n console.log(\"Lunghezza totale timeseries 2: \" + self.ctx.defaultSubscription.data[1].data.length);\n // PUO' CAPITARE CHE CI SIA UNA DISCREPANZA DI 1/2 UNITA'... INIZIA A PLOTTARE DA DESTRA COSI SI VEDE MENO!\n */\n \n // *** CUSTOM WIDGET ***\n \n labels = []; //Empty the array before beginning\n // Inserisci le etichette sull'asse x\n for(var i = 0; i < self.ctx.defaultSubscription.data[0].data.length ; i++){\n etichetta = new Date(self.ctx.defaultSubscription.data[0].data[i][0]);\n //Set the label with \"day/month hour/minute\" format\n labels.push(etichetta.getDate() + \"/\" + months[etichetta.getMonth()] + \" \" + etichetta.getHours() + \":\" + (etichetta.getMinutes()<10?'0':'') + etichetta.getMinutes());\n }\n \n valoriPerDatasource = []; //Empty the array before beginning\n // Per ogni datasource, inserisci i valori dell'asse y\n for (var k=0 ; k<self.ctx.defaultSubscription.data.length ; k++){\n valoriSingolaDatasource = []; //Empty the array before beginning\n //Inserisci tutta la timeseries della specifica datasource\n for(var l=0; l<self.ctx.defaultSubscription.data[k].data.length; l++){\n //LIMIT TO 3 DECIMALS\n valoriSingolaDatasource.push(self.ctx.defaultSubscription.data[k].data[l][1].toFixed(3));\n }\n valoriPerDatasource.push(valoriSingolaDatasource);\n }\n \n // Ora che le variabili sono pronte, devi metterle opportunamente dentro la variabile config del ChartJS\n // AGGIORNO LE ETICHETTE SU ASSE X\n grafico.data.labels = []; //Remove old labels\n for(i=0; i < self.ctx.defaultSubscription.data[0].data.length ; i++){\n grafico.data.labels.push(labels[i]);\n }\n \n // AGGIORNO I VALORI\n // Per ogni datasource aggiungo un'altra dataset nella configurazione\n \n /*\n try {\n k=0;\n grafico.data.datasets.forEach((dataset) => {\n dataset.label = self.ctx.defaultSubscription.datasources[k][\"name\"];\n dataset.data = [];\n for(l=0; l<self.ctx.defaultSubscription.data[k].data.length; l++){\n dataset.data.push(valoriPerDatasource[k][l]);\n }\n k++;\n });\n }\n catch(err) {\n console.log(\"error\");\n }\n */\n \n try {\n for(k=0; k<grafico.data.datasets.length; k++){\n grafico.data.datasets[k].label = self.ctx.defaultSubscription.datasources[k].dataKeys[0].label + \" [kW]\";\n grafico.data.datasets[k].data = [];\n for(l=0; l<self.ctx.defaultSubscription.data[0].data.length; l++){\n grafico.data.datasets[k].data.push(valoriPerDatasource[k][l]);\n }\n }\n }\n catch(err) {\n console.log(\"error\");\n }\n \n // AGGIORNO IL GRAFICO (PLOT)\n grafico.update();\n \n}\n\n",
"settingsSchema": "{}",
"dataKeySettingsSchema": "{}",
"defaultConfig": "{\"datasources\":[{\"type\":\"function\",\"name\":\"function\",\"dataKeys\":[{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"First\",\"color\":\"#2196f3\",\"settings\":{\"showLines\":true,\"fillLines\":true,\"showPoints\":false},\"_hash\":0.8587686344902596,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"},{\"name\":\"f(x)\",\"type\":\"function\",\"label\":\"Second\",\"color\":\"#ffc107\",\"settings\":{\"showLines\":true,\"fillLines\":false,\"showPoints\":false},\"_hash\":0.12775350966079668,\"funcBody\":\"var value = prevValue + Math.random() * 100 - 50;\\nvar multiplier = Math.pow(10, 2 || 0);\\nvar value = Math.round(value * multiplier) / multiplier;\\nif (value < -1000) {\\n\\tvalue = -1000;\\n} else if (value > 1000) {\\n\\tvalue = 1000;\\n}\\nreturn value;\"}]}],\"timewindow\":{\"realtime\":{\"timewindowMs\":60000}},\"showTitle\":true,\"backgroundColor\":\"#fff\",\"color\":\"rgba(0, 0, 0, 0.87)\",\"padding\":\"8px\",\"settings\":{\"shadowSize\":4,\"fontColor\":\"#545454\",\"fontSize\":10,\"xaxis\":{\"showLabels\":true,\"color\":\"#545454\"},\"yaxis\":{\"showLabels\":true,\"color\":\"#545454\"},\"grid\":{\"color\":\"#545454\",\"tickColor\":\"#DDDDDD\",\"verticalLines\":true,\"horizontalLines\":true,\"outlineWidth\":1},\"legend\":{\"show\":true,\"position\":\"nw\",\"backgroundColor\":\"#f0f0f0\",\"backgroundOpacity\":0.85,\"labelBoxBorderColor\":\"rgba(1, 1, 1, 0.45)\"},\"decimals\":1,\"stack\":false,\"tooltipIndividual\":false},\"title\":\"6-timeseries-with-negative-stack-s\",\"dropShadow\":true,\"enableFullscreen\":true,\"titleStyle\":{\"fontSize\":\"16px\",\"fontWeight\":400},\"mobileHeight\":null}"
}
}