Download as txt, pdf, or txt
Download as txt, pdf, or txt
You are on page 1of 1

[{"id":"13e0b8f1.dfe687","type":"ui_template","z":"b633308d.

4a91a","group":"4552fe7
2.fdfa5","name":"Line
Chart","order":4,"width":"15","height":"10","format":"","storeOutMessages":true,"fw
dInMessages":true,"templateScope":"local","x":690,"y":700,"wires":[[]]},
{"id":"33be001d.f6af3","type":"inject","z":"b633308d.4a91a","name":"","topic":"","p
ayload":"","payloadType":"date","repeat":"","crontab":"","once":true,"onceDelay":"0
.62","x":250,"y":700,"wires":[["167e0e6d.2acf32"]]},
{"id":"167e0e6d.2acf32","type":"function","z":"b633308d.4a91a","name":"","func":"\n
var m_first = []\nvar m_second = []\nvar m_labels = []\nvar a\nvar startTime =
1577836800000\nfor(x=1;x<=25;x++){\n a = {x: new Date(startTime), y:
Math.random() * 300}\n m_first.push(a)\n startTime += 86400000\n}\nstartTime
= 1577836800000\nfor(x=1;x<=25;x++){\n a = -2.5 + Math.random() * 5\n
m_second.push(a)\n startTime += 86400000\n
m_labels.push(\"label_\"+x)\n}\n\nmsg.payload = {}\nmsg.payload.first =
JSON.stringify(m_first)\nmsg.payload.second =
JSON.stringify(m_second)\nmsg.payload.labels = JSON.stringify(m_labels)\nreturn
msg;\n","outputs":1,"noerr":0,"x":390,"y":700,"wires":[["7f227cac.38d054"]]},
{"id":"807a85c.8761e78","type":"debug","z":"b633308d.4a91a","name":"","active":true
,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"
full","x":670,"y":740,"wires":[]},
{"id":"7f227cac.38d054","type":"template","z":"b633308d.4a91a","name":"","field":"t
emplate","fieldType":"msg","format":"html","syntax":"mustache","template":"<canvas
id=\"myChart\" width=600 height =300></canvas>\n<script>\nvar textcolor =
getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-
widgetTextColor');\nvar gridcolor =
getComputedStyle(document.documentElement).getPropertyValue('--nr-dashboard-
groupBorderColor');\nvar linecolors = ['#009900','#889900']\n\nvar ctx =
document.getElementById('myChart').getContext('2d');\nvar chart = new Chart(ctx,
{\n // The type of chart we want to create\n type: 'bar',\n\n // The data
for our dataset\n data: {\n labels: {{{payload.labels}}},\n
datasets: [\n {\n type:'line',\n label:
'First',\n backgroundColor: linecolors[0],\n
borderColor: linecolors[0],\n data: {{{payload.first}}},\n
yAxisID: 'left-y-axis',\n steppedLine: false,\n fill:
false,\n borderWidth: 1\n },\n {\n
type:'bar',\n label: 'Second',\n \n
backgroundColor: linecolors[1],\n borderColor: linecolors[1],\n
data: {{{payload.second}}},\n yAxisID: 'right-y-axis',\n
barPercentage: 0.5,\n barThickness: 6,\n
maxBarThickness: 8,\n minBarLength: 2,\n }\n ]\n
},\n\n // Configuration options go here\n options: {\n scales: {\n
yAxes: [\n {\n gridLines :{display:false},\n
id: 'left-y-axis',\n type: 'linear',\n
position: 'left',\n ticks: {\n fontColor:
linecolors[0]\n }\n },\n {\n
gridLines :{zeroLineColor:gridcolor,color:gridcolor,lineWidth:0.5},\n
id: 'right-y-axis',\n type: 'linear',\n
position: 'right',\n ticks: {\n
fontColor:linecolors[1]\n }\n }\n ],\n
xAxes: [\n {\n gridLines :
{zeroLineColor:gridcolor,color:gridcolor,lineWidth:0.5},\n \n
ticks: {\n fontColor:textcolor\n }\n
}\n ]\n }\n }\n});\n</script>\n","output":"str","x":520,"y":70
0,"wires":[["13e0b8f1.dfe687","807a85c.8761e78"]]},
{"id":"4552fe72.fdfa5","type":"ui_group","z":"","name":"Chart","tab":"2ecb90e3.af7a
5","order":3,"disp":true,"width":"15","collapse":false},
{"id":"2ecb90e3.af7a5","type":"ui_tab","z":"","name":"Ovens","icon":"dashboard","or
der":1,"disabled":false,"hidden":false}]

You might also like