Salesforce Developer Community

Thiago Antunes
NEWBIE
10 Points
Member since 2021
Intern
GRI Club

Chatter

Feed
0

Best Answers
0

Likes Received
0

Likes Given
3

Questions
1

Replies

1 replies

Error loading Zing Chart (library)

Hi there!

I am trying to build a gauge chart from the javascript library called Zing Chart, but it is not even is rendered. Why?

Error loading Zing Chart

I did add the zing chart cdn as a static resource before that.

gauge_chart.html

<template>
  <lightning-card title="Gauge Chart" icon-name="utility:chart">
      <div class="slds-grid slds-wrap slds-grid--pull-padded">
          <div if:true={isChartJsInitialized} class="slds-col--padded slds-size--1-of-1">
              <canvas class="gaugechart" lwc:dom="manual"></canvas>
          </div>
          <div if:false={isChartJsInitialized} class="slds-col--padded slds-size--1-of-1">
              Zing Chart Not loaded yet
          </div>
      </div>
  </lightning-card>
</template>

gauge_chart.js

import { LightningElement, track } from "lwc";
import zingchartlib from "@salesforce/resourceUrl/zingchartlib";
import { loadScript, loadStyle } from "lightning/platformResourceLoader";
import { ShowToastEvent } from "lightning/platformShowToastEvent";

export default class GaugeChart extends LightningElement {
  @track isZingChartInitialized;

  config = {
    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"
          }
        ]
      }
    },
    series: [
      {
        values: [0],
        backgroundColor: "black",
        indicator: [10, 5, 5, 5, 0.75],
        animation: {
          effect: 2,
          method: 1,
          sequence: 4,
          speed: 900
        }
      }
    ]
  };

  renderedCallback() {
    if (this.isZingChartInitialized) {
      return;
    }
    this.isZingChartInitialized = true;

    Promise.all([loadScript(this, zingchartlib)])
      .then(() => {
        zingchart.render({
          id: this.template.querySelector("canvas.gaugechart"),
          data: config,
          height: 500,
          width: "100%"
        });
      })
      .catch((error) => {
        this.dispatchEvent(
          new ShowToastEvent({
            title: "Error loading ZingChart",
            // message: error.message,
            variant: "error"
          })
        );
      });
  }
}

Thiago Antunes
August 19, 2021
Like
0

1 replies

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:

Problems

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?