Video walk-through of the bar-borders demo

`

Video transcript

Here's the transcript of the video that you can see above. It takes you through the bar-borders.html demo page.

In this video I'm going to explain the stripy Bar chart demo called bar-borders.html which you can find in the demos directory of the download archive. This demo is a good example of combining two or more chart objects - three Bar charts in this case - to produce a chart that would otherwise not be possible.

This chart is made with a black bar chart at the back (ie it's drawn first), then a red Bar chart is drawn (ie "on top" of the black Bar chart) which has a larger marginInner setting than the black chart - so the black bars behind the red bars show through. And finally, another Bar chart is drawn which has the same marginInner setting as the black chart (so the bars are the same size) however the colors of this chart are set to be transparent. It's this chart that has the tooltips set on it which enables you to click on the transparent bars and makes it look like the hotspot for the tooltips covers both the black and red bars.

In terms of the code, there are a few variables defined first which makes reusing values in conjunction with the spread operator easier. These are the data (used by all of the charts), a few margin settings and some values to turn off the axes.

The first chart, which is the black Bar chart, increases the text size, configures the background grid, sets the labels to a predefined RGraph variable (short versions of the day names) and sets the colors property to black.

The second Bar chart has a small configuration because of the spread operator which allows it to import the settings that were defined earlier, but it does set a larger marginInner setting and turns off the Y-axis scale.

The final Bar chart is the chart that facilitates the tooltips. It imports the common settings that were defined earlier using the spread operator, sets the colors to a single transparent value, turns off the Y-axis scale and background grid and sets up the tooltips. The tooltips are specified by using a string value, which has one of the RGraph macros in it. This macro is expanded to the relevant value as the tooltip is shown. The macro used by this demo is the %{value_formatted} macro which is expanded to the value of the bar and has formatting applied to it. The tooltipsFormattedUnitsPost property adds units after the value. Finally, some CSS is then applied to the tooltips which enlarges the size of the text.

And that's all there is to this Bar chart. It shows you that you don't necessarily need complicated JavaScript to create charts that RGraph doesn't provide out-of-the-box. If you have a question about anything that you've seen here or about 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 in the next video!