Video of how to create a dual-color Line chart

Video transcript

Here's the transcript of the video that you can see above. It details how you go about creating a dual-color, dynamic Line chart which has new data being added on the right-hand-side and old data being removed from the left-hand-side.

In this video I'm going to walk through a dual-color dynamic Line chart demo that I recently added to the RGraph download archive. This Line chart is an ideal example of how to create such a scrolling chart - with new data appearing on the chart on the right-hand-side and old data being removed from the left-hand-side when the line has scrolled the width of the chart. The chart is also dual color - with the line appearing green when it's above a certain, user-defined point and red when it's below that point.

Here you can see the chart and because this is just an example, the chart updates approximately 60 times per second with random data. In your own use-case however, the data may not become available that quickly, so you may have to add new data at a slower rate. If so, then the chart may not be a smooth scrolling, continuous line - instead being updated one or a few times per second.

So here we have the HTML tags that are required to make this sort of chart. The RGraph library files that are required to make this chart are actually quite minimal - involving just the line chart library and the common core library (which is always required). We don't need any other libraries because there no dynamic features such as tooltips or adjusting.

The HTML tags that are required are also just the basic canvas tag and optionally you can also wrap this in a div tag which makes it easier for you to manipulate within your page.

Now we come on to the good part - the JavaScript code! A general overview of the code is that it involves setting a few variables and then calling the main drawGraph function and it's this function that draws the chart. The function is called repeatedly, up to 60 times per second - each time new data is added and old data is removed and then the canvas is cleared and the chart is redrawn. At the start of this function the two line chart objects are created if they don't exist already. After the first iteration of this function the chart objects will have been created and because the variables that they're assigned to are global - the charts are not recreated on each iteration - they're just created the one time and then reused.

Taking a closer look at this function, the variables that are defined at the start of it are as follows: The canvas element is retrieved by using the standard document.getElementById function; the two object variables which will hold the chart objects are initialised to null; an empty data array is created; the number of values is defined - in this case at 1200; the scale value at which the charts are clipped is set to 25 and the delay for refreshing the canvas is set at 16.666 milliseconds which equates to around 60 frames per second. Then by using the data and numvalues variables the data array is initialised to hold null values.

Then we come on to the drawGraph() function. This is the function that is called 60 times per second to redraw the chart when new data has been added and old data removed. The first thing that this function does is check whether the charts have been created or not and if not it creates the charts. The charts are created in a pretty standard fashion. It should be noted though that when the options are given to this first chart they are also assigned to a variable - this is so that we can use the exact same options with a minor tweak for the second chart and they will both look identical. The chart has a minimal aesthetic to it so when it's redrawn at the high frame rate it doesn't tax the computer too much - because that would slow down the animation.

The clipping for the chart - which allows us to use two two different colors to the chart - is then setup using a beforedraw event. Note that the beforedraw event runs before the draw method is called, hence the name, but after the constructor for the object has completed. It should be noted also that because the draw method is called multiple times to redraw the chart the beforedraw event is called multiple times too so this event handler is run each time. The canvas is cleared to a solid white color. The boundary where the green color turns into a red color is calculated and the clipping is installed using the just calculated boundary. The boundary is calculated using the Line charts getYCoord method which you give a scale value and it returns to you the relevant Y coordinate. Note that because the scale of this chart is constantly changing, the scale value that we're using may not be even shown on the chart - in this case the marginTop configuration property is used instead. This means that the chart will be all one color - which by default is red.

Then another event is installed - this time a draw event (which is triggered when the draw function has completed). The only thing that this function does is to end clipping, again using the RGraph.clipTo functionality.

The setup of the second chart is much the same as the first - though there are a few key differences. Remember that we assigned the configuration of the first chart to a variable? This is now used in conjunction with the JavaScript spread operator for the configuration of the second line chart. Then the colors option is overridden from green to red. The events for the second chart are added doing the same as the first chart - installing and clearing clipping on the chart.

Now we come to the part of the code that creates new data and adds it to the two charts (the red one and the green one). The len variable is set to the length of the data array, which was initialised to the numvalues variable above (by default this is 1200). The lastvalue variable is set to the last value in the array or 26 if the last value is null and a random value is created which is 2 higher or lower than the lastvalue variable. The random value that was created is constrained to a minimum of zero and a maximum of 250. This random value is then pushed on to the end of the data array.

If the data array length is above the numvalues variable, which it will be because we filled the array up, up above and have now added another value to it, a value is removed by shifting the array. This removes a value from the front of the array.

Now that the data has been manipulated and updated it's set on the two Line chart objects and the chart is then redrawn. Finally, the function is called again after a small delay of 16.666 milliseconds (equating to approximately 60 frames-per-second).

That's the end of the drawGraph function so the only thing left is the initial call to the drawGraph function. It should be noted that at the time that this video was released this demo is not part of the v6.15 download archive - but you can get the demo from the GitHub repository so I'll add a link to it in the YouTube video description and also in the video transcript that appears on the RGraph website.

And that's all there is to this demo of a dynamic, scrolling dual-color Line 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.