Video walk-through of a Funnel chart demo

Video transcript

Here's the transcript of the video that you can see above. It's a walk-through of the demos/funnel-key-stages.html demo which is available in the download archive. Here's the transcript of the video:

In this video, I'm going to walk through a Funnel chart demo which has been configured to look significantly different from a basic Funnel chart You can find the demo in the RGraph archives demo folder called funnel-key-stages.html

It has a title, a subtitle, a key, the labels are off to the left-hand side and positioned on the edges of the Funnel chart segments and the margins have been customized so that the Funnel chart takes up most of the available space on the canvas tag.

The chart also has tooltips, which are just the labels repeated but they use tooltip templates so this is easy to implement.

There are five libraries included on the page - they are the common core library, which is always required, the dynamic and the tooltips library which are needed for tooltips, the key library which is needed for the key to be displayed and of course the funnel chart library.

The HTML for the chart consists of a canvas tag which is nested within a div tag, The canvas tag has the usual ID, width and height attributes and it also has a style attribute which gives the canvas a small border. There's also a CSS cursor property which is set to default but you can omit this as it is not required.

Now, looking through the options that are set to configure the chart. The funnel chart is created in the normal way and given the ID of our canvas tag which is CVS. We only have four entries in the data 100, 75, 50 and 25 which are unlikely to be your real values but they will serve our purposes for this demo quite well.

Now, moving on to the configuration there's a reasonable amount of configuration in order to make the chart look quite customized from the default style of Funnel chart.

The title and the subtitle are both specified. By default the subtitle appears grey and is positioned just underneath the title. The marginTop property is set to a larger than normal value in order to accommodate the title, subtitle and the key. Other margins are set by the responsive function which will come to in a second.

The colours for the chart are defined - in this case they're using regular six character hex values.

The background bars properties are new to the canvas Funnel chart in RGraph version 6.15, however, they've been available to the SVG Funnel chart for quite some time now. All that is done by the background bars properties is that the colors of the bars are Set to RGraph gradients and the opacity is also specified so that they appear a little faded out.

The labels for the chart are set. In this case there's four - one for each section of the funnel. They're set to be italic, not bold and coloured grey. The labelsX property allows you to specify an X coordinate that the labels are positioned at, instead of overlapping the chart itself. And finally, the label positioning is explicitly set to edge even though this is the default value.

Then, we move on to the tooltips these are set to be a single string making use of the property macro that gets the relevant label from the labels property using the index macro. The tooltips are then made to be larger than normal using the tooltipsCss property.

The chart has a key defined and the key is set to be positioned in the margin instead of over the chart itself.

The responsive property we’ll cover in another video and go into more detail about it but suffice to say that a few options are set for different screen sizes including the size of the labels and the margin sizes.

And then, the chart is drawn by using the regular draw call.

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 in the next video.