A Beginner Chart.js Tutorial for Company Communications

Sometimes a number is all you need. Perhaps HR needs to show how many days since a workplace injury happened or the specific date of an upcoming event. Maybe everyone knows this quarter’s sales goal of $1 million, and all you need to know is how close you are to hitting it.

Put that number on your ScreenCloud screens and everyone will know what it means.

But “a good sketch is better than a long speech,” as Napoleon Bonaparte is said to have quipped. Sure, this year’s cumulative sales tell you if you’ve hit your goal already, but a graph of sales per month would help you see how fast you’re getting there. If sales dropped in February then more than made up for it in March, a graph can tell you that at a glance.

Your team needs graphs on your digital signage to sketch out the story behind your data. Here’s how to build automated, live-updating graphs in ScreenCloud with Chart.js running in Playgrounds, using Webhooks and Zapier to update your charts and ChatGPT to help customize your code.

The Easiest Way to Get a Graph on Your Screens

Want to get a graph on your company’s digital signage in 2 minutes, flat?

The easiest way to make a graph and put it on your ScreenCloud screens is actually with ScreenCloud’s Google Slides integration. First, build a slide in Google Slides with the chart you want to share. Copy the link to your presentation, then open ScreenCloud’s Apps sidebar, add a new instance of the Google Slides app, then paste your presentation URL in. Moments later, you’ll see a preview of your graph, ready to push to your company’s signage—no code needed.

Another option would be with ScreenCloud Dashboards, which can show any graph from any software your team already uses. Say you have a graph showing how your NPS score changed over time in your customer support app. Add a new Dashboard, enter the link for your support app, log in and select the graph you want to share, and ScreenCloud will automatically grab the latest every time.

Those are both great options to put your first graph on your screens.

But what if you want something a bit more detailed? Maybe you want to animate your graph as it shows up, or want to be able to update the graph automatically whenever new data comes in?

If you’ve got ten minutes, you can build that out in ScreenCloud Playgrounds and Chart.js, especially with ChatGPT to help you get it right. Here’s how.

Build Chart.js-powered Digital Signage

If you’ve never used ScreenCloud Playgrounds before, start out by running through our tutorial to code a live-updating screen with ScreenCloud Playgrounds. You’ll learn Playgrounds basics, including how to automatically update your screen with a webhooks URL and Zapier.

Now we’re going to start over. Make a brand new ScreenCloud Playground instance (with the Big Number template) for your first custom chart.

This time, we’re going to add a Chart.js chart to the site. Chart.js is a JavaScript framework that can turn your numbers into a line, bar, pie, donut, area, radar, or scatter chart with just a few lines of code. It’s relatively easy to use, even more so with ChatGPT as a coding partner.

Start out by adding Chart.js from a CDN to your ScreenCloud Playgrounds HTML (We’re using a slightly older version of Chart.js, as it’s the version ChatGPT suggests—which makes it easier for you to experiment with). Copy the following line, and paste it into ScreenCloud Playgrounds’ HTML header, in a new line after the Google Fonts code in line 15:

`<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/3.3.2/chart.js"></script>`

Now, let’s just copy and paste a very simple chart into ScreenCloud Playgrounds from W3Schools’ Chart.js guide. There, copy everything from the `<canvas` line to the final `</script>` line. In ScreenCloud Playgrounds, paste it in the HTML column, in a new line right under the `<div id="root"></div>` line. While you’re at it, go ahead and remove all of the CSS text, except for the first `body` section, and you should get something similar to the screenshot above.

Let’s see what we’ve got so far. Click Preview, and you should see the text from the JavaScript side of Playgrounds on the top, with your new graph underneath.

It’s a bit rough, right now, so let’s clean it up.

If you know CSS, you could start adding bits of code to the center column to add some design. Or, you could get ChatGPT to do it for you. I copied my HTML column into ChatGPT and asked it how to get my graph centered on the page—it added a new `chart-container` div around the `canvas` element, and added CSS code to center it vertically and horizontally. I then copied the original CSS from Playgrounds for the body, and asked it to change the background to a light gray color.

Play around with ChatGPT to get what you want, then either copy and paste the full code it gives you back into ScreenCloud Playgrounds, or notice what changed then add in only the changed code.

That works with anything on the page. You could ask ChatGPT to increase the graph thickness. Notice that it changes the final value in the `borderColor: "rgba(0,0,255,0.1)",` line from `0.1` to `0.4` ... and then you could continue tweaking on your own, adding a bit more to the value to make it even darker. You could do the same with the chart’s text, gridlines, and more.

Then start working on the text itself. First, the example graph text right now is plotting X and Y values, both of which are numbers. Try changing the Y values line to list months, instead. You could ask ChatGPT to do it for you—or you could manually edit the line as follows:

`const xValues = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];`

Now edit the heading text, which lives in the JavaScript column on the left. I removed the two H2 lines, and added `Total Sales This Year: ` to the H1 title. Then, click Application Data, and add a total number of sales for this year that seems reasonable based on the chart.

One final thing: The original chart had an “undefined” Legend at the top, so I asked ChatGPT to get rid of that, and it added the following code under the chart options:

        plugins: {

          legend: {

                        display: false

          }

        },

Bit by bit, with a bit of back and forth, trial and error, you’ll get something like the screenshot above. You can keep tweaking code on your own, with ChatGPT pointing you in the right direction until you’ve got a line chart ready to share with your team.

Automatically Update a Chart.js Chart in ScreenCloud Playgrounds

You’ve built your first Chart.js-powered ScreenCloud dashboard—yay! Now, let’s take on something a tiny bit more challenging: Updating the chart automatically.

To do that, you’ll first need to move your chart code over to the JavaScript side of ScreenCloud, so it can access your Application Data numbers. Then, using the tricks you’ve already learned in the Playgrounds + Webhooks + Zapier guide at the beginning of this tutorial, we’ll automatically update the numbers when things change.

First, move the chart code. You could get ChatGPT to do it for you—copy both the JavaScript and HTML code, and ask it to move the chart code over to the JavaScript for you.

Or you could do it manually. Move everything inside the `<script>` tags from your HTML file over to the JavaScript file. Your HTML should still have the `<canvas id="myChart"` code, along with the original div from ScreenCloud’s Code. The JavaScript code will update those, the div with the correct heading, and the canvas with your graph.

Preview your graph, and everything should look correct.

Now, let’s make your graph dynamic. You’ll remember that the H1 heading includes the following code to show your sales numbers: `{data ? data.number : "123,456"}`. What’s important here is the `data.number` value. Let’s put that in the yValues for your graph—which should now be in line 10 of your JavaScript.

In that yValues list, replace the first number in the list with the text `data.number`. Preview your chart, and you should have one off-the-charts number followed by the rest of your sales data.

You can get creative, now. Playgrounds’ Application Data lets you add as many data points as you want. You could then update those numbers with a Webhooks URL, then with Zapier’s Webhooks integration could automatically update the Playgrounds numbers whenever anything changes.

Try making a new chart with only a handful of variables, such as a pie chart to show the breakdown between what types of products your team has sold this year. Copy your JavaScript and ask ChatGPT to switch it to a pie chart with two variables. Then in Playgrounds, edit your Application Data to add two new values to track.

Back in the ScreenCloud Playgrounds editor, update your new graph’s yValues to use your new variables. Your final line should look something like this: `const yValues = [data.desktop, data.mobile];`

Now, copy your Application Data webhooks URL, and save and close your Playgrounds editor. Then, open Zapier, and re-follow the steps from the previous tutorial to push updated numbers to ScreenCloud.

And you’re done! Open your Playground again, and this time preview your chart … and you’ll see the updated pie chart reflecting your new numbers. Whenever anything changes, you’ll see the chart update, automatically.

Build Any Dashboard You Want With ScreenCloud

That’s only the start. You can continue experimenting with Chart.js to build more advanced graphs—line charts that update to show sales as they come in, pie charts that expand and contract to show which types of items are selling throughout the day, scatter charts to show even more data points, and more. You could make every chart value dynamic, and update them from your software, or you could hand-code in the core data, and update only a couple more recent values.

If you want even more advanced graphs, you can also use D3.js, the data visualization package used to showcase detailed data such as the global statistics on sites like Our World in Data. It’s a bit more complicated, and requires more data to build out a chart, but ChatGPT can help you make sense of it, too.

Then, back in ScreenCloud, you can continue building out your company’s digital signage with everything you need to keep your team updated about. You can code more Playgrounds screens, throw together simpler notices with Noticeboard, or use ScreenCloud dashboards to show any number on your screen from any application your team uses. That way, your Notion dashboards, Airtable databases, Smartsheet plans, and more can be a glance away for anyone in your company—with ScreenCloud.