Publish content to your screens directly from Microsoft TeamsLearn More
A Beginner Chart.js Tutorial for Company Communications
Your team needs graphs on your digital signage to tell the stories behind your numbers. This step-by-step guide will help you build charts and graphs with Chart.js and ScreenCloud Playgrounds that automatically update with Webhooks data—even if you don’t know how to code.
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.
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:
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.
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"];`
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:
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.
Preview your graph, and everything should look correct.
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.
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.