Develop Reference

Console errors while hovering on charts in React Highcharts

I have created a component for using BarChart and LineChart. When I am hovering on the data points in the said graph, the console is getting filled with errors mentioned below.
Versions Used
"highcharts": "^10.2.0", "highcharts-react-official": "^2.1.3", "react": "^16.8.6",
Sample Image of the Chart
highcharts.src.js:24745 Uncaught TypeError: m.call is not a function
at k.refresh (highcharts.src.js:24745:1)
at g.<anonymous> (highcharts.src.js:28123:1)
at x (highcharts.src.js:1660:1)
at g.firePointEvent (highcharts.src.js:25813:1)
at f.runPointActions (highcharts.src.js:28121:1)
at f.onContainerMouseMove (highcharts.src.js:27678:1)
highcharts.src.js:24745 Uncaught TypeError: m.call is not a function
at k.refresh (highcharts.src.js:24745:1)
at g.<anonymous> (highcharts.src.js:28123:1)
at x (highcharts.src.js:1660:1)
at g.firePointEvent (highcharts.src.js:25813:1)
at f.runPointActions (highcharts.src.js:28121:1)
at g.onMouseOver (highcharts.src.js:26371:1)
at SVGGElement.e (highcharts.src.js:43249:1)
Chart Options
{
"chart": {
"zoomType": "xy",
"spacingTop": 50,
"style": {
"fontFamily": "Work Sans, sans-serif"
},
"alignTicks": true
},
"colors": [
"#4a8cb2",
"#506A78",
"#bbbbbb"
],
"title": {
"text": ""
},
"subtitle": {
"text": ""
},
"xAxis": {
"title": {},
"margin": 25,
"style": {
"top": 10
},
"categories": [
"Country: other",
"USA",
"Malaysia",
"India",
"United Kingdom",
"Switzerland",
"South Africa",
"Singapore",
"New Zealand",
"Scotland",
"China"
]
},
"tooltip": {
"formatter": {}
},
"yAxis": [
{
"title": {
"text": "ABC"
},
"plotLines": [
{
"color": "#D5D5D5",
"opacity": 0.5,
"dashStyle": "Dash",
"width": 2,
"org_score": 10,
"value": 63,
"label": {
"align": "right",
"style": {
"fontWeight": "bold"
},
"text": "Org Moment Score: 63"
},
"zIndex": 2
}
],
"min": null,
"max": null,
"allowDecimals": false,
"showFirstLabel": true,
"showLastLabel": true,
"labels": {},
"opposite": true
},
{
"title": {
"text": "ABC"
},
"allowDecimals": false,
"gridLineWidth": 0
}
],
"plotOptions": {
"column": {
"stacking": "normal",
"pointWidth": 20,
"states": {
"hover": {
"brightness": -0.3
}
},
"dataLabels": {}
},
"series": {
"pointWidth": 15,
"marker": {
"fillColor": "#FFFFFF",
"lineWidth": 2,
"lineColor": null
},
"dataLabels": {}
}
},
"series": [
{
"name": "Lorem Ipsum",
"type": "column",
"yAxis": 1,
"data": [
1,
73,
20,
24,
49,
6,
9,
14,
1,
1,
1
]
},
{
"name": "Ipsum Lorem",
"type": "line",
"color": "#ffdc4c",
"data": [
47,
62,
63,
63,
63,
63,
65,
65,
81,
81,
84
]
}
],
"credits": {
"enabled": false
},
"legend": {
"enabled": true,
"margin": 10
},
"exporting": {
"chartOptions": {
"title": {
"text": "'Lorem Ipsum Lorem Ipsum"
}
},
"enabled": true,
"allowHTML": true,
"sourceWidth": 1200,
"sourceHeight": 400,
"csv": {},
"menuItemDefinitions": {
"label": {
"text": "Show-Hide Data Labels"
}
},
"buttons": {
"contextButton": {
"align": "right",
"y": -45,
"x": -5,
"menuItems": [
"downloadPNG",
"downloadJPEG",
"downloadPDF",
"separator",
"label"
]
}
}
},
"page": "Ipsum Lorem Ipsum"
}
Usage:
<HighchartsReact
highcharts={Highcharts}
options={chart_options}
allowChartUpdate={true}
ref={chart_ref}/>
Props Passed:
highcharts: Highcharts from highcharts/highstock
ref: React.createRef() passed
I have tried searching for the solution to this issue, but all I have gotten so far is that there are some issues related to tooltips. I can't pinpoint the issue, any help would be appreciated.
https://www.highcharts.com/forum/viewtopic.php?t=42956

The issue is caused by the following code:
tooltip: {
formatter: {}
}
In fact, tooltip.formatter is a callback function, so should be put this way:
tooltip: {
formatter: function() {}
}
or omitted if you don't want to format the tooltip.
Demo:
https://codesandbox.io/s/highcharts-react-demo-forked-0syyvk
API:
https://api.highcharts.com/highcharts/tooltip.formatter

Node-red: How to have an editable u-list?

I'm have a question about Node-red, hope someone can help me.
In my project I need to send a txt file to a few esp32 clients.
I managed to get the .txt file to 1 esp32 client, but what I'll need is to send to several clients, tahnt can vary.
So what I'm trring to get is have an editable list of esp32 clients ( which will turn into subscribed subscribed topics I'm be updating lets say, e.g.: Client_1, Client_2..etc).
I found the node-red-node-ui-list weeks days example with radio buttons (here 1) to be a perfect display for what I need, the thing is, how to produce and editable list that would feed the ui-list demands.
The ui-list needs data in this format [{"title":"Esp32","isChecked":false}].
I managed to produce a list of names: ["Client_1","Client_2"], resorting to an input box that but what I'm not getting able to do is turn this list of names into a list or series (not sure what to call it) that I can feed the ui-list.
In ui-list example we can see how multiple elements should be fed to the list widget:
[{"title":"Sunday","isChecked":true},{"title":"Monday"},{"title":"Tuesday"},{"title":"Wednesday"},{"title":"Thursday"},{"title":"Friday"},{"title":"Saturday","isChecked":true}]
This seems like an list of JSON objects where title and isChecked are the keys, am I right?
the question, hot to get from a list of strings ["Client_1","Client_2"] to that list of objects =
Its a lack of javascript skills for sure.
if anyone has any example or answer that might help me I'm very grateful.
Eventually a delete option would probably be also useful.
And still have to figure out hou to have this list permanent (don't loose it in every reset or power-off).
Here is my current flow, where i can, measure the length, print and delete a global list:
[
{
"id": "81b5cdfd56ea7bbc",
"type": "tab",
"label": "Flow 4",
"disabled": false,
"info": "",
"env":
[]
},
{
"id": "9422ceb76fba4d42",
"type": "inject",
"z": "81b5cdfd56ea7bbc",
"name": "Read length",
"props":
[
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "Ola",
"payloadType": "str",
"x": 510,
"y": 260,
"wires":
[
[
"f9ad60dcd7d9447a"
]
]
},
{
"id": "c4c42d4670044e4f",
"type": "debug",
"z": "81b5cdfd56ea7bbc",
"name": "Read length",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "payload",
"targetType": "msg",
"statusVal": "",
"statusType": "auto",
"x": 1110,
"y": 260,
"wires":
[]
},
{
"id": "f9ad60dcd7d9447a",
"type": "function",
"z": "81b5cdfd56ea7bbc",
"name": "Read length",
"func": "\nvar fs = global.get('deviceList')||0;\n\n//fs[fs.length + 1] = msg.payload;\n\n//msg.payload = fs.length;\n//msg = { payload:fs[33]}\nmsg = { payload:fs.length}\nif (!msg.payload) msg.payload=\"Vazio\";\n//msg.payload=[{ \"title\": msg.payload, \"isChecked\": false }];\n//return msg;\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs":
[],
"x": 810,
"y": 260,
"wires":
[
[
"c4c42d4670044e4f"
]
]
},
{
"id": "82a053ecc65e397e",
"type": "inject",
"z": "81b5cdfd56ea7bbc",
"name": "Add element",
"props":
[
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "Client_1",
"payloadType": "str",
"x": 510,
"y": 340,
"wires":
[
[
"4c0274504c14fe11"
]
]
},
{
"id": "8aa2953926e0644a",
"type": "debug",
"z": "81b5cdfd56ea7bbc",
"name": "Add element",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "payload",
"targetType": "msg",
"statusVal": "",
"statusType": "auto",
"x": 1110,
"y": 340,
"wires":
[]
},
{
"id": "4c0274504c14fe11",
"type": "function",
"z": "81b5cdfd56ea7bbc",
"name": "Add element",
"func": "const fsd = 'deviceList';\n\nlet fs = global.get(fsd) || [];\n\nglobal.set(fsd, fs);\n\nfs[fs.length] = msg.payload;\n\n\n//msg.payload = fs.length;\n//msg = { payload:fs[33]}\n//msg = { payload:fs.length}\n\n//msg.payload=[{ \"title\": msg.payload, \"isChecked\": false }];\n//return msg;\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs":
[],
"x": 810,
"y": 340,
"wires":
[
[
"8aa2953926e0644a"
]
]
},
{
"id": "755407d906abd3bc",
"type": "inject",
"z": "81b5cdfd56ea7bbc",
"name": "Read deviceList",
"props":
[
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "Ola",
"payloadType": "str",
"x": 520,
"y": 300,
"wires":
[
[
"6510945a12641605"
]
]
},
{
"id": "b731204d6fe17dfe",
"type": "debug",
"z": "81b5cdfd56ea7bbc",
"name": "Read deviceList",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "payload",
"targetType": "msg",
"statusVal": "",
"statusType": "auto",
"x": 1120,
"y": 300,
"wires":
[]
},
{
"id": "6510945a12641605",
"type": "function",
"z": "81b5cdfd56ea7bbc",
"name": "Read deviceList",
"func": "\nvar deviceList = global.get('deviceList');\n\n//fs[fs.length + 1] = msg.payload;\n\n//msg.payload = fs.length;\n//msg = { payload:fs[33]}\nmsg = { payload: deviceList}\n\n//msg.payload=[{ \"title\": msg.payload, \"isChecked\": false }];\n//return msg;\nreturn msg;",
"outputs": 1,
"noerr": 0,
"initialize": "",
"finalize": "",
"libs":
[],
"x": 820,
"y": 300,
"wires":
[
[
"b731204d6fe17dfe"
]
]
},
{
"id": "b6e926ea63f838f3",
"type": "inject",
"z": "81b5cdfd56ea7bbc",
"name": "Delete list",
"props":
[
{
"p": "payload"
},
{
"p": "topic",
"vt": "str"
}
],
"repeat": "",
"crontab": "",
"once": false,
"onceDelay": 0.1,
"topic": "",
"payload": "",
"payloadType": "date",
"x": 500,
"y": 380,
"wires":
[
[
"a9b54a8c025573b7"
]
]
},
{
"id": "cf15719dd8237868",
"type": "debug",
"z": "81b5cdfd56ea7bbc",
"name": "Delete deviceList",
"active": true,
"tosidebar": true,
"console": false,
"tostatus": false,
"complete": "payload",
"targetType": "msg",
"statusVal": "",
"statusType": "auto",
"x": 1130,
"y": 380,
"wires":
[]
},
{
"id": "a9b54a8c025573b7",
"type": "change",
"z": "81b5cdfd56ea7bbc",
"name": "",
"rules":
[
{
"t": "delete",
"p": "deviceList",
"pt": "global"
}
],
"action": "",
"property": "",
"from": "",
"to": "",
"reg": false,
"x": 850,
"y": 380,
"wires":
[
[
"cf15719dd8237868"
]
]
}
]

how to make string labels for groupby and aggregated plotly box plot

I've got the following retool javascript code representing my Plotly data object. It however is producing the bar plot as expected but it is not producing any x-axis labels. I would have thought the string I am doing the groupings (the groupby column is a string) over would be under each column but no luck (just integer increments).
Is there a way to get the list of groups as it is plotted? I can then set that as the "xticks" argument. I tried setting the "type":"categorical" but no dice.
[
{
"name": "foobar",
"y": y_column,
"text": text_column,
"type": "bar",
"transforms": [
{
"type": "groupby",
"groups": group_column,
"styles": []
},
{
"type": "aggregate",
"groups": aggregate_group_column,
"aggregations": [
{
"target": target_variable,
"func": "avg",
"enabled": true
}
]
}
]
}
]
The layout is as follows
{
"title": {
"text": "<br>",
"font": {
"color": "#3D3D3D",
"size": 16
}
},
"font": {
"family": "Inter",
"color": "#979797"
},
"showlegend": true,
"legend": {
"xanchor": "center",
"x": 1,
"y": 1.0,
"orientation": "r"
},
"margin": {
"l": 72,
"r": 24,
"t": 80,
"b": 72,
"pad": 2
},
"hovermode": "closest",
"hoverlabel": {
"bgcolor": "#000",
"bordercolor": "#000",
"font": {
"color": "#fff",
"family": "Inter",
"size": 20
}
},
"clickmode": "select+event",
"dragmode": "select",
"xaxis": {
"title": {
"text":'X-Axis',
"standoff": 15,
"font": {
"size": 20
}
},
"type": "linear",
"tickformat": "",
"automargin": true,
"fixedrange": true,
"gridcolor": "#fff",
"zerolinecolor": "#fff",
"tickmode":'array'
},
"yaxis": {
"title": {
"text": variable_name,
"standoff": 6,
"font": {
"size": 20
}
},
"type": "linear",
"tickformat": "",
"automargin": true,
"fixedrange": true,
"zerolinecolor": "#DEDEDE"
}
}

Stacking data by hours AmCharts

Is it possible to stack data hourly ? I have only two columns: time and signal from trigger "trig = 1". So I need to stack all trigger signals on each hour. So on Y axis should be a number sum of all trigger signals in each hour. You can use this example JSFiddle.
Data looks like this:
[{"time":"15:15:00","trig":"1"},{"time":"15:45:00","trig":"1"},
{"time":"16:10:18","trig":"1"},{"time":"16:20:00","trig":"1"},
{"time":"17:30:00","trig":"1"},{"time":"17:50:00","trig":"1"},
{"time":"18:25:00","trig":"1"},{"time":"18:45:00","trig":"1"},
{"time":"19:05:00","trig":"1"},{"time":"19:40:00","trig":"1"},
{"time":"21:15:00","trig":"1"},{"time":"21:50:00","trig":"1"}]
And my JS:
var chart = AmCharts.makeChart( "chartdiv", {
"type": "stock",
"dataSets": [{
"title": "triger",
"fieldMappings": [{
"fromField": "time",
"toField": "time"
}, {
"fromField": "trig",
"toField": "trig"
}],
"compared": false,
"categoryField": "time",
"dataLoader": {
"url": "values4.php",
"format": "json",
"showCurtain": true,
"showErrors": true,
"async": true,
"reverse": true,
"delimiter": ",",
"useColumnNames": true
}
}],
"pathToImages": "images/",
"dataDateFormat": "JJ:NN:SS",
"categoryAxis": {
"parseDates": true
},
"panels": [{
"legend": {},
"stockGraphs": [{
"id": "graph1",
"valueField": "trig",
"type": "column",
"title": "MyGraph",
"fillAlphas": 1
}]
}],
"periodSelector": {
"position": "top",
"dateFormat": "JJ:NN",
"inputFieldWidth": 150,
"periods": [ {
"period": "hh",
"count": 1,
"label": "1 hour",
"selected": true
}, {
"period": "hh",
"count": 2,
"label": "2 hours"
}, {
"period": "hh",
"count": 5,
"label": "5 hour"
}, {
"period": "hh",
"count": 12,
"label": "12 hours"
}, {
"period": "MAX",
"label": "MAX"
} ]
},
"panelsSettings": {
"usePrefixes": true
},
"export": {
"enabled": true,
"position": "bottom-right"
},
"categoryAxesSettings": {
"maxSeries": 1,
"groupToPeriods": ["5ss"]
},
"periodSelector": {
"position": "top",
"inputFieldsEnabled": false,
"periods": [{
"period": "HH",
"count": 1,
"label": "1 hour"
}, {
"period": "HH",
"count": 12,
"label": "12 hours"
}, {
"period": "MAX",
"selected": true,
"label": "MAX"
}]
},
});

Vega how to create charts that dynamically resize & how to change x-axis?

am trying to figure out how to use vega in a web app.
From what I am seeing it looks like it is possible to resize the chart size but I am not entirely sure how to go about it? Would I have to manually change the json object that vega is working off or is there an easier way?
Also, I am having a bad time trying to customize the x-axis. I have date that ranges from 0-potentially thousands. Would like to be able to dynamically set the tick data for the x-axis (by tick data I mean how the x axis increments.. part of my confusion I'm sure is that I don't know what vega means by tick, etc.).
BTW, I'm using angular for the front-end with ng-vega to put the "spec" for vega onto the scope.

{
"signals":[
{
"name":"width",
"init":"isFinite(containerSize()[0]) ? containerSize()[0] : 200",
"on":[
{
"update":"isFinite(containerSize()[0]) ? containerSize()[0] : 200",
"events":"window:resize"
}
]
}
]
}
Please have a look in sample
{
"$schema": "https://vega.github.io/schema/vega/v5.json",
"autosize": {"type": "fit", "contains": "padding"},
"background": "white",
"padding": 5,
"height": 200,
"style": "cell",
"data": [
{
"name": "source_0",
"url": "data/seattle-weather.csv",
"format": {"type": "csv", "parse": {"date": "date"}, "delimiter": ","},
"transform": [
{
"type": "formula",
"as": "month_date",
"expr": "datetime(0, month(datum[\"date\"]), 1, 0, 0, 0, 0)"
},
{
"type": "formula",
"as": "month_date_end",
"expr": "datetime(0, month(datum[\"date\"])+1, 1, 0, 0, 0, 0)"
},
{
"type": "aggregate",
"groupby": ["month_date", "month_date_end"],
"ops": ["mean"],
"fields": ["precipitation"],
"as": ["mean_precipitation"]
},
{
"type": "filter",
"expr": "(isDate(datum[\"month_date\"]) || (isValid(datum[\"month_date\"]) && isFinite(+datum[\"month_date\"])))"
}
]
}
],
"signals": [
{
"name": "width",
"init": "isFinite(containerSize()[0]) ? containerSize()[0] : 200",
"on": [
{
"update": "isFinite(containerSize()[0]) ? containerSize()[0] : 200",
"events": "window:resize"
}
]
}
],
"marks": [
{
"name": "marks",
"type": "rect",
"style": ["bar"],
"from": {"data": "source_0"},
"encode": {
"update": {
"fill": {"value": "#4c78a8"},
"x2": [
{
"test": "!isValid(datum[\"month_date\"]) || !isFinite(+datum[\"month_date\"])",
"value": 0
},
{"scale": "x", "field": "month_date", "offset": 1}
],
"x": [
{
"test": "!isValid(datum[\"month_date\"]) || !isFinite(+datum[\"month_date\"])",
"value": 0
},
{"scale": "x", "field": "month_date_end"}
],
"y": {"scale": "y", "field": "mean_precipitation"},
"y2": {"scale": "y", "value": 0}
}
}
}
],
"scales": [
{
"name": "x",
"type": "time",
"domain": {
"data": "source_0",
"fields": ["month_date", "month_date_end"]
},
"range": [0, {"signal": "width"}]
},
{
"name": "y",
"type": "linear",
"domain": {"data": "source_0", "field": "mean_precipitation"},
"range": [{"signal": "height"}, 0],
"nice": true,
"zero": true
}
],
"axes": [
{
"scale": "x",
"orient": "bottom",
"gridScale": "y",
"grid": true,
"domain": false,
"labels": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
},
{
"scale": "y",
"orient": "left",
"gridScale": "x",
"grid": true,
"tickCount": {"signal": "ceil(height/40)"},
"domain": false,
"labels": false,
"maxExtent": 0,
"minExtent": 0,
"ticks": false,
"zindex": 0
},
{
"scale": "x",
"orient": "bottom",
"grid": false,
"title": "date (month)",
"labelFlush": true,
"labelOverlap": true,
"encode": {
"labels": {
"update": {"text": {"signal": "timeFormat(datum.value, '%b')"}}
}
},
"zindex": 0
},
{
"scale": "y",
"orient": "left",
"grid": false,
"title": "Mean of precipitation",
"labelOverlap": true,
"tickCount": {"signal": "ceil(height/40)"},
"zindex": 0
}
],
"config": {"background": "white"}
}