Related
In short, I have events that have data (y) and timestamp (t) and I want to show them on the chart.
Currently, if I have three events:
10:00 AM: 42
11:00 AM: 43
11:20 AM: 44
The chart won't show there is a gap (I refer to the gap of one hour) of data but will simply connect them.
For example, there is a gap between 10PM and 5AM in the following example.
Is there an option to automatically display 0 values if the gap between two points is more than X seconds?
var ctx = document.getElementById('chart').getContext("2d");
var data = [
{
"y": "0.58",
"t": 1565665819571
},
{
"y": "0.84",
"t": 1565665218436
},
{
"y": "1.69",
"t": 1565664625228
},
{
"y": "0.24",
"t": 1565640019245
},
{
"y": "0.24",
"t": 1565639418937
},
{
"y": "0.25",
"t": 1565638819713
},
{
"y": "0.25",
"t": 1565638219190
},
{
"y": "0.23",
"t": 1565637619961
},
{
"y": "0.24",
"t": 1565637018574
},
{
"y": "0.24",
"t": 1565636426432
},
{
"y": "0.24",
"t": 1565635825187
},
{
"y": "0.25",
"t": 1565635218607
},
{
"y": "0.25",
"t": 1565634618853
},
{
"y": "0.26",
"t": 1565634020604
},
{
"y": "0.26",
"t": 1565633419088
},
{
"y": "0.27",
"t": 1565632819216
},
{
"y": "0.27",
"t": 1565632218830
},
{
"y": "0.28",
"t": 1565631620692
},
{
"y": "0.29",
"t": 1565631019620
},
{
"y": "0.29",
"t": 1565630418738
},
{
"y": "0.30",
"t": 1565629818050
},
{
"y": "0.31",
"t": 1565629218872
},
{
"y": "0.33",
"t": 1565628126871
}
]
var chart = new Chart(ctx, {
"type": "line",
"data": {
"datasets": [
{
"label": "Foo",
"backgroundColor": "lightblue",
"borderColor": "blue",
"data": data,
"type": "line",
"pointRadius": 0,
"fill": false,
"lineTension": 0,
"borderWidth": 2,
"spanGaps": false
}
]
},
"options": {
"scales": {
"xAxes": [
{
"type": "time",
"distribution": "series",
"ticks": {
"source": "data",
"autoSkip": true
}
}
],
"yAxes": [
{
"scaleLabel": {
"display": true,
"labelString": "Y"
}
}
]
},
"tooltips": {
"intersect": false,
"mode": "index",
"callbacks": {}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<canvas id="chart"></canvas>
Since v3 chart.js has an ability to set spanGap as a number, determining the maximum gap to span. So in this case, 1 hour gap can be used in order to keep the data points connected, but at the same time have a gap between 11pm and 5 am
Docs: https://www.chartjs.org/docs/latest/charts/line.html#line-styling
Official example: https://www.chartjs.org/docs/latest/samples/scales/time-max-span.html
Here's the adjusted code:
const ctx = document.getElementById('chart');
const data = [{
"y": "0.58",
"x": 1565665819571,
},
{
"y": "0.84",
"x": 1565665218436,
},
{
"y": "1.69",
"x": 1565664625228
},
{
"y": "0.24",
"x": 1565640019245
},
{
"y": "0.24",
"x": 1565639418937
},
{
"y": "0.25",
"x": 1565638819713
},
{
"y": "0.25",
"x": 1565638219190
},
{
"y": "0.23",
"x": 1565637619961
},
{
"y": "0.24",
"x": 1565637018574
},
{
"y": "0.24",
"x": 1565636426432
},
{
"y": "0.24",
"x": 1565635825187
},
{
"y": "0.25",
"x": 1565635218607
},
{
"y": "0.25",
"x": 1565634618853
},
{
"y": "0.26",
"x": 1565634020604
},
{
"y": "0.26",
"x": 1565633419088
},
{
"y": "0.27",
"x": 1565632819216
},
{
"y": "0.27",
"x": 1565632218830
},
{
"y": "0.28",
"x": 1565631620692
},
{
"y": "0.29",
"x": 1565631019620
},
{
"y": "0.29",
"x": 1565630418738
},
{
"y": "0.30",
"x": 1565629818050
},
{
"y": "0.31",
"x": 1565629218872
},
{
"y": "0.33",
"x": 1565628126871
}
]
const chart = new Chart(ctx, {
"type": "line",
"data": {
datasets: [{
label: 'Foo',
backgroundColor: "lightblue",
borderColor: "blue",
fill: false,
data: data,
pointRadius: 0,
spanGaps: 1000 * 60 * 60, // 1 hour
}]
},
options: {
responsive: true,
scales: {
xAxis: {
type: "time"
}
},
"tooltips": {
"intersect": false,
"mode": "index",
"callbacks": {}
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/4.2.0/chart.umd.js"></script>
<script src="https://cdn.jsdelivr.net/npm/luxon#^2"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-luxon#^1"></script>
<canvas id="chart"></canvas>
I need help with increments in Node Red (on Raspberry Pi). I am trying to make a smart thermostat with a LCD touchscreen and an app for remote access (ex. coming home on a cold winter day and want to start heating your apartment).
Some suggestions on how to connect to the Raspberry Pi over the Internet (not local network) with an android and a link on a tutorial or example would be much appreciated.
P.S. I am doing this for a friend and I promised him some good results.
Sorry for messy code... => cleaned it up in the edit
I have tried everything I could think of to make my code work as I am not very experienced with NodeRed nor JS.
Global variables May just do the trick... I haven't figured it out yet...
Another barrier I have encountered is the ability to access and interact with the code outside the local network.
[
{
"id": "9f63513b.e227a",
"type": "ui_slider",
"z": "f216bae9.be3b68",
"name": "",
"label": "",
"group": "b344cd03.40f29",
"order": 2,
"width": "0",
"height": "0",
"passthru": true,
"topic": "slide",
"min": "10",
"max": "45",
"step": 1,
"x": 650,
"y": 140,
"wires": [
[
"4e35591.c5466a8",
"ef681f9b.17845"
]
]
},
{
"id": "4e35591.c5466a8",
"type": "delay",
"z": "f216bae9.be3b68",
"name": "Buffer",
"pauseType": "queue",
"timeout": "5",
"timeoutUnits": "seconds",
"rate": "1",
"nbRateUnits": "1",
"rateUnits": "second",
"randomFirst": "1",
"randomLast": "5",
"randomUnits": "seconds",
"drop": true,
"x": 810,
"y": 60,
"wires": [
[
"eec05221.3091e"
]
]
},
{
"id": "82848cf2.b33d1",
"type": "function",
"z": "f216bae9.be3b68",
"name": "delete payload",
"func": "msg.buton = msg.payload;\ndelete msg.payload;\nmsg.incalzire=msg.buton;\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 480,
"y": 240,
"wires": [
[
"9f63513b.e227a"
]
]
},
{
"id": "ef681f9b.17845",
"type": "ui_gauge",
"z": "f216bae9.be3b68",
"name": "",
"group": "b344cd03.40f29",
"order": 1,
"width": 0,
"height": 0,
"gtype": "gage",
"title": "",
"label": "",
"format": "{{value}}",
"min": "0",
"max": "60",
"colors": [
"#00b500",
"#e6e600",
"#ca3838"
],
"seg1": "",
"seg2": "",
"x": 810,
"y": 220,
"wires": []
},
{
"id": "eec05221.3091e",
"type": "function",
"z": "f216bae9.be3b68",
"name": "delete payload",
"func": "msg.tempslide=msg.payload;\ndelete msg.payload;\n\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 1000,
"y": 60,
"wires": [
[
"f5853672.5fe148"
]
]
},
{
"id": "6b57c137.8c136",
"type": "function",
"z": "f216bae9.be3b68",
"name": "Switch",
"func": "if(msg.payload===0){\n msg.payload=1;\n}\nelse if (msg.payload==1){\n msg.payload=0;\n}\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 310,
"y": 460,
"wires": [
[
"82848cf2.b33d1"
]
]
},
{
"id": "f5853672.5fe148",
"type": "function",
"z": "f216bae9.be3b68",
"name": "working mess",
"func": "if (msg.incalzire===0||msg.payload===0){\n\nif (msg.temp<=msg.tempslide){\n msg.payload=0;\n}\n\nelse if (msg.temp>msg.tempslide){\n msg.payload=1;\n}\n\nelse{\n msg.payload=1;}\n \n}\n\n\nelse{\n msg.payload=1;\n \n}\n\n\n\n\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 1058,
"y": 140,
"wires": [
[
"3f6977e5.b44158",
"ee3a7840.808ad8",
"7726596c.b74228"
]
]
},
{
"id": "d34a3234.79712",
"type": "ui_switch",
"z": "f216bae9.be3b68",
"name": "",
"label": "Override Window",
"group": "b344cd03.40f29",
"order": 4,
"width": 0,
"height": 0,
"passthru": true,
"decouple": "false",
"topic": "",
"style": "",
"onvalue": "1",
"onvalueType": "num",
"onicon": "",
"oncolor": "",
"offvalue": "0",
"offvalueType": "num",
"officon": "",
"offcolor": "",
"x": 250,
"y": 420,
"wires": [
[
"6b57c137.8c136"
]
]
},
{
"id": "3f6977e5.b44158",
"type": "debug",
"z": "f216bae9.be3b68",
"name": "",
"active": false,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "true",
"x": 1293,
"y": 140,
"wires": []
},
{
"id": "ee3a7840.808ad8",
"type": "function",
"z": "f216bae9.be3b68",
"name": "Message",
"func": "if(msg.payload===0){\n msg.payload='PORNITA'; //ON\n}\nelse if (msg.payload==1){\n msg.payload='OPRITA'; //OFF\n}\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 1183,
"y": 340,
"wires": [
[
"eaeac5fb.c27728"
]
]
},
{
"id": "7726596c.b74228",
"type": "rpi-gpio out",
"z": "f216bae9.be3b68",
"name": "Rel1",
"pin": "22",
"set": "",
"level": "0",
"freq": "",
"out": "out",
"x": 1233,
"y": 220,
"wires": []
},
{
"id": "c0784b3b.c1fcb8",
"type": "function",
"z": "f216bae9.be3b68",
"name": "Switch",
"func": "if(msg.payload===0){\n msg.payload=1;\n}\nelse if (msg.payload==1){\n msg.payload=0;\n}\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 250,
"y": 380,
"wires": [
[
"d34a3234.79712"
]
]
},
{
"id": "eaeac5fb.c27728",
"type": "ui_text",
"z": "f216bae9.be3b68",
"group": "b344cd03.40f29",
"order": 3,
"width": 0,
"height": 0,
"name": "",
"label": "Incalzirea este",
"format": "{{msg.payload}}",
"layout": "row-right",
"x": 1220,
"y": 380,
"wires": []
},
{
"id": "248c4825.00c018",
"type": "rpi-gpio in",
"z": "f216bae9.be3b68",
"name": "",
"pin": "40",
"intype": "tri",
"debounce": "25",
"read": false,
"x": 90,
"y": 300,
"wires": [
[
"c0784b3b.c1fcb8"
]
]
},
{
"id": "afb8009a.49841",
"type": "function",
"z": "f216bae9.be3b68",
"name": "delete payload",
"func": "//nu umbla la asta\nmsg.temp=msg.payload;\ndelete msg.payload;\nreturn msg;",
"outputs": 1,
"noerr": 0,
"x": 320,
"y": 140,
"wires": [
[
"c0784b3b.c1fcb8"
]
]
},
{
"id": "c696dbbc.58ee98",
"type": "rpi-dht22",
"z": "f216bae9.be3b68",
"name": "",
"topic": "Interior",
"dht": "22",
"pintype": "1",
"pin": "29",
"x": 140,
"y": 180,
"wires": [
[
"afb8009a.49841",
"33ec6fb6.fda7f"
]
]
},
{
"id": "33ec6fb6.fda7f",
"type": "ui_gauge",
"z": "f216bae9.be3b68",
"name": "",
"group": "d2bfb34b.1c943",
"order": 1,
"width": 0,
"height": 0,
"gtype": "gage",
"title": "",
"label": "° C",
"format": "{{value}}",
"min": 0,
"max": "60",
"colors": [
"#00b500",
"#e6e600",
"#ca3838"
],
"seg1": "",
"seg2": "",
"x": 150,
"y": 220,
"wires": []
},
{
"id": "d3a6bff.b99a44",
"type": "inject",
"z": "f216bae9.be3b68",
"name": "",
"topic": "",
"payload": "",
"payloadType": "date",
"repeat": "50",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"x": 110,
"y": 120,
"wires": [
[
"c696dbbc.58ee98"
]
]
},
{
"id": "b344cd03.40f29",
"type": "ui_group",
"z": "",
"name": "Reglarea Incalzirii",
"tab": "af80de11.bfd15",
"order": 2,
"disp": true,
"width": "6",
"collapse": true
},
{
"id": "d2bfb34b.1c943",
"type": "ui_group",
"z": "",
"name": "Temperatura Curenta",
"tab": "af80de11.bfd15",
"order": 1,
"disp": true,
"width": "6",
"collapse": true
},
{
"id": "af80de11.bfd15",
"type": "ui_tab",
"z": "",
"name": "Sergiu",
"icon": "fa-thermometer-full",
"order": 4
}
]
The old thermostat was basically an automated relay switch. I have to make it smart and my best bet is a raspberry pi.
The increment part can replace the slider(I have Backups) and has to be triggered by a button in the Dashboard UI.
Everything except of what I mentioned works corectly.
Thank you for your help!! (or at least your time)
I am trying to plot the heatmap using 'heatmap js' library .
For some value of inputs if the min value is 0 and max value is 1 then whole heatmap will be red instead of plotting actual values.
It works fine if the max value is other than 1 (ex. min: 0, max 2 or min:0 , max: 3) but only for this case the heatmap fails to map the data.
var data = null;
/* this set of data works fine though */
values = [{
"uid": "1",
"x": 100,
"y": 200,
"value": 0
},
{
"uid": "2",
"x": 100,
"y": 220,
"value": 0
},
{
"uid": "22",
"x": 100,
"y": 240,
"value": 0
},
{
"uid": "30",
"x": 100,
"y": 260,
"value": 0
},
{
"uid": "39",
"x": 100,
"y": 280,
"value": 0
},
{
"uid": "70",
"x": 100,
"y": 300,
"value": 1
},
{
"uid": "75",
"x": 120,
"y": 200,
"value": 0
},
{
"uid": "84",
"x": 140,
"y": 200,
"value": 1
},
{
"uid": "85",
"x": 160,
"y": 200,
"value": 1
},
{
"uid": "104",
"x": 180,
"y": 200,
"value": 0
},
{
"uid": "105",
"x": 200,
"y": 200,
"value": 0
}
];
var heatmap = h337.create({
container: $("#testcanvas").get(0)
});
data = {
max: 1,
min: 0,
data: values
}
heatmap.setData(data);
heatmap.repaint();
#testcanvas {
width: 600px;
height: 600px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/pa7/heatmap.js/master/build/heatmap.js"></script>
<div id="testcanvas"></div>
If I understand correctly your problem then I guess Script understand 0 = false and 1 = true so you need to pass 0 as "0" and 1 as "1"
var data = null;
/* this set of data works fine though */
values = [{
"uid": "1",
"x": 100,
"y": 200,
"value": "0"
},
{
"uid": "2",
"x": 100,
"y": 220,
"value": "0"
},
{
"uid": "22",
"x": 100,
"y": 240,
"value": "0"
},
{
"uid": "30",
"x": 100,
"y": 260,
"value": "0"
},
{
"uid": "39",
"x": 100,
"y": 280,
"value": "0"
},
{
"uid": "70",
"x": 100,
"y": 300,
"value": "1"
},
{
"uid": "75",
"x": 120,
"y": 200,
"value": "0"
},
{
"uid": "84",
"x": 140,
"y": 200,
"value": "1"
},
{
"uid": "85",
"x": 160,
"y": 200,
"value": "1"
},
{
"uid": "104",
"x": 180,
"y": 200,
"value": "0"
},
{
"uid": "105",
"x": 200,
"y": 200,
"value": "0"
}
];
var heatmap = h337.create({
container: $("#testcanvas").get(0)
});
data = {
max: "1",
min: "0",
data: values
}
heatmap.setData(data);
heatmap.repaint();
#testcanvas {
width: 600px;
height: 600px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/pa7/heatmap.js/master/build/heatmap.js"></script>
<div id="testcanvas"></div>
first of all, excuse me for my English, I'm French.
I am coming to you because I have a problem. I would like help browsing a complex JSON object with a loop in Javascript (because it generates itself with JOINTJS) but I am not being able to do it. I can do it manually by json [ "cells"] ["7"] ["attrs"] ["text"] ["text"]. Here is an example of JSON for one element:
{"cells":[
{
"type":"basic.Image",
"position":{
"x":50,
"y":350
},
"size":
{
"width":100,
"height":50
},
"angle":0,
"id":"4a2802a8-0bd6-4d06-9343-921092a1decd",
"z":1,
"attrs":{
"text":{
"text":"230004",
"fill":"black"
},
"image":{
"xlink:href":"/uploads/documents/computer.png",
"width":100,
"height":50
}
}
}
]}
and parse JSON :
I would get the "text": "230004" (which changes depending on the item).
Thank you in advance for your help !
You can access the object like this: obj.cells[7].attrs.text.text, where obj is a variable holding the object.
Also note that as the cells property holds an array, you can loop through that array and get each individual value separately, like this:
var obj = {
"cells": [{
"type": "basic.Image",
"position": {
"x": 50,
"y": 350
},
"size": {
"width": 100,
"height": 50
},
"angle": 0,
"id": "4a2802a8-0bd6-4d06-9343-921092a1decd",
"z": 1,
"attrs": {
"text": {
"text": "230004",
"fill": "black"
},
"image": {
"xlink:href": "/uploads/documents/computer.png",
"width": 100,
"height": 50
}
}
}, {
"type": "basic.Image",
"position": {
"x": 50,
"y": 350
},
"size": {
"width": 100,
"height": 50
},
"angle": 0,
"id": "4a2802a8-0bd6-4d06-9343-921092a1decd",
"z": 1,
"attrs": {
"text": {
"text": "230005",
"fill": "black"
},
"image": {
"xlink:href": "/uploads/documents/computer.png",
"width": 100,
"height": 50
}
}
}, {
"type": "basic.Image",
"position": {
"x": 50,
"y": 350
},
"size": {
"width": 100,
"height": 50
},
"angle": 0,
"id": "4a2802a8-0bd6-4d06-9343-921092a1decd",
"z": 1,
"attrs": {
"text": {
"text": "230006",
"fill": "black"
},
"image": {
"xlink:href": "/uploads/documents/computer.png",
"width": 100,
"height": 50
}
}
}]
}
obj.cells.forEach(function(cell) {
console.log(cell.attrs.text.text);
});
I'm using fusioncharts library. I am not able to find what's wrong with data which I'm sending for scatter chart.
Demo - JSFiddle
{
"chart": {
"animation": 0,
"yaxisname": "OAE (%)",
"xaxisname": "Week",
"xaxismaxvalue": 54,
"xaxisminvalue": 0,
"showregressionline": "1",
"regressionlinethickness": "2",
"regressionLineColor": "008ee4",
"bgcolor": "FFFFFF",
"canvasborderthickness": "1",
"canvasbordercolor": "CCCCCC",
"showalternatehgridcolor": "0",
"divlineColor": "#FFFFFF",
"showLegend": "1",
"showValues": "1"
},
"categories": [{
"verticallinecolor": "c7c7c7",
"category": [{
"label": "46",
"x": "46",
"showverticalline": "1"
}, {
"label": "47",
"x": "47",
"showverticalline": "1"
}, {
"label": "48",
"x": "48",
"showverticalline": "1"
}, {
"label": "49",
"x": "49",
"showverticalline": "1"
}, {
"label": "50",
"x": "50",
"showverticalline": "1"
}, {
"label": "51",
"x": "51",
"showverticalline": "1"
}, {
"label": "52",
"x": "52",
"showverticalline": "1"
}, {
"label": "53",
"x": "53",
"showverticalline": "1"
}, {
"label": "01",
"x": "01",
"showverticalline": "1"
}, {
"label": "02",
"x": "02",
"showverticalline": "1"
}, {
"label": "03",
"x": "03",
"showverticalline": "1"
}, {
"label": "04",
"x": "04",
"showverticalline": "1"
}]
}],
"dataset": [{
"seriesname": "Target",
"color": "93cc1a",
"regressionLineColor": "93cc1a",
"showValues": "0",
"anchorradius": "0",
"anchorSides": "8",
"regressionLineThickness": "5",
"anchorBorderColor": "2A612D",
"anchorBgColor": "93cc1a",
"data": [{
"y": "40%",
"x": "46"
}, {
"y": "40%",
"x": "47"
}, {
"y": "40%",
"x": "48"
}, {
"y": "40%",
"x": "49"
}, {
"y": "40%",
"x": "50"
}, {
"y": "40%",
"x": "51"
}, {
"y": "40%",
"x": "52"
}, {
"y": "40%",
"x": "53"
}, {
"y": "40%",
"x": "01"
}, {
"y": "40%",
"x": "02"
}, {
"y": "40%",
"x": "03"
}, {
"y": "40%",
"x": "04"
}]
}, {
"seriesname": "OAE",
"color": "008ee4",
"anchorradius": "5",
"anchorSides": "7",
"anchorBorderColor": "008ee4",
"anchorBgColor": "008ee4",
"data": [{
"y": "29.73",
"x": "46"
}, {
"y": "100.36",
"x": "47"
}, {
"y": "69.37",
"x": "48"
}, {
"y": "55.55",
"x": "49"
}, {
"y": "64.4",
"x": "50"
}, {
"y": "135.43",
"x": "51"
}, {
"y": "55.02",
"x": "52"
}, {
"y": "NA",
"x": "53"
}, {
"y": "NA",
"x": "01"
}, {
"y": "73.36",
"x": "02"
}, {
"y": "8.28",
"x": "03"
}, {
"y": "137.91",
"x": "04"
}],
"dashed": "1"
}]
}
You can see there are space in between the chart X-axis. Also I want that chart should plot X-axis as I'm passing in categories object. Why it's automatically sorted.
In the fiddle, if you check the minimum value for x-axis ranges from 01-04 and max values from 46 to 52.
Since, there isn't any labels in between 04 and 46, the space in-between is empty. The chart actually is plotted from 01 to 52, the space in between where there is no value or labels will not be skipped.
You can achieve what you want using label. Its just a work around.
Updated Fiddle
"categories": [{
"verticallinecolor": "c7c7c7",
"category": [{
"label": "46",
"x": "0",
"showverticalline": "1"
}, {
"label": "47",
"x": "1",
"showverticalline": "1",
} //......