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"
Related
We have integrated Konva in our project and we are facing issue with Label and Text. Text getting overflow outside the Label.
Expected behaviour
enter image description here
Current Behavior:
enter image description here
var label = new Konva.Label({
"id": "assetLabel_62c280d6f82f05238c2a8779",
"x": 329.3701840204836,
"y": 78.69399520035239,
"width": 50,
"height": 200,
"draggable": true
});
// It plays the role of background for role. If anything regarding to appearance of the
// label should be changed than Konva.Tag will be place to change.
var tag = new Konva.Tag({
"fill": "#FFFF60",
"stroke": "black",
"strokeWidth": 0.8,
"cornerRadius": 4,
"shadowBlur": 6,
"shadowColor": "blue",
"shadowOpacity": 0.7
});
// Text displayed on the label.
var text = new Konva.Text({
"padding": 5,
"fill": "black",
"align": "left",
"fontFamily": "Open Sans",
"fontSize": "16",
"text": "M:1 | C:0 | T:1\nDeviceType: Mono SFP",
"width": "auto",
"height": "auto"
});
//clubbing labels together #important to club them together before using the label
// to avoid issues regarding to dimension.
label.add(tag).add(text);
<script src="https://unpkg.com/konva#8/konva.min.js"></script>
We have integrated Konva in our project and we are facing issue with Label and Text. Text getting overflow outside the Label.
Expected behaviour
enter image description here
Current Behavior:
enter image description here
Please find the code snippet :
self.label = new Konva.Label({
id: ASSET_LABEL + assetData.properties._id,
x: assetData.properties.labelCoordinates.x,
y: assetData.properties.labelCoordinates.y,
draggable: true
});
self.tag = new Konva.Tag({
fill: config.color || Color.DARK_YELLOW,
stroke: Color.BLACK,
strokeWidth: LABEL_STROKE_WIDTH,
cornerRadius: CORNER_RADIUS,
shadowBlur: SHADOW_BLUR,
shadowColor: Color.BLUE,
shadowOpacity: SHADOW_OPACITY
});
self.text = new Konva.Text({
padding: 5,
fill: Color.BLACK,
align: DEFAULT_TEXT_ALIGNMENT,
fontFamily: config.fontFamily || DEFAULT_FONT_FAMILY,
fontSize: config.fontSize || DEFAULT_FONT_SIZE,
text: displayText
});
self.label.add(self.tag).add(self.text);
I running basic html and json file to visualize nodes and links using vis.js. Json files contain list of nodes and links/edges. I refer to SO sample here to run it... example . I test using the examples and it does work and show all the nodes and links. I replace the json file with my own data and when i execute the code... it just show the nodes without any link.
My Json file
{
"nodes": [
{
"id": "openflow:1",
"tpid": [
"openflow:1:2",
"openflow:1:1",
"openflow:1:LOCAL"
]
},
{
"id": "host:00:00:00:00:00:01",
"ip": "10.0.0.1",
"mac": "00:00:00:00:00:01",
"tpid": [
"host:00:00:00:00:00:01"
]
},
{
"id": "openflow:2",
"tpid": [
"openflow:2:LOCAL",
"openflow:2:1",
"openflow:2:2"
]
},
{
"id": "host:00:00:00:00:00:02",
"ip": "10.0.0.2",
"mac": "00:00:00:00:00:02",
"tpid": [
"host:00:00:00:00:00:02"
]
}
],
"edges": [
{
"id": "host:00:00:00:00:00:01/openflow:1:1",
"source": "host:00:00:00:00:00:01",
"target": "openflow:1:1"
},
{
"id": "openflow:2:1/host:00:00:00:00:00:02",
"source": "openflow:2:1",
"target": "host:00:00:00:00:00:02"
},
{
"id": "openflow:1:2",
"source": "openflow:1:2",
"target": "openflow:2:2"
},
{
"id": "openflow:2:2",
"source": "openflow:2:2",
"target": "openflow:1:2"
},
{
"id": "openflow:1:1/host:00:00:00:00:00:01",
"source": "openflow:1:1",
"target": "host:00:00:00:00:00:01"
},
{
"id": "host:00:00:00:00:00:02/openflow:2:1",
"source": "host:00:00:00:00:00:02",
"target": "openflow:2:1", "color":{"color":"green", "highlight":"blue"}, "arrows":{"target":{"scaleFactor":"1.25", "type":"circle"}}
}
]
}
This is the html file
i<!doctype html>
<HTML>
<HEAD>
<meta charset="utf-8" />
<TITLE>[vis.js] Network | Basic Usage | TEST: Load External JSON Datafile</TITLE>
<!-- NPM (http://visjs.org/index.html#download_install): -->
<!-- <script type="text/javascript" src="node_modules/vis/dist/vis.min.js"></script> -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.js"></script>
<!-- Needed for JSON file import (https://stackoverflow.com/questions/33392557/vis-js-simple-example-edges-do-not-show): -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- http://visjs.org/index.html#download_install -->
<!-- <link rel="stylesheet" type="text/css" href="node_modules/vis/dist/vis.css"> -->
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/vis/4.21.0/vis.min.css">
<style type="text/css">
#mynetwork {
/* width: 600px; */
width: 100%;
height: 800px;
border: 2px solid lightgray;
}
</style>
</HEAD>
<BODY>
<div id="mynetwork"></div>
<!-- Add an invisible <div> element to the document, to hold the JSON data: -->
<div id="networkJSON-results" class="results" style="display:none"></div>
<script type="text/javascript">
// -------------------------------------------------------------------------
// OPTIONS:
// http://visjs.org/docs/network/#modules
// http://visjs.org/docs/network/edges.html#
// http://visjs.org/docs/network/physics.html#
var options = {
edges: {
arrows: {
target: {enabled: true, scaleFactor:0.75, type:'arrow'},
// to: {enabled: false, scaleFactor:0.5, type:'bar'},
middle: {enabled: false, scalefactor:1, type:'arrow'},
source: {enabled: true, scaleFactor:0.3, type:'arrow'}
// from: {enabled: false, scaleFactor:0.5, type:'arrow'}
},
arrowStrikethrough: true,
chosen: true,
color: {
// color:'#848484',
color:'red',
highlight:'#848484',
hover: '#848484',
inherit: 'from',
opacity:1.0
},
dashes: false,
font: {
color: '#343434',
size: 14, // px
face: 'arial',
background: 'none',
strokeWidth: 2, // px
strokeColor: '#ffffff',
align: 'horizontal',
multi: false,
vadjust: 0,
bold: {
color: '#343434',
size: 14, // px
face: 'arial',
vadjust: 0,
mod: 'bold'
},
ital: {
color: '#343434',
size: 14, // px
face: 'arial',
vadjust: 0,
mod: 'italic'
},
boldital: {
color: '#343434',
size: 14, // px
face: 'arial',
vadjust: 0,
mod: 'bold italic'
},
mono: {
color: '#343434',
size: 15, // px
face: 'courier new',
vadjust: 2,
mod: ''
}
}
},
// http://visjs.org/docs/network/physics.html#
physics: {
enabled: true,
barnesHut: {
gravitationalConstant: -2000,
centralGravity: 0.3,
// springLength: 95,
springLength: 175,
springConstant: 0.04,
damping: 0.09,
avoidOverlap: 0
},
forceAtlas2Based: {
gravitationalConstant: -50,
centralGravity: 0.01,
springConstant: 0.08,
springLength: 100,
damping: 0.4,
avoidOverlap: 0
},
repulsion: {
centralGravity: 0.2,
springLength: 200,
springConstant: 0.05,
nodeDistance: 100,
damping: 0.09
},
hierarchicalRepulsion: {
centralGravity: 0.0,
springLength: 100,
springConstant: 0.01,
nodeDistance: 120,
damping: 0.09
},
maxVelocity: 50,
minVelocity: 0.1,
solver: 'barnesHut',
stabilization: {
enabled: true,
iterations: 1000,
updateInterval: 100,
onlyDynamicEdges: false,
fit: true
},
timestep: 0.5,
adaptiveTimestep: true
},
};
// -------------------------------------------------------------------------
// IMPORT DATA FROM EXTERNAL JSON FILE:
// Per: https://github.com/ikwattro/blog/blob/master/sources/easy-graph-visualization-with-vis-dot-js.adoc:
// NOTES:
// 1. Must use double quotes ("; not ') in that JSON file;
// 2. Cannot have comments in that file, only data! See:
// https://stackoverflow.com/questions/244777/can-comments-be-used-in-json
// 3. Per the path below, place the "test.json" file in a "data" subdirectory.
var json = $.getJSON("data/11-test2.json")
.done(function(data){
var data = {
nodes: data.nodes,
edges: data.edges
};
var network = new vis.Network(container, data, options);
});
var container = document.getElementById('mynetwork');
</script>
</BODY>
</HTML>
The output only nodes without links/edges
I have check it few times but couldn't find the bottleneck... appreciate someone to advise..what could be wrong here... Thanks
22/11/19-
Appreciate someone who knows about this problem... I have edit my json file and change source/target --> to/from and still the same...link not visible...
*23/11/19-
Still not clue to resolve the problem. Thanks for your advises.
as you say edges are not structured as { id, source, target } but as { id, from, to }. The same applies to options.edges.arrows.
This also seems problematic (two variables named data in the same scope, more like bad practice though):
.done(function(data){
var data = {
nodes: data.nodes,
edges: data.edges
};
The actual answer to your question is that you connect edges to nodes you don't have. For example the first edge goes from host:00:00:00:00:00:01 to openflow:1:1. But there is no node openflow:1:1 (there is openflow:1, maybe you meant that). Since it points nowhere it's invalid and therefore ignored.
PS: The 4.21.0 version line is pretty old and not updated anymore. See https://visjs.github.io/vis-network/examples/network/basic_usage/standalone.html for up to date Vis Network.
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);
}
I'm developing a report in Jaspersoft Studio 6.4 using custom visualization component and Highcharts.
Long story short, when doing a bubble chart or an area chart, plotOptions.fillColor -attribute does not work properly, but leaves the bubbles inside or stacked area chart's insides black. Black color usually means the color is not found, but the line of the bubble/lines in the area chart work as they should.
Here is the following Highcharts script for area chart:
define(['jquery_hc','hchart'], function ($, Highcharts) {
return function (instanceData) {
// Creating the chart
var config = {
chart: {
type: 'area',
plotBorderWidth: 1,
renderTo: instanceData.id,
width: instanceData.width,
height: instanceData.height,
marginBottom: 15,
marginLeft: 40,
marginRight: 5,
marginTop: 5
},
title: {
text: ""
},
colors: ['#927453', '#9b672c', '#b0771e', '#e66726', '#474747', '#949494', '#feb40b', '#bd9c31', '#e0b33a'],
xAxis: {
allowDecimals: false,
title: {enabled: false},
labels: {enabled: false},
visible: false
},
legend: {
itemStyle: {"fontSize": 6},
symbolPadding: 4,
symbolHeight: 4,
symbolWidth: 4,
y: 20
},
credits: {enabled: false},
yAxis: {
title: {enabled: false},
labels: {
style: {"fontSize": 6},
formatter: function () {
return this.value;
},
},
tickInterval: 2
},
plotOptions: {
area: {
stacking: 'percent',
animation: false,
marker: {
enabled: false
},
lineWidth: 1
}
},
series: [{
name: 'that',
data: [502, 635, 809, 947, 1402, 3634, 5268]
}, {
name: 'it',
data: [106, 107, 111, 133, 221, 767, 1766]
}, {
name: 'with',
data: [163, 203, 276, 408, 547, 729, 628]
}, {
name: 'who',
data: [18, 31, 54, 156, 339, 818, 1201]
}, {
name: 'how',
data: [2, 2, 2, 6, 13, 30, 46]
}, {
name: 'this',
data: [82, 72, 62, 46, 113, 320, 443]
}, {
name: 'that',
data: [11, 12, 14, 16, 13, 55, 113]
}, {
name: 'those',
data: [7, 1, 3, 11, 15, 37, 49]
}, {
name: 'these',
data: [108, 301, 504, 1056, 3039, 8018, 10201]
}, {
name: 'this too',
data: [10, 30, 50, 105, 303, 801, 1020]
}]
}
new Highcharts.Chart(config);
}
});
And the build.js:
({
baseUrl: '',
paths: {
jquery_hc: "../jquery-3.2.1",
hchart: "../highcharts",
'areaChart': 'areaChart'
},
shim: {
'hchart' : {
deps: ["jquery_hc"],
exports: 'Highcharts'
}
},
name: 'areaChart',
out: "areaChart.min.js"
})
The highchart is using newest highchart.js and jquery-3.2.1.js.
Few things I've tried to add the color:
Using theme to put the charts main color
Setting plotOptions.fillColor: null
Setting plotOptions.fillColor: '#927453'
Setting plotOptions to "series" from "area"
Setting plotOptions.color: [the same colors]
and maybe few other things based on the API reference from Highcharts.
One thing on the other hand is working, if I put the plotOptions.fillColor: '#ffffff', the color of all changes, which means the issue is mostly about matching one color per dataset.
One huge issue is, that this is not reproducible in JSFiddle (JSFiddle).
So, Jasper Report is possibly to blame, but I'm starting to be out of ideas. I've found one issue, which could be related to this: (https://
community.jaspersoft.com/jaspersoft-studio/issues/8641) , but I haven't been able to do much about it with this setup. My web application is using jasper engine to produce reports and the problem is also present in there.
People of StackOverflow, employees of Highcharts and employees of Jaspersoft, combine your knowledge and help me to solve this issue!
Lastly, a picture of the Jasper Report studio of the generated report:
After looking to code, I found report is properly working when we see it in HTML format but pdf format is not working properly. As we kow CVC component utilises phantmjs in order to download report then I tried to search issue related to phantomjs and highcharts but unable to find anything.
Then I tried looked plotOption property and added following plotOption to your code.
plotOptions: {
series: {
animation: false,
stacking: 'percent',
lineWidth: 1,
fillColor: null,
fillOpacity: 1, // this is default to 0.75
marker: {
enabled: false
}
}
},
Then it starts showing the result in PDF format as well. So the main culprit is fillOpacity If you set it to 1 then your problem will be resolved.
Note: If you use fillOpacity other than 1 then it is not showing result.
You can also specify color, fillcolor and opacity as shown below.
series: [{
name: 'that',
data: [502, 635, 809, 947, 1402, 3634, 5268],
fillColor:'red', // use this color light as compared to color
fillOpacity: 1,
color: 'white' // use this color dark as compared to fillcolor
},
...
...
...
,{
name: 'this too',
data: [10, 30, 50, 105, 303, 801, 1020],
fillColor:'#00ff00',
fillOpacity: 1,
color: 'orange'
}]
You can download code from here.
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