Using Chart.js to Display Poll Data in a Cool Way
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.
Tutorial
Table of Contents
- Preliminary Junk
- HTML & CSS
- JavaScript for Vote Buttons and Results Text
- Applying Chart.js
- Conclusion
Preliminary Junk
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 :
HTML & CSS
I set up the bones for this project in index.html
.
And of course, I connected my stylesheet, JavaScript file and the Chart.js node module.
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.
JavaScript for Vote Buttons and Results Text
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.
Using
.getElementsByClassName()
returns anHTMLCollection
type. These are similar to an array, but in order to use array methods likemap()
I have to use the spread operator (...
) to copy theHTMLCollection
into a new array.
I set up an initial vote count for each button:
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()
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.
Applying Chart.js
Chart.js must be applied to a canvas
element. I grab the canvas element from the HTML.
Next, I make my chart by calling new Chart
.
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:
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.
Conclusion
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