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"

Chart.js Radar chart legend label font size doesn't work

I am using Chart.js.
I want to make my chart legend label font size more bigger.
So I tried like this:
var ctx = $('#skill_chart');
new Chart(ctx,{
"type":"radar",
"data": {
"labels":["Crawling","Django","Ubuntu Server","Coding","Cycling","Running"],
"datasets":[{
"label":"My Second Dataset",
"data":[28,48,40,19,96,27,100],
"fill":true,
"backgroundColor":"rgba(54, 162, 235, 0.2)",
"borderColor":"rgb(54, 162, 235)",
"pointBackgroundColor":"rgb(54, 162, 235)",
"pointBorderColor":"#fff",
"pointHoverBackgroundColor":"#fff",
"pointHoverBorderColor":"rgb(54, 162, 235)"}]
},
"options":{
"elements":{
"line":{
"tension":0,
"borderWidth":3}
}
},
"legend": {
"display": true,
"labels": {
"fontSize": 20,
}
},
});
But It doesn't work.
What should I do?

Your legend object is outside the options object. It needs to be within the options object. The following code will work:
var ctx = $('#skill_chart');
new Chart(ctx,{
"type":"radar",
"data": {
"labels":["Crawling","Django","Ubuntu Server","Coding","Cycling","Running"],
"datasets":[{
"label":"My Second Dataset",
"data":[28,48,40,19,96,27,100],
"fill":true,
"backgroundColor":"rgba(54, 162, 235, 0.2)",
"borderColor":"rgb(54, 162, 235)",
"pointBackgroundColor":"rgb(54, 162, 235)",
"pointBorderColor":"#fff",
"pointHoverBackgroundColor":"#fff",
"pointHoverBorderColor":"rgb(54, 162, 235)"}]
},
"options":{
"elements":{
"line":{
"tension":0,
"borderWidth":3
}
},
"legend": {
"display": true,
"labels": {
"fontSize": 20,
}
},
}
});
Here is a link to the docs for fonts: https://www.chartjs.org/docs/latest/general/fonts.html

You have to set fontSize inside pointLables object in scale object at your configuration. The following options works to customize the font size of labels in data (as you asked in response to #Rounak )
radarOptions: {
scale: {
pointLabels: {
fontSize: 13
}
}
}
All credits to: https://github.com/chartjs/Chart.js/issues/2854#issuecomment-331057910

Chart bar with codeigniter 3

I want to create a chart with the chart bar and list all the new records that I added in my database and get the month it was added.
The problem is my application is in php and I saw that chart.js is in javascript.
This is the html of my chart that is in index.php
<div class="row clearfix">
<!-- Bar Chart -->
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="card">
<div class="header">
<h2>GuiaCorretor - Analitycs</h2>
</div>
<div class="body">
<canvas id="bar_chart" height="50"></canvas>
</div>
</div>
</div>
<!-- #END# Bar Chart -->
</div>
And this is the code that is in my javascript, but here there is no link to my database, how could I sync my javascript and get this information?
$(function () {
//new Chart(document.getElementById("line_chart").getContext("2d"), getChartJs('line'));
new Chart(document.getElementById("bar_chart").getContext("2d"), getChartJs('bar'));
//new Chart(document.getElementById("radar_chart").getContext("2d"), getChartJs('radar'));
//new Chart(document.getElementById("pie_chart").getContext("2d"), getChartJs('pie'));
});
function getChartJs(type) {
var config = null;
if (type === 'bar') {
config = {
type: 'bar',
data: {
labels: ["JANEIRO", "FEVEREIRO", "MARÇO", "ABRIL", "MAIO", "JUNHO", "JULHO", "AGOSTO", "SETEMBRO", "OUTUBRO", "NOVEMBRO", "DEZEMBRO"],
datasets: [{
label: "Imóveis cadastrados",
data: [65, 59, 80, 81, 56, 55, 40],
backgroundColor: 'rgba(0, 188, 212, 0.8)'
}, {
label: "Imóveis cadastrados",
data: [28, 48, 40, 19, 86, 27, 90],
backgroundColor: 'rgba(233, 30, 99, 0.8)'
}]
},
options: {
responsive: true,
legend: false
}
}
}
return config;
}

One way is to use your controller to create the data in an array format, and pass that data into your view as a json string.
In php create the data array that .js needs:
$chartData = [
'labels' => ['Janeiro', 'Fevereiro', ...],
'datasets' => [
[
'label' => "Imóveis cadastrados",
'data' => [65, 59, 80, 81, 56, 55, 40],
'backgroundColor' => 'rgba(0, 188, 212, 0.8)'
],
[...]
]
];
Then json_encode that data as a data attribute of your canvas (the syntax here will vary depending on what method you use to pass dynamic data into your view, I will use raw PHP here for demonstration):
<canvas id="bar_chart" height="50" data-chart-data="<?php json_encode($chartData); ?>"></canvas>
And then lastly use the json contained in that data attribute to power your chart:
config = {
type: 'bar',
data: document.getElementById("bar_chart").data('chart-data'),
options: {
responsive: true,
legend: false
}
}

Updating Data to gauges Needle

Thank you for your time.
I can't get the Needle on the Gauge to move I used the following and no luck.
In the serial monitor I can see the Value of adc change as I move the Potentiometer.in the Web server address 192.168.4.1 I can see the gauge but no movement of the needle as I move the pot.
In the HTML There are 2 scripts. is that put together wrong?
Is there a better way?
<!doctype html>
<html>
<head>
<title>Testing Gauges</title>
<script src="gauge.min.js"></script>
</head>
<body>
<canvas id="gauge-ps"></canvas>
<script>
setInterval(function() {
// Gets ADC value at every one second
GetADC();
}, 1000);
function GetADC() {
var xhttp = new XMLHttpRequest();
var adc=0;
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
adc = Number(this.responseText);
}
};
xhttp.open("GET", "/getADC", false);
xhttp.send();
}
</script>
<script>
var gaugePS = new RadialGauge({
renderTo: 'gauge-ps',
width: 400,
height: 400,
units: 'Temp',
minValue: 0,
maxValue: 100,
majorTicks: [
'0','10','20','30','40','50','60','70','80','90','100'
],
minorTicks: 2,
ticksAngle: 270,
startAngle: 45,
strokeTicks: true,
highlights : [
{ from : 45, to : 80, color : 'rgba(78, 78, 76, 0.5)' },
{ from : 80, to : 100, color : 'rgba(225, 7, 23, 0.75)' }
],
valueInt: 1,
valueDec: 0,
colorPlate: "#fff",
colorMajorTicks: "#686868",
colorMinorTicks: "#686868",
colorTitle: "#000",
colorUnits: "#000",
colorNumbers: "#686868",
valueBox: true,
colorValueText: "#000",
colorValueBoxRect: "#fff",
colorValueBoxRectEnd: "#fff",
colorValueBoxBackground: "#fff",
colorValueBoxShadow: false,
colorValueTextShadow: false,
colorNeedleShadowUp: true,
colorNeedleShadowDown: false,
colorNeedle: "rgba(200, 50, 50, .75)",
colorNeedleEnd: "rgba(200, 50, 50, .75)",
colorNeedleCircleOuter: "rgba(200, 200, 200, 1)",
colorNeedleCircleOuterEnd: "rgba(200, 200, 200, 1)",
borderShadowWidth: 0,
borders: true,
borderInnerWidth: 0,
borderMiddleWidth: 0,
borderOuterWidth: 5,
colorBorderOuter: "#fafafa",
colorBorderOuterEnd: "#cdcdcd",
needleType: "arrow",
needleWidth: 2,
needleCircleSize: 7,
needleCircleOuter: true,
needleCircleInner: false,
animationDuration: 1500,
animationRule: "dequint",
fontNumbers: "Verdana",
fontTitle: "Verdana",
fontUnits: "Verdana",
fontValue: "Led",
fontValueStyle: 'italic',
fontNumbersSize: 20,
fontNumbersStyle: 'italic',
fontNumbersWeight: 'bold',
fontTitleSize: 24,
fontUnitsSize: 22,
fontValueSize: 50,
animatedValue: true
});
gaugePS.draw();
gaugePS.value = "adc" ;
</script>
</body>
</html>

Add an HTTP endpoint for the browser to respond with the latest reading.
First add a handler on the route /getADC:
// declare handleAdcPath before this snippet
server.on("/getADC", handleAdcPath);
Then implement the handler:
void handleAdcPath()
{
auto requestMethod = server.method();
if (requestMethod == HTTP_GET)
{
server.send(200, "text/plain", getAdc());
}
}
Where getAdc has been declared before the snippet above. e.g.
int getAdc()
{
return analogRead(A0);
}

jQuery QRcode does not work with canvas

I'm using this library: https://larsjung.de/jquery-qrcode/ to draw a QR Code inside my canvas, but it doesn't work.
My code:
var a_canvas = document.getElementById("latoSinistro");
var context = a_canvas.getContext("2d");
context.font = "8px appMeFont";
context.textAlign="center";
context.fillText(dati.anagrafica[linguaInUso].prodName, 121, 93);
context.fillText(dati.anagrafica[linguaInUso].pointName, 121, 103);
$("#latoSinistro").qrcode({
"render": 'canvas',
"minVersion": 1,
"maxVersion": 10,
"ecLevel": 'M',
"left": 121,
"top": 130,
"fill": '#000',
"background": null,
"mode": 0,
"size": 100,
"color": "#000000",
"text": "www.app/cod/"+idProdotto
});

make sure you have declare in your view
<div id="latoSinistro"
</div>
make sure your var idProdotto value has been assigned to make qr code generate clearly