Video walk-through of a basic Bar chart

Video transcript

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

Hello and welcome to this RGraph instructional video. This time we’re going to walk through a basic Bar chart which has tooltips, large text and not a great deal more so it's a great intro for getting familiar with the RGraph way of doing things, making charts and getting yourself up and running, ready to make something a bit more interesting. So let's get on.

The first thing that we have are the script tags and there are four of those. There's the common core library which is required for all charts and which contains the actual core functionality of RGraph. Then we have the dynamic and the tooltip libraries. These are necessary to enable the tooltips functionality to work. And then finally, we have the Bar chart library which we need for making Bar charts.

Then we move on to the canvas tag and we have the tags width and height and the id. If you want to you can wrap the canvas in a div tag and that makes it possible to apply margins and padding.

You can't actually apply the margins and padding to the canvas tag itself because that would knock the tooltip positioning out and we don't want to do that - but we can apply the margins and padding to the div tag and that has the same effect.

In order for the div not to span the entire width of the page we can set the css display property to inline-block and that makes it act like a canvas tag in terms of width and height.

Now we come on to the main code that creates the chart. First we create a new Bar chart object and give it the id of the canvas tag which in this case is cvs. We've specified the data which normally would be an array of numbers, sometimes a nested array of numbers for a grouped or stacked chart - but here, as you can see, it's a string with comma separated values. RGraph will split the string up creating an array - it's just a nicety that saves you a step.

And then we have the main configuration of the chart - let's have a look at that. We start by setting the Y axis units and the colors. We just have a single color in the array - this color will be used for all of the bars not just one.

If we had multiple colors then they would be used for grouped or stacked charts and if we specify the colorsSequential option the colors would be used sequentially - so one after the other.

Then the title is set, the X and the Y axes are turned off, the margins are enlarged slightly and then we come to the tooltips options.

Previously, tooltips were given as an array of strings, but now RGraph supports something called "tooltip templates" which means that you can supply a single string as the tooltips option with certain macros in that string and RGraph will go through and replace them accordingly and present you with an appropriate tooltip. Then, the units for formatted values are set. These are applied to the %{value_formatted} macro. Then a little bit of css is applied to the tooltip, increasing the size of the text.

The responsive option we’ll come to in a later video - we're not going to cover it here. And then after that, the chart is drawn.

That covers the configuration of a basic Bar chart. If you have a question about anything that you’ve seen here today or any of the options simply add a message to the RGraph support forum and I'll get back to you with an answer.

See you on the next video!