Using Chart.js to Display Poll Data in a Cool Way

Jason Melton
Oct 11 · 4 min read

It’s voting time. Get ready to see a million graphs showing poll results of all the various groups — how many left-handed cellists voted green party, how many fiscally liberal vampires want to defund global warming, how many otters publicly opinion that eating is best while lying on your back.

I used Chart.js to build a bar graph that displays poll results between three counters. In this blog, I’ll show you how I did it.

Image for post
Image for post

Jump to the GitHub

Tutorial

  • Preliminary Junk
  • HTML & CSS
  • JavaScript for Vote Buttons and Results Text
  • Applying Chart.js
  • Conclusion

To start, I set up a file for my HTML, CSS, and JavaScript. Then, I installed Chart.js with npm:

npm install chart.js --save

I ended up with a file structure (minus poll-machine-demo.gif) like this :

Image for post
Image for post

I set up the bones for this project in index.html.

Image for post
Image for post

And of course, I connected my stylesheet, JavaScript file and the Chart.js node module.

Image for post
Image for post
Image for post
Image for post

I added CSS to make the buttons and text show up properly. I added some colors, margins, padding, and put everything in a grid. I’m not going to go into severe detail, but you can find the CSS here.

With the counter buttons’ HTML and CSS looking decent, I went to work on their functionality.

First, I grabbed all the buttons and text nodes by their classnames.

Image for post
Image for post

Using .getElementsByClassName() returns an HTMLCollection type. These are similar to an array, but in order to use array methods like map() I have to use the spread operator ( ... ) to copy the HTMLCollection into a new array.

I set up an initial vote count for each button:

Image for post
Image for post

With my buttons in an array, I can map over them and give them each an event listener. Whenever, a button is clicked it will the function updateVote()

Image for post
Image for post

updateVote() does all the work. Its parameter is the first character ( charAt(0) ) of the button id. This will be 'a', 'b', or 'c'. It adds one to the correct result variable.

Next, I map over my results text. These are an array of paragraph elements I have stored in txtArr. I map this array to display the proper result for each element.

Finally, I update the chart. I will cover this in the next section.

Image for post
Image for post

Chart.js must be applied to a canvas element. I grab the canvas element from the HTML.

Image for post
Image for post

Next, I make my chart by calling new Chart.

Image for post
Image for post

new Chart takes a canvas element, chartCvs, for its first argument. For its second argument, it takes an object that holds all the chart specifications:

Image for post
Image for post
Image for post
Image for post

The three main keys of the object are type, data, and options.

type controls the type of graph. Chart.js gives a lot of good options. For this, I went with a simple bar graph by providing the value 'bar’.

The data added differently depending on the type of graph you are making. For each bar, I give information about the color and style of the bar and the data and labels correlating to each letter — A, B, or C.

Finally, for the options, I create a title, turn off tooltips (a hover box I didn’t like), and give labels and ticks to the scales on the y-axis.

The graphs of Chart.js display really nicely with detail and smooth transitions. There was a bit of a learning curve for me to get everything working. For this reason, I hard coded a lot of the project. If I were to redo this, I would abstract a lot of this and explore more of what Chart.js offers. There’s a lot more customization that you can apply to a chart.

Message me if you have any feedback. I would love any suggestions or ideas to better my blog and, of course, the ‘poll machine’. Please comment or feel free to email me at jason.melton2@gmail.com.

Best, Jason

JavaScript In Plain English

New JavaScript + Web Development articles every day.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store