Video walk-through of the scatter-trendline demo

Video transcript

Here's the transcript of the video that you can see above. It takes you through the scatter-trendline.html demo page where tickmarks above the trendline are black and those below the trendline are red.

In this video I'm going to go through the scatter-trendline demo and the configuration that's required to create it. There's a fair amount of custom code that's necessary to produce the chart including making use of the new clip feature that was added in version 6.17. So lets get on.

This demo is dual color and uses clipping to achieve that; the coordinates for the trendline were added in version 6.18 so now we can draw a shape that uses the trendline coordinates in order to effectively cut the canvas in two so we've got the top part which is where the black tickmarks are and the bottom part, which is where the red tickmarks are. And these are both clipped, so each chart, there are two, clips to the appropriate section, the top or the bottom and to do that it makes use of the clip property that was introduced in version 6.17.

There are two RGraph libraries that are required for this chart - the core library and the Scatter chart library. There's no dynamic features or tooltips on the chart so it's just these two libraries that we need.

The canvas tag is pretty standard and is nested within a DIV tag container and it's this container which has the blue CSS background color set on it.

The first thing that you can see is that the data for the chart and the majority of the configuration has been separated out into variables. This is so that they can be easily be reused by both of the RGraph Scatter chart objects that go into making this chart. The data is self-explanatory and is just a simple two-dimensional array. The configuration object mimics what would normally be given to the RGraph object and let's go through that now.

The text size is set to 16 - larger than the default 12 - the margins are set, the X-axis options are set - notably the left-hand-side tickmark, which is normally off - is enabled, the Y-axis options are set and again, the bottom tickmark which is normally disabled is turned on. When they're both enabled the left-hand-side X-axis tickmark and the bottom Y-axis tickmark combine to form a little cross in the bottom-left corner where the axes meet - just a little aesthetic thing that you may want to enable for your chart too.

Then we have the trendline options. There's nothing particularly interesting here except for the trendlineClipping option. This option constrains the trendline to the area of the chart where your datapoints are. So if all of your datapoints are on the left-hand-side of the chart then the trendline will be clipped to that area. This can be useful if you have multiple datasets on your chart in different areas and you want separate trendlines for them. There's a demo of this in the download archive.

Then there's a few background grid options which turn off vertical grid lines and set the color of the background grid and a couple of tickmark options which set the style and size of the tickmarks.

That's the configuration that's cloned and used for both of the charts.

The next thing that's done is that the first Scatter chart is then drawn with no changes to the configuration. The data and configuration are cloned when being passed to this chart before the chart is drawn. The chart is drawn so that the trendline coordinates are generated and we can then use them to clip to the part above the trendline, draw the chart again and then draw another chart which is clipped to the part of the canvas below the trendline. You can see there that the coords variable is set to the first set of trendline coordinates.

The coordinates to enclose the area above the trendline are then created. These make use of the coordinates that are created for the trendline, the dimensions of the canvas and a few hard-coded variables for the edges of the canvas. When put together these create the shape that we'll pass to the clip configuration option. Then, in a similar way, the coordinates are generated for the shape that encloses the area below the trendline.

Now that the coordinates have been created for the clipping they're set on the first chart object and the default color is set to red. When the canvas is redrawn further on in the code the tickmarks will be red and the area drawn by this object will be constrained to below the trendline.

The second Scatter chart is then created. This draws the black tickmarks that you can see above the trendline. The data and configuration options are cloned from the two variables that we created first in the code and used on this object. The clip option for this object is set to the coords_top variable that was created above and the default color is explicitly set to black.

Finally, the canvas is redrawn. This redraw is necessary otherwise the clipping and the color options won't be fully accounted for.

And that's all there is to creating this dual-color Scatter chart. It shows you again that RGraph charts can be customized quite easily if need be. If you want to use this technique but with a Line chart instead of a Scatter chart then there's a similar demo in the download archive called line-trendline-dual-color.html (or at least there will be from version 6.18 onwards). 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!