We Keep Coding

use JS Classes (CDN) with react (rewrite code), vanillaJS works

I would like to use JS classes from a cdn within a react component.
This is the cdn: https://cdn.jsdelivr.net/gh/Mikhus/canvas-gauges#gh-pages/download/2.1.7/all/gauge.min.js
I have already written the vanillaJS Code, that works well, however I have not idea how
to implement this with react.
The object that is drawn into a canvas is first instantiated with a set of different values,
then it is drawn on the canvas, then you can access the values from outside. I works well with vanillaJS!!
CDN or local file:
<script src="./lib/canvas-gauges.min.js"></script>
html canvas:
<canvas
id="barometer"
</canvas>
instantiating object and drawing it on the canvas:
const barometer = new RadialGauge({
renderTo: canvas,
title: 'hPa',
width: 400,
height: 400,
units: `${location}`,
minValue: 960,
maxValue: 1060,
majorTicks: [
"",
"970",
"980",
"990",
"1000",
"1010",
"1020",
"1030",
"1040",
"1050",
"",
],
minorTicks: 10,
ticksAngle: 270,
startAngle: 45,
strokeTicks: true,
highlights: [
{
"from": 960,
"to": 1005,
"color": "rgba(0,0,255,0.8)"
},
{
"from": 1005,
"to": 1023,
"color": "rgba(0, 151, 19, 0.3)"
},
{
"from": 1023,
"to": 1060,
"color": "rgba(241, 90, 34, 0.9)"
}
],
valueInt: 1,
valueDec: 0,
colorPlate: "beige",
colorMajorTicks: "#686868",
colorMinorTicks: "#686868",
colorTitle: "#000",
colorUnits: "#000",
colorNumbers: "#686868",
valueBox: true,
colorNeedleShadowUp: true,
colorNeedleShadowDown: true,
colorNeedle: "#f59042",
colorNeedleEnd: "#f59042",
colorNeedleCircleOuter: "rgba(200, 200, 200, 1)",
colorNeedleCircleOuterEnd: "rgba(200, 200, 200, 1)",
borderShadowWidth: 0,
borders: false,
borderInnerWidth: 0,
borderMiddleWidth: 0,
borderOuterWidth: 20,
colorBorderOuter: "silver",
colorBorderOuterEnd: "black",
needleType: "arrow",
needleWidth: 2,
needleCircleSize: 7,
needleCircleOuter: true,
needleCircleInner: false,
animationDuration: 1500,
animationRule: "dequint",
fontNumbers: "Arial",
fontTitle: "Arial",
fontUnits: "Arial",
fontValue: "Arial",
fontValueStyle: "italic",
fontNumbersSize: 16,
// fontNumbersStyle: "italic",
fontNumbersWeight: "bold",
fontTitleSize: 16,
fontUnitsSize: 16,
fontValueSize: 16,
animatedValue: true,
});
barometer.draw();
Then the values of that object can be accessed simply like this:
barometer.value = 1024;
Now, I would like to do the same thing with react!
There is also a node module called react-canvas-gauges, here I can make an import like this: import { RadialGauge, LinearGauge} from "react-canvas-gauges";
I can render then:
render() {
<RadialGauge
title= "hPa"
width = "400"... />
}
The point is, I figured out that I must update the value from "OUTSIDE", instantiating the object, drawing it on the canvas and then updating the value, and that is not possible (or against the philosophy of react) doing this with these JSX Components from "OUTSIDE"

How make more advanced charts in node-red? How can I make live chart in Node-red with two or more y axis?

I have problem with make more advanced live chart. I use node-red on PC to collect data from PLC and display it in line chart using standard node-red dashboard chart node. PLC read values from 30 sensors: 20 preassure, 3 temperature, 3 flow, 1 speed. Read frequency is 4Hz. Not all values are visible at time, because I want chart to be clear. For this I need also split y axis according to sensors. So one for preassure, one for temperature, one for flow and one for speed. For now data is coming in form of array msg.payload[] but it is not important because I will format data to proper form. I know format data for live chart to work is
{topic:"temperature", payload:22}
{topic:"humidity", payload:66}
and for static chart
msg.payload =[{
"series": ["A", "B", "C"],
"data": [
[{ "x": 1504029632890, "y": 5 },
{ "x": 1504029636001, "y": 4 },
{ "x": 1504029638656, "y": 2 }
],
[{ "x": 1504029633514, "y": 6 },
{ "x": 1504029636622, "y": 7 },
{ "x": 1504029639539, "y": 6 }
],
[{ "x": 1504029634400, "y": 7 },
{ "x": 1504029637959, "y": 7 },
{ "x": 1504029640317, "y": 7 }
]
],
"labels": [""]
}]
.
standard chart with data from above code
I know node-red dashboard chart is similar to chart.js. I can send ui_control message to adjust actual y-axe and add two more y-axis:
let msg2=
{
ui_control :{
options: {
scales: {
xAxes: [{
type: 'time',
time: {
unit: 'minute',
unitStepSize: 1,
displayFormats: {
minute: 'HH:mm'
}
}
}],
yAxes: [{
id: "1",
scaleLabel: {
display: true,
labelString: 'pressure [bar]'
},
ticks: {
min: -10,
max: 10,
stepSize: 2
}
}, {
id: "2",
scaleLabel: {
display: true,
labelString: 'Temperature [°C]'
},
ticks: {
min: 0,
max: 20,
stepSize: 4
}
}, {
id: "3",
scaleLabel: {
display: true,
labelString: 'Flow [L/min]'
},
ticks: {
min: 0,
max: 20,
stepSize: 4
}
}]
} ,
legend: {
display: true,
position: 'top',
},
title: {
display: true,
text: 'Chart'
}
,
animation: {
duration: 0
}
}},
};
return msg2;
Result is:
Same data, ui_control message result
And now I want display for example:
msg.payload = 5;
msg.topic="C";
msg.yAxis="3";
return msg;
and instead get "C" on axe 3 (temperature), I get it on axe 1 (pressure), and Node-red sometimes freeze after send above message.
chart with one data point on 1 y axe
So now proper question: How Can I use more than one y axis? Can I done this with standard node-red dashboard chart? How data structure should look for static chart, and how for live chart? Maybe I should use node-red template node and write code in HTML based on chart.js? And one last question, how can I minimalize PC usage, because when I run 30 sensors, at 4Hz, I get 1200 point in just 10s?
I will be grateful for your help :D

C3 js: Is it possible to align 2 points from end to end?

this is my first question here in stack overflow.
I'm working with C3 and I'm wondering if is possible to align 2 points from end to end.
for example if in my chart I have 100 and another point -100, but I want to pass through the columns that appears in the image.
let me show you what I want:
I want to join/align the two-point that appears in the circle highlighted:
here is my code:
var chart = c3.generate({
data: {
columns: [
["data1", 30, 200, 100, 400, 150, 250],
["data2", -100],
["data3", null, null, null, null, null, 100],
],
axis: {
y: {
max: 365,
min: 335,
},
},
type: "bar",
types: {
data2: "line",
data3: "line",
},
colors: {
data1: "#f567",
data2: "blue",
},
bar: {
width: {
ratio: 0.5, // this makes bar width 50% of length between ticks
},
},
labels: {
format: function (v, id, i, j) {
return v;
},
},
// or
//width: 100 // this makes bar width 100px
},
});
thank you for your help! :)

I just added this part and it works
line: {
connectNull: true
},

AmChart active only 1 bullet

I'm using AmChart and I would like to active the bullet but only if at the place of the cursor so I have :
var defaultStockChartData = {
...
"ChartCursor":
{
"cursorColor": "#000000",
"color": "#000000",
"cursorAlpha": 0.5,
"bulletSize" : 8,
"bulletsEnabled" : true
},
...
enter code here
But i get this result :
How can I do to only make appear the bullet when the cursor is on it?

If it's can help someone I find a way to do it. You need to put the opacity of the bullet at 0 in the graph and at 1 in the chartCursorSettings:
"chartCursorSettings":
{
"enabled":true,
"graphBulletAlpha":1,
"bulletsEnabled" : true
},
...
"panels" : [ {
"percentHeight" : 70,
"showCategoryAxis" : true,
"stockGraphs" : [ {
"type" : "line",
"id" : "g1",
"bulletBorderAlpha": 1,
"bulletColor": "#000000",
"bullet": "round",
"bulletAlpha" : 0,
"bulletBorderAlpha" : 0,
} ]

Dojo Chart issues in column chart with positive and negative values

I am creating Column chart with positive and negative values using dojo chart.Here i need my starting values starts from 100 instead of zero .Suppose My values are above 100 then it shows above 100 of bar and similary if my values is below 100 then it shows below of 100 like negatives values shows. Below is my code for
index.php
dojo.require("dojox.charting.Chart");
dojo.require("dojox.charting.axis2d.Default");
dojo.require("dojox.charting.plot2d.ClusteredColumns");
dojo.require("dojox.charting.themes.Tufte");
dojo.require("dojox.dtl");
dojo.require("dojox.dtl.Context");
charts = [
{
description: "Clustered columns with positive and negative values, readable theme, 1-second animate-in.",
makeChart: function(node){
(new dojox.charting.Chart(node)).
setTheme(dojox.charting.themes.Tufte).
addAxis("x", { fixLower: "minor", fixUpper: "minor", natural: true }).
addAxis("y", {
majorTickStep: 10,
max: 150,
vertical: true, fixLower: "major", fixUpper: "major" }).
addPlot("default", { type: "ClusteredColumns", gap: 10, animate: { duration: 1000 } }).
addSeries("Series A", [ 120, 110, 107, 115, 121 ] ).
addSeries("Series B", [ 80, 90, 75, 85, 62 ] ).
render();
}
},
];
var now = function(){
return (new Date()).getTime();
};
dojo.addOnLoad(function(){
var defaultStyle = { width: "400px", height: "200px" };
var tmpl = new dojox.dtl.Template(dojo.byId("template").value);
var context = new dojox.dtl.Context({ charts: charts });
dojo.byId("charts").innerHTML = tmpl.render(context);
dojo.forEach(charts, function(item, idx){
var start = now();
var n = dojo.byId("chart_"+idx);
dojo.style(n, item.style||defaultStyle);
item.makeChart(n);
console.debug((now()-start), "ms to create:", (idx+1)+":", item.description);
});
So request to you please suggest how can i set my axis label form 100 instead of 0.So that i can configure my charts

In your code u can add this parameters.
.addAxis("y", {
dropLabels : true,
min : 10,
max : 20,
from: 0,
to: 15
});