Video walk-through of a smoothed vertical line demo

Video transcript

Here's the transcript of the video that you can see above. It's a walk-through of the demos/hbar-vertical-line-right.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 Horizontal Bar chart demo which is configured as a vertical Line chart and the code necessary to create it. You can find the demo in the RGraph archives demo folder called hbar-vertical-line-right.html

Firstly, we have the chart libraries, and in this demo we're just including the common core library and the Horizontal Bar chart library. We don't need the dynamic library as we're not enabling any interactive features - we only have the HTML button for toggling if the chart is a spline or a regular line chart.

Then, we have the HTML for the demo and that consists of the canvas tag which is just a normal tag and then beneath that we have a HTML button element which allows us to toggle whether the chart is a spline or is just a regular angled line chart.

The style attribute on the button is set so that the text is a little larger than normal - this makes it a little bit more usable - and the cursor is set so that when you move your cursor over the button it shows the pointer hand instead of a regular arrow. The onclick event listener allows us to enable or disable the spline option of the chart. When the option has been toggled in this way you must also then call the Horizontal Bar charts draw function to update the chart.

Then we move on to the code itself that creates the chart - there’s not a lot of configuration to understand. The X and the Y axes are turned off, the Y-axis position is set to be on the right-hand side (even though the axis is turned off this will still change the position of the labels) and the Y-axis labels are set to the days of the week.

The horizontal grid lines are turned off - as-is the background grid border.

The colour of the bars is set to transparent using a four-character HEX code. because we are showing a vertical line chart we do not want the bars showing so this is the best way to get rid of them. The text size is increased, a title is specified, the title is set to be bold and then the top margin is set. One thing to note here is that because the labels are normally on the left-hand side there is a marginLeftAuto property which allows you to turn on and off whether the left margin is automatically set in order to give enough space for the labels. Now, when you have the labels on the right-hand side you still use the marginLeftAuto property to turn on or off the automatic sizing of the margin even though the labels are on the right-hand side.

And then, we have the line configuration properties. Vertical lines are a recent addition to RGraph and use the horizontal bar chart coordinates to draw a vertical line connecting the bars. The line can be a smoothed line as shown on this chart or it can be a regular angled line. If you want multiple vertical lines on your chart you will need to use multiple Horizontal Bar chart objects as each object can only cope with a single vertical line.

There are demos of this including a regular filled and a stacked-and-filled variant in the demos folder of the download archive.

And then, the chart is drawn by using the regular "draw()" function 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.