An introduction to RGraphs new scaling feature

`

Video transcript

Here's the transcript of the video that you can see above. It introduces you to the new scale feature that was released in version 7.00. This new feature improves the appearance of your charts dramatically without you having to do anything other than upgrade.

In this video I'm going to introduce the newest version of RGraph that has recently been released - version 7.00. This is a major update to RGraph that impacts the canvas libraries and the quality of the text that they produce.

That quality has been dramatically improved through the use of a technique known as scaling. This involves increasing the coordinate space of the canvas (ie its size) and then shrinking it back down to the desired width and height through the use of the CSS width and height properties.

This has the effect of producing much nicer text on the canvas with greatly less antialiasing, so the text looks sharper. The update is mainly focussed on improving the look of the text on the canvas but all lines and shapes look better as a result of using this technique.

You can see this in the example on your screen now. There's nothing that you need to do or anything that you need to enable to start using scaling though there are few caveats that you need to be aware of and lets go through those now.

The first thing to keep in mind is that if you're doing any custom drawing on your canvas tag then you need to remember that the canvas coordinate space has doubled. This means that the 35px margin that's the default for most chart types is now 70px. RGraph will try to accommodate this in the options that are set when the chart is initially configured by doubling them for you but after that if you're doing your own drawing, then you need to keep this in mind. Properties which are set in the responsive function are also doubled for you - so values that are set there should not need to be altered.

Similar to that, if you use gradients as your colors, the pixel stops on the gradient may need updating. If they do, the stops will likely need to be doubled due to the increased coordinate space of the canvas.

The antialiasing HOWTO document has been updated with examples of no antialiasing fix, the old-style antialiasing fix and this new antialiasing fix. You can also compare this new method with the SVG charts to see how close that they now are.

Some of the CSS effects had to be changed from using the canvas tag width and height properties (which are now twice as large as they were previously) to the offsetWidth and offsetHeight properties. You may need to do this too if you're using the canvas tags' width and height properties.

If you use the clip property with coordinate values (such as the rect option, the circle option, the polygon option, the segment option and the RGraph path string option), you will need to accommodate the fact that the coordinates are now two times as large as they were. So if you're clipping the canvas to a square which uses the coordinates [x=100, y=100, width=100, height=100] they will now need to be doubled to [x=200, y=200, width=200, height=200].

RGraphs accessible text feature is not subject to scaling. This means that if you use the textAccessible option, you will more than likely have to halve the size of your text for it to remain looking the same. If you're using accessible text in order to get better-looking text, then with the new scaling feature and the better looking text that it provides, you may find that ditching accessible text altogether in favour of native canvas text is now a viable option.

If you use the RGraph.showPNG function to generate an image of the canvas, then you should note that the generated image will now be twice as large as previously because of the effect of scaling.

If you're doing transformations (for example translate(), scale(), rotate(), transform() and setTransform()) before the call to the draw function, these will now need to be performed in the beforedraw event as scaling will effectively reset them otherwise. You could also turn off scaling with the scale property (by setting it to false).

If you use custom tickmarks, you will need to accommodate the new size of the canvas (remember - it's twice as large as it was previously). This may well mean just doubling the size of the shape that you draw. Have a look at the tickmark images HOWTO document for more information.

And that's all the caveats that I've thought of and that you should be aware of.

I hope that you're as pleased with this update as I am - it dramatically improves the appearance of the text that's on the canvas and as a result makes your charts look a lot better.

For my next video, which should be coming soon now that I'm done with version 7.00, I'm going to be discussing another recent addition to RGraph and that's the HTML-based datagrid component which can be used to show, page and search tables of data using JavaScript.

If you have any problems with scaling or questions about it then feel free to post a question in the RGraph support forum and I'll get back to you with an answer.p

See you in the next video!