Using Static Resource in Lightning Web Components for Updated JS Visualizations
What are Static Resources?
Referenced through the $Resource global variable, these let you upload content any that you can upload in Visualforce Page, like images, spreadsheets, CSS or JS files, and a lot more. They can even put up zipped or stand-alone files.
Files collections get bundled into .zip files.
This, in some ways, is akin to making changes to a source-independent fork of code. It lets you sidestep concerns about breaking or staleness of dependent applications owing to an unavailable or outdated source file.
Even more, you can selectively pull up scripts, CSS-style, or image files from these packages.
For Live Demo Click here
Creating Charts with the Chart JS Library
Like many other JS libraries before it, the Chart JS framework lets developers retrieve data from Records and display it as a bar, line, area, or scatter chart.
We’ve used it to render a multi-axis, stepped bar graph in the coming sections (albeit, with randomized data not drawn from Records).
Why you should care about using static resources in LWCs
For starters, referencing these through a Static Resource Path, as opposed to document IDs lets you push changes to all pages depending on a resource. It saves you hours in developer time by centralizing dependencies for things like Reports.
You could, for instance, use this to make public-facing Dashboards and visualizations have the most current data.
Besides this, there’s also the fact that most Custom solutions and implementations are increasingly moving toward LWCs, instead of VF Pages or Lightning Components.
Code Illustration
In this implementation, we’ve designated resourceUrl/ChartJs as a static resource, appended /ChartJs/js/chart.js as a JS file and called the latter into an LWC markup titled chartJsDemo.html using loadScript.
Then, generateSteppedChart() from the Charts JS library creates a Stepped Bar Graph visualization from randomized data for seven months within the LWC.
Finally, we show you how you can go on to put these visualizations on display over Salesforce sites through an app or Visualforce Page.
Source Code
Step 1.
- First we create static resource “ChartJs” for chart.js Go here for example on this.
Step 2.
- Now we create a Lightning Web Component titled ‘chartJsDemo’ that displays a ‘Multi-Axis chart’ based on randomized data.
chartJsDemo.html
chartJsDemo.js
chartJsDemo.xml
Step 3.
- Now we create a lightning app and vf page to display chart js
chartJsDemoApp.app
Code for the VisualForce Page
Try this yourself
For this issue, we went over the usage of static resources in Lightning Web Components to create a Chart JS visualization. We hope this spurs you to make other great JS library powered visualizations using static resources.
For more information about creating custom dashboard components and faster Report updates, reach out to us at sales@hicglobalsolutions.com
India 
USA
UK
Canada