Video walk-through of a 100% Bar chart

Video transcript

Here's the transcript of the video that you can see on YouTube by clicking on the green button below. It's a walk-through of the demos/bar-100-pc.html demo which is available in the download archive. Here's the transcript of the video:

In this video, I'm going to talk through the 100% bar chart demo and the code necessary to create it.

The chart itself is a simple stacked bar chart however the data is not initially in the correct format so it does require reformatting from its original state. All of the values add up to 100%, though if they didn't then we could easily convert these to values that do with a little maths magic.

As usual, there are three sections to the code required for this demo. There are the libraries that are included - the core and the Bar chart library. The core library is needed all the time and the Bar chart library is just for showing bar charts.

Then we have the canvas container which contains canvas tag itself. The canvas tag has the usual width height and id attributes. We don't strictly need to put the canvas tag inside a container div - it just might make things a little bit easier to manipulate if we do. Now, if we move on to the JavaScript code, as you can see the initial data is an array with five nested arrays - each of which has 16 pieces of data.

To start with, the data is not quite in the correct format for a stacked bar chart so we’re going to have to do a little formatting first. The data2 array is initialized and that's what's going to contain our final data when we’ve finished processing the original data and which we’ll then give to the bar chart. Then we move on to the for-loops. The outer for-loop has 16 iterations one for each of the pieces of data and also initializes the temporary arr variable. And then the inner loop iterates 5 times getting the relevant piece of data from each of the 5 arrays which are in the data array.

If the values didn’t add up to 100 we could convert them by dividing each piece of data by the total of the stack and then multiplying the result by 100.

So for example, the first stack has individual values of 7, 2, 58, 10 and 23. So to convert the values to percentages we would divide each individual value by the sum of all of the values and then multiply the resulting number by 100. So in this case the values add up to 100 so we don’t have to perform this step.

But if we had, for example, 3 values of 56, 78, and 12 we would have 3 calculations of:

• 56 / (56 + 78 + 12) * 100
• 78 / (56 + 78 + 12) * 100
• 12 / (56 + 78 + 12) * 100

This would result in an array of three values: [38.36, 53.42, 8.22]. And these values add up to 100 - so they can easily be plotted on our chart.

After the inner loop has finished, the temporary arr array is added to the data2 variable.

Now, moving on to the bar chart object creation, we pass it the id of the canvas tag - as usual this is cvs (it doesn’t have to be - it’s just a convention used on the RGraph website). We also give it the data2 variable that we created up above and then we have the configuration.

The grouping for the chart is set to stacked and there are five pieces of data per stack. The text size is increased a little. The margins are increased slightly. The marginInner is either side of the bar itself. Various X axis options are set including the angles of the text that the labels are drawn at. A little offset is applied to the X-axis labels and the x-axis itself is turned off so that it’s not drawn (the labels are still drawn though - it’s just the X-axis itself that’s not drawn), and the Y-axis is turned off too. And finally, units are applied to the end of the numbers on the Y-axis scale.

And that’s all there is to making this chart. Thanks for listening and if you have any questions then feel free to post me a message in the RGraph support forum. See you on the next video.