Video walk-through of a dark Line chart

Video transcript

Here's the transcript of the video, which you can see on YouTube by clicking the green button below. It's a walk-through of the demos/line-black.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 a dark-themed Line chart demo and the code necessary to create it. You can find the demo in the RGraph archives demos folder.

The first thing that’s done - which is not strictly a part of the RGraph Line object - is that a tickmarksRadius variable is set. This will be used when the tickmarks are being drawn, further on in the code.

The demo is a straightforward Line chart with two datasets. Its animated, has custom-drawn tickmarks and it uses the beforedraw RGraph event to clear the canvas to a black colour before the drawing commences. It only requires two libraries - the Line chart library and the common core library.

The canvas tag is pretty standard - it sits within a container DIV but doesn’t strictly have to. It does have a few CSS properties set on it - the border-radius property for rounded corners and the box-shadow property for a small shadow.

Now, moving on to the chart - it has two datasets passed to it in the form of a two-dimensional array. This will give us two lines on the chart - one for each dataset. As for the configuration, the shadow is turned off, the X and the Y axes are turned off so that we can see the gridlines behind them and the X-axis labels are given, in this case, the short form of the months of the year. Two colors are given - one for each line that’s on the chart.

The tickmarksStyle property can be one of a number of different styles, which are shown on the Line chart API documentation page, or if none of the styles fit your requirements, as is done here, you can set it to a function and then inside that function you can draw your own tickmark. The function that you specify takes a number of arguments: the Line chart object, the current dataset, the value of the current point, the X and the Y coordinates of the current point, the color of the line and the previous points X and Y coordinates. You can then use these values to draw your own tickmark as is done here.

The drawing of the tickmark uses the RGraph path function, which is added to the RGraph chart objects and allows you to draw on the canvas in a concise and convenient way. Instead of the verbose canvas API you can use the path function and give it a series of one or two character commands and it will then perform the relevant action on the canvas. It’s much like the SVG path syntax on which it was modeled, but not identical to it.

The first argument to the path function is the path to perform - here’s a translation of what’s done here by the path command:

• The b stands for beginPath
• The lw followed by a number sets the linewidth
• The a calls the arc function and draws a circle. The following 6 items are passed as arguments. In this case there are 5 numbers and the word false (which is converted to a boolean value first). The % symbol is replaced by the relevant argument to the path function that follows the path string - so the first percent is replaced by the first argument after the path string, the second percent is replaced by the second argument after the path string and so on. Numbers are converted to floating point values and ‘true’ or ‘false’ values are converted to real boolean values.
• The f performs a fill. You can either give a color as the argument after the f which will be used as the fillstyle or you can specify the keyword “null” and whatever the current fillStyle is set to will be used to perform the fill.
• The s performs a stroke. The strokeStyle is set to black which, because the background color is also black, means that the tickmark appears a little separated from the line itself.

The subsequent arguments to the path function are the values that are substituted in place of the percent signs. Here, the X and Y variables are given (which came from arguments given to the function), the tickmarkRadius variable (which was defined before the chart was created) and the pseudo-constant RGraph.TWOPI which means that we’ll get a whole circle drawn by the arc() function.

Then the linewidth is set to 3 and the color of the text on the chart is set to a near-white shade of gray.

The responsive() function is then called with two sets of configuration - one for screens up to 900 pixels wide and one for screens larger than this. We’ll go into more depth about the responsive function() in a later video.

Then, before the draw() function is called, an event listener function is added using the on() function (which is available to all of the various types of RGraph chart object). This event is called beforedraw and all it does is clear the canvas before drawing commences to black. The chart is thus then drawn on a black canvas instead of a transparent one. If we had used the draw event, the canvas would be cleared to a black color *after* drawing the chart - thus wiping out the chart and we would just see a blank, black canvas instead of the chart.

The chart is then drawn, but using the trace() call instead of a regular draw() call so you get a nice animation effect. By passing an object to the trace function you can give options to the animation - here the frames option is given which sets the number of frames in the animation effect to 15 - instead of the usual 30 for this effect. Most animation effects will use 30 frames, though a few do use more.

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.