Plotly restyle update error - javascript

I am trying to update my plotly graph.
Here are the things I have tried.
This is my dataset
var scatter_data = [{
"product_id": 1,
"color": "#ff0000",
"text": "Size :14",
"y": 4,
"x": 6,
"z": 3,
"size": 14
}, {
"product_id": 2,
"color": "#FFFFFF",
"text": "Size :38",
"y": 5,
"x": 4,
"z": 4,
"size": 38
}, {
"product_id": 3,
"color": "#00ff00",
"text": "Size :20",
"y": 3,
"x": 5,
"z": 4,
"size": 20
}, {
"product_id": 4,
"color": "#FFFFFF",
"text": "Size :31",
"y": 6,
"x": 0,
"z": 1,
"size": 31
}, {
"product_id": 5,
"color": "#00ff00",
"text": "Size :20",
"y": 0,
"x": 5,
"z": 1,
"size": 20
}, {
"product_id": 6,
"color": "#ff0000",
"text": "Size :18",
"y": 6,
"x": 1,
"z": 5,
"size": 18
}, {
"product_id": 7,
"color": "#FFa500",
"text": "Size :15",
"y": 0,
"x": 4,
"z": 2,
"size": 15
}, {
"product_id": 8,
"color": "#00ff00",
"text": "Size :13",
"y": 2,
"x": 1,
"z": 1,
"size": 13
}, {
"product_id": 9,
"color": "#FFFFFF",
"text": "Size :11",
"y": 3,
"x": 0,
"z": 1,
"size": 11
}, {
"product_id": 10,
"color": "#FFa500",
"text": "Size :32",
"y": 4,
"x": 2,
"z": 2,
"size": 32
}, {
"product_id": 11,
"color": "#0000ff",
"text": "Size :30",
"y": 1,
"x": 0,
"z": 1,
"size": 30
}, {
"product_id": 12,
"color": "#0000ff",
"text": "Size :39",
"y": 3,
"x": 4,
"z": 3,
"size": 39
}, {
"product_id": 13,
"color": "#FFFFFF",
"text": "Size :33",
"y": 2,
"x": 2,
"z": 4,
"size": 33
}, {
"product_id": 14,
"color": "#ff69b4",
"text": "Size :21",
"y": 0,
"x": 6,
"z": 6,
"size": 21
}, {
"product_id": 15,
"color": "#FFa500",
"text": "Size :34",
"y": 4,
"x": 4,
"z": 2,
"size": 34
}, {
"product_id": 16,
"color": "#FFa500",
"text": "Size :28",
"y": 0,
"x": 0,
"z": 2,
"size": 28
}, {
"product_id": 17,
"color": "#ff69b4",
"text": "Size :10",
"y": 1,
"x": 3,
"z": 1,
"size": 10
}, {
"product_id": 18,
"color": "#00ff00",
"text": "Size :21",
"y": 0,
"x": 5,
"z": 2,
"size": 21
}, {
"product_id": 19,
"color": "#ff0000",
"text": "Size :32",
"y": 6,
"x": 6,
"z": 4,
"size": 32
}, {
"product_id": 20,
"color": "#FFa500",
"text": "Size :16",
"y": 0,
"x": 6,
"z": 1,
"size": 16
}, {
"product_id": 21,
"color": "#0000ff",
"text": "Size :39",
"y": 1,
"x": 4,
"z": 2,
"size": 39
}, {
"product_id": 22,
"color": "#FFa500",
"text": "Size :24",
"y": 2,
"x": 4,
"z": 4,
"size": 24
}, {
"product_id": 23,
"color": "#0000ff",
"text": "Size :25",
"y": 5,
"x": 1,
"z": 0,
"size": 25
}, {
"product_id": 24,
"color": "#FFFFFF",
"text": "Size :35",
"y": 0,
"x": 6,
"z": 4,
"size": 35
}, {
"product_id": 25,
"color": "#ff0000",
"text": "Size :29",
"y": 4,
"x": 2,
"z": 0,
"size": 29
}, {
"product_id": 26,
"color": "#FFa500",
"text": "Size :26",
"y": 2,
"x": 0,
"z": 3,
"size": 26
}, {
"product_id": 27,
"color": "#0000ff",
"text": "Size :27",
"y": 2,
"x": 5,
"z": 5,
"size": 27
}, {
"product_id": 28,
"color": "#ff0000",
"text": "Size :15",
"y": 2,
"x": 5,
"z": 2,
"size": 15
}, {
"product_id": 29,
"color": "#ff69b4",
"text": "Size :27",
"y": 3,
"x": 1,
"z": 4,
"size": 27
}, {
"product_id": 30,
"color": "#FFFFFF",
"text": "Size :16",
"y": 5,
"x": 6,
"z": 5,
"size": 16
}, {
"product_id": 31,
"color": "#00ff00",
"text": "Size :24",
"y": 4,
"x": 5,
"z": 6,
"size": 24
}, {
"product_id": 32,
"color": "#FFa500",
"text": "Size :22",
"y": 5,
"x": 6,
"z": 6,
"size": 22
}, {
"product_id": 33,
"color": "#ff0000",
"text": "Size :12",
"y": 4,
"x": 0,
"z": 4,
"size": 12
}, {
"product_id": 34,
"color": "#ff0000",
"text": "Size :33",
"y": 0,
"x": 3,
"z": 1,
"size": 33
}, {
"product_id": 35,
"color": "#FFa500",
"text": "Size :16",
"y": 0,
"x": 0,
"z": 1,
"size": 16
}, {
"product_id": 36,
"color": "#00ff00",
"text": "Size :32",
"y": 2,
"x": 5,
"z": 2,
"size": 32
}, {
"product_id": 37,
"color": "#ff0000",
"text": "Size :27",
"y": 2,
"x": 6,
"z": 6,
"size": 27
}, {
"product_id": 38,
"color": "#FFFFFF",
"text": "Size :20",
"y": 3,
"x": 4,
"z": 0,
"size": 20
}, {
"product_id": 39,
"color": "#FFa500",
"text": "Size :27",
"y": 6,
"x": 0,
"z": 3,
"size": 27
}, {
"product_id": 40,
"color": "#FFFFFF",
"text": "Size :16",
"y": 1,
"x": 3,
"z": 3,
"size": 16
}, {
"product_id": 41,
"color": "#0000ff",
"text": "Size :29",
"y": 2,
"x": 2,
"z": 0,
"size": 29
}, {
"product_id": 42,
"color": "#ff69b4",
"text": "Size :23",
"y": 6,
"x": 2,
"z": 3,
"size": 23
}, {
"product_id": 43,
"color": "#00ff00",
"text": "Size :10",
"y": 3,
"x": 1,
"z": 5,
"size": 10
}, {
"product_id": 44,
"color": "#FFa500",
"text": "Size :35",
"y": 0,
"x": 2,
"z": 4,
"size": 35
}, {
"product_id": 45,
"color": "#FFFFFF",
"text": "Size :21",
"y": 3,
"x": 3,
"z": 6,
"size": 21
}, {
"product_id": 46,
"color": "#FFa500",
"text": "Size :32",
"y": 2,
"x": 0,
"z": 6,
"size": 32
}, {
"product_id": 47,
"color": "#ff0000",
"text": "Size :24",
"y": 5,
"x": 6,
"z": 3,
"size": 24
}, {
"product_id": 48,
"color": "#FFFFFF",
"text": "Size :30",
"y": 0,
"x": 1,
"z": 6,
"size": 30
}, {
"product_id": 49,
"color": "#ff69b4",
"text": "Size :33",
"y": 3,
"x": 5,
"z": 5,
"size": 33
}, {
"product_id": 50,
"color": "#ff0000",
"text": "Size :10",
"y": 1,
"x": 3,
"z": 1,
"size": 10
}]
1) This is the code through which i am creating the graph
$(document).ready(function(){
trace = [];
data = []
$.each(scatter_data, function(index, value){
// console.log("here"+value);
index ++;
trace[index] = {
x : [value.x],
y: [value.y],
z:[value.z],
text:["Size: "+value.size],
mode : 'markers',
marker : {
color : [value.color],
size : [value.size],
symbol : 'circle',
line: {
color : 'rgb(204,204,204)',
width:1
},
opacity:0.9,
},
type: 'scatter3d',
name : 'category'+index,
title: 'title'+index
};
console.log(trace[index]);
data.push(trace[index]);
});
// var data = [trace[1],trace[2],trace[3]];
var layout = {margin: {
l: 0,
r: 0,
b: 0,
t: 0
}, showlegend : true};
Plotly.newPlot('plotly-div', data, layout, { modeBarButtonsToRemove: ['sendDataToCloud'], displaylogo : false } );
// There exist a event to click on the data point
// var graphDiv = document.getElementById('plotly-div')
// graphDiv.on('plotly_click', function(data){
// // do something using the event data
// console.log(data);
// });
});
Now i have a form through which i edit the data and get that data to update the graph.
for(i=1;i<=50;i++){
trace_no.push(i);
tempx.push($("#x-"+i).val());
tempy.push($("#y-"+i).val());
tempz.push($("#z-"+i).val());
tempsize.push($("#size-"+i).val());
tempcolor.push($("#rgb-combined-"+i).spectrum('get').toHexString());
temptext.push("size : "+$("#size-"+i).val());
}
var update = {
x : [tempx],
y : [tempy],
z : [tempz],
size : [tempsize],
'marker.color' : [tempcolor],
text : [temptext]
}
Plotly.restyle('plotly-div', update, trace_no)
The graph doesnt reflect changes and also all the legends gets colored in 1 particular color
Thanks in Advance!

So i Finally figured out the solution to this one with the help of the author of the library.
Here is the proper syntax :
var update = {
x : [[1],[2],[3],[4],[5]],
y : [[1],[2],[3],[4],[5]],
z : [[1],[2],[3],[4],[5]],
size :[[12],[13],[14],[15],[16]],
'marker.color' : [["#001"],["#005"],["#0f0"],["#f00"],["#00f"]],
text : "size"
}
Plotly.restyle('myDiv', update, [0,1,2,3,4]);
Every trace has to be given a seperate array.

Related

Count the occurrence of success and failed based on the status of each datapoint

Given an array of datapoints. I want to be able to count the occurrence of a datapoint x by the status of each point. The datapoint can exist more than once. The goal is to keep a count for each point and finally return an object of each point and the failure and successful count
For example. Given an array
const data = [
{
"x": 14,
"y": "1",
"created_at": "2021-04-14T14:23:59.825Z",
"status": "undelivered"
},
{
"x": 14,
"y": "1",
"created_at": "2021-04-14T14:27:51.666Z",
"status": "undelivered"
},
{
"x": 15,
"y": "1",
"created_at": "2021-04-15T10:34:07.317Z",
"status": "success"
},
{
"x": 15,
"y": "1",
"created_at": "2021-04-15T10:34:08.601Z",
"status": "undelivered"
},
{
"x": 15,
"y": "1",
"created_at": "2021-04-15T10:34:09.871Z",
"status": "undelivered"
},
{
"x": 15,
"y": "1",
"created_at": "2021-04-15T10:34:11.108Z",
"status": "undelivered"
},
{
"x": 15,
"y": "1",
"created_at": "2021-04-15T10:35:17.969Z",
"status": "pending"
},
{
"x": 15,
"y": "1",
"created_at": "2021-04-15T11:10:59.600Z",
"status": "pending"
},
{
"x": 15,
"y": "1",
"created_at": "2021-04-15T11:22:29.020Z",
"status": "pending"
},
{
"x": 15,
"y": "1",
"created_at": "2021-04-15T11:48:15.974Z",
"status": "pending"
},
{
"x": 16,
"y": "1",
"created_at": "2021-04-16T09:56:30.156Z",
"status": "pending"
},
{
"x": 16,
"y": "1",
"created_at": "2021-04-16T10:49:55.734Z",
"status": "undelivered"
},
{
"x": 16,
"y": "1",
"created_at": "2021-04-16T10:49:56.707Z",
"status": "undelivered"
},
{
"x": 16,
"y": "1",
"created_at": "2021-04-16T10:49:57.692Z",
"status": "undelivered"
},
{
"x": 16,
"y": "1",
"created_at": "2021-04-16T10:49:58.620Z",
"status": "undelivered"
},
{
"x": 16,
"y": "1",
"created_at": "2021-04-16T10:49:59.638Z",
"status": "undelivered"
},
{
"x": 16,
"y": "1",
"created_at": "2021-04-16T10:50:00.561Z",
"status": "undelivered"
},
{
"x": 16,
"y": "1",
"created_at": "2021-04-16T11:11:13.602Z",
"status": "pending"
},
{
"x": 16,
"y": "1",
"created_at": "2021-04-16T11:11:41.271Z",
"status": "pending"
},
{
"x": 16,
"y": "1",
"created_at": "2021-04-16T11:12:06.548Z",
"status": "pending"
},
{
"x": 16,
"y": "1",
"created_at": "2021-04-16T11:26:02.834Z",
"status": "pending"
},
{
"x": 16,
"y": "1",
"created_at": "2021-04-16T11:27:05.462Z",
"status": "undelivered"
},
{
"x": 16,
"y": "1",
"created_at": "2021-04-16T12:11:21.446Z",
"status": "undefined"
},
{
"x": 16,
"y": "1",
"created_at": "2021-04-16T12:12:18.397Z",
"status": "undelivered"
},
{
"x": 16,
"y": "1",
"created_at": "2021-04-16T12:22:05.958Z",
"status": "accepted"
},
{
"x": 18,
"y": "1",
"created_at": "2021-04-18T18:06:57.946Z",
"status": "undelivered"
},
{
"x": 18,
"y": "1",
"created_at": "2021-04-18T18:06:59.179Z",
"status": "undelivered"
},
{
"x": 18,
"y": "1",
"created_at": "2021-04-18T18:07:00.375Z",
"status": "undelivered"
},
{
"x": 18,
"y": "1",
"created_at": "2021-04-18T18:07:01.534Z",
"status": "undelivered"
},
{
"x": 18,
"y": "1",
"created_at": "2021-04-18T18:07:02.633Z",
"status": "undelivered"
},
{
"x": 18,
"y": "1",
"created_at": "2021-04-18T18:07:03.732Z",
"status": "undelivered"
},
{
"x": 20,
"y": "1",
"created_at": "2021-04-20T07:56:17.967Z",
"status": "undelivered"
},
{
"x": 20,
"y": "1",
"created_at": "2021-04-20T07:56:19.073Z",
"status": "undelivered"
},
{
"x": 20,
"y": "1",
"created_at": "2021-04-20T07:56:20.000Z",
"status": "undelivered"
},
{
"x": 20,
"y": "1",
"created_at": "2021-04-20T07:56:21.008Z",
"status": "undelivered"
},
{
"x": 20,
"y": "1",
"created_at": "2021-04-20T07:56:21.972Z",
"status": "undelivered"
},
{
"x": 20,
"y": "1",
"created_at": "2021-04-20T07:56:22.946Z",
"status": "undelivered"
}
]
I want to be able to get result as
result = {
14: {
failureCount: 2,
successCount : 0,
total: 2
},
15: {
failureCount: 7,
successCount : 1,
total: 8
}
.......
}
failureCount is incremented when status is not equal to delivered or success i.e
element.status !== "delivered" || element.status !== "success"
where element is the item in each array
successCount is incremented when status is equal to delivered or success i.e
element.status == "delivered" || element.status == "success"
where element is the item in each array
total is the summation of the y datapoint
Attempt
const map = {};
let failureCount = 0;
let successCount = 0;
data.forEach((element, index) => {
map[element.x] = {
failureCount: failureCount,
successCount: successCount
}
const failed = element.status !== "delivered" || element.status !== "success"
if(element.x in map && failed){
map[element.x] = {
failureCount: map[element.x].failureCount + 1
}
}else {
map[element.x] = {
successCount: map[element.x].successCount + 1
}
}
})
Based on the comments, came up with a slightly modified solution of my original attempt
const map = {};
data.forEach((element, index) => {
if(!map[element.x]){
map[element.x] = {
failureCount: 0,
successCount: 0
}
}
const failed = element.status !== "delivered" && element.status !== "success"
if(failed){
map[element.x].failureCount +=1
}else {
map[element.x].successCount +=1;
}
})
console.log(map)
Issues
The failure condition isn't right.
const failed = element.status !== "delivered" || element.status !== "success"
If element.status is 'success', failed will be true since element.status !== "delivered" returns true.
It should instead be
const failed = element.status !== 'delivered' && element.status !== 'success'
And you're reassigning map[element.x] every time. You should instead use the object if it exists in map or initialize it to a default object with the keys (failureCount, successCount, and total) set to 0.
Solution
You can use Array.prototype.reduce to create the result object. You can initialize the object for each element with { failureCount: 0, successCount: 0, total: 0 } if it doesn't already exist in the accumulator (acc) object. You can then increment failureCount if the status is failed or increment successCount. And then you can increment total.
const data = [ { "x": 14, "y": "1", "created_at": "2021-04-14T14:23:59.825Z", "status": "undelivered" }, { "x": 14, "y": "1", "created_at": "2021-04-14T14:27:51.666Z", "status": "undelivered" }, { "x": 15, "y": "1", "created_at": "2021-04-15T10:34:07.317Z", "status": "success" }, { "x": 15, "y": "1", "created_at": "2021-04-15T10:34:08.601Z", "status": "undelivered" }, { "x": 15, "y": "1", "created_at": "2021-04-15T10:34:09.871Z", "status": "undelivered" }, { "x": 15, "y": "1", "created_at": "2021-04-15T10:34:11.108Z", "status": "undelivered" }, { "x": 15, "y": "1", "created_at": "2021-04-15T10:35:17.969Z", "status": "pending" }, { "x": 15, "y": "1", "created_at": "2021-04-15T11:10:59.600Z", "status": "pending" }, { "x": 15, "y": "1", "created_at": "2021-04-15T11:22:29.020Z", "status": "pending" }, { "x": 15, "y": "1", "created_at": "2021-04-15T11:48:15.974Z", "status": "pending" }, { "x": 16, "y": "1", "created_at": "2021-04-16T09:56:30.156Z", "status": "pending" }, { "x": 16, "y": "1", "created_at": "2021-04-16T10:49:55.734Z", "status": "undelivered" }, { "x": 16, "y": "1", "created_at": "2021-04-16T10:49:56.707Z", "status": "undelivered" }, { "x": 16, "y": "1", "created_at": "2021-04-16T10:49:57.692Z", "status": "undelivered" }, { "x": 16, "y": "1", "created_at": "2021-04-16T10:49:58.620Z", "status": "undelivered" }, { "x": 16, "y": "1", "created_at": "2021-04-16T10:49:59.638Z", "status": "undelivered" }, { "x": 16, "y": "1", "created_at": "2021-04-16T10:50:00.561Z", "status": "undelivered" }, { "x": 16, "y": "1", "created_at": "2021-04-16T11:11:13.602Z", "status": "pending" }, { "x": 16, "y": "1", "created_at": "2021-04-16T11:11:41.271Z", "status": "pending" }, { "x": 16, "y": "1", "created_at": "2021-04-16T11:12:06.548Z", "status": "pending" }, { "x": 16, "y": "1", "created_at": "2021-04-16T11:26:02.834Z", "status": "pending" }, { "x": 16, "y": "1", "created_at": "2021-04-16T11:27:05.462Z", "status": "undelivered" }, { "x": 16, "y": "1", "created_at": "2021-04-16T12:11:21.446Z", "status": "undefined" }, { "x": 16, "y": "1", "created_at": "2021-04-16T12:12:18.397Z", "status": "undelivered" }, { "x": 16, "y": "1", "created_at": "2021-04-16T12:22:05.958Z", "status": "accepted" }, { "x": 18, "y": "1", "created_at": "2021-04-18T18:06:57.946Z", "status": "undelivered" }, { "x": 18, "y": "1", "created_at": "2021-04-18T18:06:59.179Z", "status": "undelivered" }, { "x": 18, "y": "1", "created_at": "2021-04-18T18:07:00.375Z", "status": "undelivered" }, { "x": 18, "y": "1", "created_at": "2021-04-18T18:07:01.534Z", "status": "undelivered" }, { "x": 18, "y": "1", "created_at": "2021-04-18T18:07:02.633Z", "status": "undelivered" }, { "x": 18, "y": "1", "created_at": "2021-04-18T18:07:03.732Z", "status": "undelivered" }, { "x": 20, "y": "1", "created_at": "2021-04-20T07:56:17.967Z", "status": "undelivered" }, { "x": 20, "y": "1", "created_at": "2021-04-20T07:56:19.073Z", "status": "undelivered" }, { "x": 20, "y": "1", "created_at": "2021-04-20T07:56:20.000Z", "status": "undelivered" }, { "x": 20, "y": "1", "created_at": "2021-04-20T07:56:21.008Z", "status": "undelivered" }, { "x": 20, "y": "1", "created_at": "2021-04-20T07:56:21.972Z", "status": "undelivered" }, { "x": 20, "y": "1", "created_at": "2021-04-20T07:56:22.946Z", "status": "undelivered" } ]
const result = data.reduce((acc, { x, status }) => {
acc[x] = acc[x] || {
failureCount: 0,
successCount: 0,
total: 0,
}
const failed = status !== 'delivered' && status !== 'success'
if (failed) {
acc[x].failureCount += 1
} else {
acc[x].successCount += 1
}
acc[x].total += 1
return acc
}, {})
console.log(result)
Try this,
const data = <ACTUAL_DATA>
const map = {}
data.forEach(item => {
let curItem = map[item.x] || {
failureCount: 0,
successCount: 0,
total: 0
}
if (item.status == "delivered" || item.status == "success") {
curItem.successCount += 1
} else {
curItem.failureCount += 1
}
curItem.total += 1
map[item.x] = curItem
})
console.log(map)

Node Red smart Thermostat

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)

ClickMarker is not working in XY Amcharts

I have a requirement where I need to use customlegends in XY Amcharts.
I have implemented them, but When I have added event listeners to those legends, the function wasnt triggered. I dont know the reason, can anyone correct me what I have made a mistake.
You can check the following link for the output:
jsfiddle.net/u371jyjs/3/
clickMarker is a legend-specific event, not a top-level chart event. Put the listener for it inside the legend object:
legend: {
// ...
listeners: [{
"event": "clickMarker",
"method": function(event) {
// toggle the marker state
event.dataItem.hidden = !event.dataItem.hidden;
event.chart.validateNow();
}
}]
}
Demo:
var chart = AmCharts.makeChart("chartdiv", {
"type": "xy",
"path": "https://www.amcharts.com/lib/3/",
"theme": "light",
"dataProvider": [{
"y": 10,
"x": 2,
"value": 59,
"y2": 5,
"x2": 3,
"value2": 44,
"label": "Hello",
"category": "0",
"column-1": 32
}, {
"y": 5,
"x": 8,
"value": 50,
"y2": 15,
"x2": 8,
"value2": 12,
"label": "Hi",
"category": "1000",
"column-1": 14
}, {
"y": 10,
"x": 8,
"value": 19,
"y2": 4,
"x2": 6,
"value2": 35,
"label": "Yo"
}, {
"y": 6,
"x": 5,
"value": 65,
"y2": 5,
"x2": 6,
"value2": 168,
"label": "Howdy"
}, {
"y": 15,
"x": 4,
"value": 92,
"y2": 13,
"x2": 8,
"value2": 102,
"label": "Hi there"
}, {
"y": 13,
"x": 1,
"value": 8,
"y2": 2,
"x2": 0,
"value2": 41,
"label": "Morning"
}, {
"y": 1,
"x": 6,
"value": 35,
"y2": 0,
"x2": 3,
"value2": 16,
"label": "Afternoon"
}],
"valueAxes": [{
"position": "bottom",
"axisAlpha": 0,
"integersOnly": true,
//"labelRotation": 45,
"labelFunction": function(value) {
// define categories
var cats = [
"Nick",
"Sarah",
"Kevin",
"Dominick",
"Christy",
"Kate",
"Julian",
"Anita",
"Mike",
"Kyle",
"Tyrese"
];
return cats[value];
}
}, {
"axisAlpha": 0,
"position": "left"
}],
"startDuration": 1.5,
"graphs": [{
"balloonText": "[[label]]",
"bullet": "circle",
"bulletBorderAlpha": 0.2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"fillAlphas": 0,
"valueField": "value",
"xField": "x",
"yField": "y",
"maxBulletSize": 100
}, {
"balloonText": "[[label]]",
"bullet": "diamond",
"bulletBorderAlpha": 0.2,
"bulletAlpha": 0.8,
"lineAlpha": 0,
"fillAlphas": 0,
"valueField": "value2",
"xField": "x2",
"yField": "y2",
"maxBulletSize": 100
}],
"legend": {
"switchable": true,
"textClickEnabled": true,
"data": [{
title: "One",
color: "#3366CC",
hidden: true
}, {
title: "Two",
color: "#FFCC33"
}],
"listeners": [{
"event": "clickMarker",
"method": function(event) {
event.dataItem.hidden = !event.dataItem.hidden;
event.chart.validateNow()
}
}]
}
});
html, body {
width: 100%;
height: 100%;
margin: 0;
}
#chartdiv {
width: 100%;
height: 100%;
}
<script src="https://www.amcharts.com/lib/3/amcharts.js"></script>
<script src="https://www.amcharts.com/lib/3/xy.js"></script>
<script src="https://www.amcharts.com/lib/3/themes/light.js"></script>
<div id="chartdiv"></div>
<div id="clicked">
</div>

Removing attributes from JSON

I have a JSON tree structure like below using D3. I am saving into Mongo DB but I am trying to remove the unncessary fields like the x, y, id, xo and yo. I was wondering if there is anyway to do this using any natural d3.js function.
{
"name": "law",
"children": [
{
"name": "criminal",
"children": [
{
"name": "drugs",
"children": [
{
"name": "abuse",
"depth": 3,
"x": 14.5161295,
"y": 870,
"id": 17,
"x0": 14.5161295,
"y0": 870,
"children": [
{
"name": "asd",
"id": "aa909548-9200-45d6-86e9-f02708bfb70d",
"depth": 4,
"_children": null,
"x": 14.5161295,
"y": 1160,
"x0": 14.5161295,
"y0": 1160
}
]
},
{
"name": "trafficking",
"depth": 3,
"x": 29.032259,
"y": 870,
"id": 18,
"x0": 29.032259,
"y0": 870
}
],
"depth": 2,
"x": 21.774193,
"y": 580,
"id": 19,
"x0": 21.774193,
"y0": 580
},
{
"name": "sexual harrasement",
"children": [
{
"name": "harrasement in education",
"depth": 3,
"x": 58.064518,
"y": 870,
"id": 15,
"x0": 58.064518,
"y0": 870
},
{
"name": "harrasement in workplace",
"depth": 3,
"x": 72.58064,
"y": 870,
"id": 14,
"x0": 72.58064,
"y0": 870
}
],
"depth": 2,
"x": 65.32258,
"y": 580,
"id": 16,
"x0": 65.32258,
"y0": 580
},
{
"name": "violent",
"children": [
{
"name": "acts intended to cause injury",
"depth": 3,
"x": 101.6129,
"y": 870,
"id": 12,
"x0": 101.6129,
"y0": 870
},
{
"name": "robbery",
"depth": 3,
"x": 116.129036,
"y": 870,
"id": 11,
"x0": 116.129036,
"y0": 870
},
{
"name": "sexual assault",
"depth": 3,
"x": 130.64516,
"y": 870,
"id": 10,
"x0": 130.64516,
"y0": 870
}
],
"depth": 2,
"x": 116.129036,
"y": 580,
"id": 13,
"x0": 116.129036,
"y0": 580
}
],
"depth": 1,
"x": 68.951614,
"y": 290,
"id": 20,
"x0": 68.951614,
"y0": 290
},
{
"name": "family",
"children": [
{
"name": "adoption",
"depth": 2,
"x": 152.41936,
"y": 580,
"id": 2,
"x0": 152.41936,
"y0": 580
},
{
"name": "child abuse",
"depth": 2,
"x": 166.93549,
"y": 580,
"id": 1,
"x0": 166.93549,
"y0": 580
},
{
"name": "divorce",
"children": [
{
"name": "contested-divorce",
"children": [
{
"name": "mediation",
"depth": 4,
"x": 152.41936,
"y": 1160,
"id": 6,
"x0": 152.41936,
"y0": 1160
},
{
"id": "2.1.1.1",
"name": "trial",
"depth": 4,
"x": 166.93549,
"y": 1160,
"x0": 166.93549,
"y0": 1160
}
],
"depth": 3,
"x": 159.67741,
"y": 870,
"id": 7,
"x0": 159.67741,
"y0": 870
},
{
"name": "no-fault divorce",
"children": [
{
"name": "custody",
"depth": 4,
"x": 195.96774,
"y": 1160,
"id": 4,
"x0": 195.96774,
"y0": 1160
},
{
"name": "division of marital assets",
"depth": 4,
"x": 210.48387,
"y": 1160,
"id": 3,
"x0": 210.48387,
"y0": 1160
}
],
"depth": 3,
"x": 203.2258,
"y": 870,
"id": 5,
"x0": 203.2258,
"y0": 870
}
],
"depth": 2,
"x": 181.45161,
"y": 580,
"id": 8,
"x0": 181.45161,
"y0": 580
}
],
"depth": 1,
"x": 166.93549,
"y": 290,
"id": 9,
"x0": 166.93549,
"y0": 290
}
],
"x0": 117.94355,
"y0": 0,
"depth": 0,
"x": 117.94355,
"y": 0,
"id": 21
}
First of all, I totally agree with Gerardo's comment stating that this is neither related to D3 in special nor is D3 a very good choice tackling this problem. As it turns out, this can easily be done in pure JavaScript. Second, although not exactly clear from your question, I suppose you are dealing with an object in literal notation rather than a JSON string.
There are basically two ways to get this done:
Recursively step through your tree using the delete operator to get rid of the properties you do not want in your resulting JSON string to be saved. There are various techniques for doing the actual recursion, many of which are extensively covered by similar questions, so I will leave this aside.
Since you explicitly asked for the tree to be stored as JSON, you can use the replacer parameter, which can be supplied as the second argument to JSON.stringify():
JSON.stringify(value[, replacer[, space]])
[…]
replacer | Optional
A function that alters the behavior of the stringification process, or an array of String and Number objects that serve as a whitelist for selecting/filtering the properties of the value object to be included in the JSON string. If this value is null or not provided, all properties of the object are included in the resulting JSON string.
For this to work, however, you need to specify a whitelist of properties you want to be included in the output. Note, how this is contrary to the deletion of option 1.
For your case this could be something like this:
JSON.stringify(data, ["name", "depth", "children"]);
var data = {
"name": "law",
"children": [
{
"name": "criminal",
"children": [
{
"name": "drugs",
"children": [
{
"name": "abuse",
"depth": 3,
"x": 14.5161295,
"y": 870,
"id": 17,
"x0": 14.5161295,
"y0": 870,
"children": [
{
"name": "asd",
"id": "aa909548-9200-45d6-86e9-f02708bfb70d",
"depth": 4,
"_children": null,
"x": 14.5161295,
"y": 1160,
"x0": 14.5161295,
"y0": 1160
}
]
},
{
"name": "trafficking",
"depth": 3,
"x": 29.032259,
"y": 870,
"id": 18,
"x0": 29.032259,
"y0": 870
}
],
"depth": 2,
"x": 21.774193,
"y": 580,
"id": 19,
"x0": 21.774193,
"y0": 580
},
{
"name": "sexual harrasement",
"children": [
{
"name": "harrasement in education",
"depth": 3,
"x": 58.064518,
"y": 870,
"id": 15,
"x0": 58.064518,
"y0": 870
},
{
"name": "harrasement in workplace",
"depth": 3,
"x": 72.58064,
"y": 870,
"id": 14,
"x0": 72.58064,
"y0": 870
}
],
"depth": 2,
"x": 65.32258,
"y": 580,
"id": 16,
"x0": 65.32258,
"y0": 580
},
{
"name": "violent",
"children": [
{
"name": "acts intended to cause injury",
"depth": 3,
"x": 101.6129,
"y": 870,
"id": 12,
"x0": 101.6129,
"y0": 870
},
{
"name": "robbery",
"depth": 3,
"x": 116.129036,
"y": 870,
"id": 11,
"x0": 116.129036,
"y0": 870
},
{
"name": "sexual assault",
"depth": 3,
"x": 130.64516,
"y": 870,
"id": 10,
"x0": 130.64516,
"y0": 870
}
],
"depth": 2,
"x": 116.129036,
"y": 580,
"id": 13,
"x0": 116.129036,
"y0": 580
}
],
"depth": 1,
"x": 68.951614,
"y": 290,
"id": 20,
"x0": 68.951614,
"y0": 290
},
{
"name": "family",
"children": [
{
"name": "adoption",
"depth": 2,
"x": 152.41936,
"y": 580,
"id": 2,
"x0": 152.41936,
"y0": 580
},
{
"name": "child abuse",
"depth": 2,
"x": 166.93549,
"y": 580,
"id": 1,
"x0": 166.93549,
"y0": 580
},
{
"name": "divorce",
"children": [
{
"name": "contested-divorce",
"children": [
{
"name": "mediation",
"depth": 4,
"x": 152.41936,
"y": 1160,
"id": 6,
"x0": 152.41936,
"y0": 1160
},
{
"id": "2.1.1.1",
"name": "trial",
"depth": 4,
"x": 166.93549,
"y": 1160,
"x0": 166.93549,
"y0": 1160
}
],
"depth": 3,
"x": 159.67741,
"y": 870,
"id": 7,
"x0": 159.67741,
"y0": 870
},
{
"name": "no-fault divorce",
"children": [
{
"name": "custody",
"depth": 4,
"x": 195.96774,
"y": 1160,
"id": 4,
"x0": 195.96774,
"y0": 1160
},
{
"name": "division of marital assets",
"depth": 4,
"x": 210.48387,
"y": 1160,
"id": 3,
"x0": 210.48387,
"y0": 1160
}
],
"depth": 3,
"x": 203.2258,
"y": 870,
"id": 5,
"x0": 203.2258,
"y0": 870
}
],
"depth": 2,
"x": 181.45161,
"y": 580,
"id": 8,
"x0": 181.45161,
"y0": 580
}
],
"depth": 1,
"x": 166.93549,
"y": 290,
"id": 9,
"x0": 166.93549,
"y0": 290
}
],
"x0": 117.94355,
"y0": 0,
"depth": 0,
"x": 117.94355,
"y": 0,
"id": 21
};
var json = JSON.stringify(data, ["name", "depth", "children"]);
console.log(json);

Highcharts min and max xAxis

I have a problem with Hightcharts.
I want to display my graph in a complete day (between 08/12/2012 0:00 and 08/12/2012 23:59)
So I use the xAxis.min and xAxis.max of the Highcharts documentation.
But when I display my graph I don't see the min and max value.
"ic": "images/ciblerouge.png",
"icTrack": "",
"color": "255,0,0,0.5",
"title": "skywaveUnitTest - 08/10/2012",
"xAxis": {
"min": 1349661600000,
"max": 1349747999000,
"startOnTick": false
},
"aData": [{
"name": "Vitesse (Km/h)",
"data": [{
"x": 1349711130233,
"y": 10,
"l": 16789
},
{
"x": 1349711388379,
"y": 10,
"l": null
},
{
"x": 1349711388380,
"y": 290,
"l": 16790
},
{
"x": 1349711861797,
"y": 290,
"l": 16791
},
{
"x": 1349717896097,
"y": 290,
"l": 16792
},
{
"x": 1349718759813,
"y": 290,
"l": 16793
},
{
"x": 1349719132107,
"y": 290,
"l": 16794
}],
"visible": true,
"yAxis": 1,
"marker": {
"enabled": false,
"radius": 0
}
},
{
"name": "Altitude",
"data": [{
"x": 1349711130233,
"y": 0,
"l": 16789
},
{
"x": 1349711388379,
"y": 0,
"l": null
},
{
"x": 1349711388380,
"y": -800,
"l": 16790
},
{
"x": 1349711861797,
"y": -800,
"l": 16791
},
{
"x": 1349717896096,
"y": -800,
"l": null
},
{
"x": 1349717896097,
"y": 0,
"l": 16792
},
{
"x": 1349718759812,
"y": 0,
"l": null
},
{
"x": 1349718759813,
"y": 2400,
"l": 16793
},
{
"x": 1349719132107,
"y": 2400,
"l": 16794
}],
"visible": false,
"yAxis": 1,
"marker": {
"enabled": false,
"radius": 0
}
}],

Categories