Apex Code Development You need to sign in to do that
Don't have an account?
Thiago Antunes Errors Using Third-Party JavaScript Libraries
Hi everyone! I hope you are all well =)!
I'm trying to use the Zing Chart javascript library into a custom LWC, but here what I'm getting:
gauge_chart.html
<template>
<lightning-card title="Gauge chart">
<div lwc:dom="manual" class="gaugeChart"></div>
</lightning-card>
</template>
gauge_chart.js
import { LightningElement } from "lwc";
import { loadScript, loadStyle } from "lightning/platformResourceLoader";
import zingchartlib from "@salesforce/resourceUrl/zingchartlib";
export default class Gauge_chart extends LightningElement {
error;
chart;
gaugeConfig;
chartOn = false;
let gaugeConfig = {
type: "gauge",
globals: {
fontSize: 25
},
plotarea: {
marginTop: 100
},
plot: {
size: "100%",
valueBox: {
placement: "center",
text: "%v",
fontSize: 25,
rules: [
{
rule: "%v == 1000000",
text: "%v <br> Target achieved!"
},
{
rule: "%v > 750000 && %v < 1000000",
text: "%v <br> Way to go!"
},
{
rule: "%v > 500000 && %v <= 750000",
text: "%v <br> Almost there!"
},
{
rule: "%v >= 250000 && %v <= 500000",
text: "%v <br> Keep it up!"
},
{
rule: "%v < 250000",
text: "%v <br> We just started!"
}
]
}
},
tooltip: {
borderRadius: 5
},
scaleR: {
aperture: 180,
minValue: 0,
maxValue: 1000000,
step: 250000,
center: {
visible: false
},
tick: {
visible: false
},
item: {
offsetR: 0,
rules: [
{
rule: "%i == 9",
offsetX: 15
}
]
},
labels: ["0", "250.000", "500.000", "750.000", "1.000.000"],
ring: {
size: 50,
rules: [
{
rule: "%v < 250000",
backgroundColor: "#E53935"
},
{
rule: "%v >= 250000 && %v < 500000",
backgroundColor: "#FFFF00"
},
{
rule: "%v >= 500000 && %v < 750000",
backgroundColor: "#3CB371"
},
{
rule: "%v >= 750000",
backgroundColor: "#29B6F6"
}
]
}
},
refresh: {
type: "feed",
transport: "js",
url: "feed()",
interval: 1500,
resetTimeout: 1000
},
series: [
{
values: [0], // starting value
backgroundColor: "black",
indicator: [10, 5, 5, 5, 0.75],
animation: {
effect: 2,
method: 1,
sequence: 4,
speed: 900
}
}
]
};
renderedCallback() {
if (this.chartOn) {
return;
}
this.chartOn = true;
loadScript(this, zingchartlib)
.then(() => {
zingchart.render({
id: gaugeChart.select(this.template.querySelector('div.gaugeChart')),
data: gaugeConfig,
height: 500,
width: "100%"
});
})
.catch((error) => {
this.error = error;
});
}
}
I'm new to the LWC and Salesforce environment in general also. What can we do?
Could you please help me?
I see you also reached out on https://salesforce.stackexchange.com/questions/354656/why-is-my-gauge-chart-not-being-loaded according to which the Zing Chart javascript library is not compatible with Locker Service.
Copying solution posted by sfdcfox:
"It took a bit longer than strictly necessary to discover the problem, as the script's problem is generated as a Warning, not an Exception.
aura_proddebug.js:56717 WARNING: Failed to load script at /resource/zingchart: Cannot assign to read only property 'JSON' of object '[object Object]' [Cannot assign to read only property 'JSON' of object '[object Object]']
I found this by using the Developer Console, clicking "Pause on Exceptions", then checking "Pause on Caught Exceptions", and then stepping through until I landed in the script. I'm not sure why "error" was unpopulated (I feel like this is a bug in the runtime), but there definitely is a problem.
I probably would have noticed this sooner if I'd read the warnings properly.
I'm not going to research this any further. All I'll say is that this particular library is not compatible with Locker Service, so you'll need to use something else. I know that d3js is compatible with Locker Service if you're looking for a way to animate charts."
Please mark this answer as best so that others facing the same issue will have better visibility and find this information useful. Thank you