Scaling your charts for a better visual appearance

• Example
• Introduction
• Things to note

Example

<script>
    //
    // No changes to your code are necessary - the scale option is
    // enabled by default, so your charts should automatically look
    // better!
    //
    labels = ['Mon','Tue','Wed','Thu','Fri','Sat','Sun'];
    data   = [280,45,133,89,56,84,125];

    new RGraph.Bar({
        id: 'cvs',
        data: data,
        options: {
            marginInner: 15,
            backgroundBarsColor1: 'white',
            backgroundBarsColor2: 'white',
            backgroundGrid: true,
            backgroundGridHlines: false,
            backgroundGridBorder: false,
            colors: ['red','green','blue'],
            textSize: 16,
            xaxisLabels: labels,
            xaxisLinewidth: 3,
            yaxisLinewidth: 3,
            xaxisTickMarksLength: 7,
            yaxisTickMarksLength: 7,
            corners: 'round',
            cornersRoundRadius: 50,
            marginLeft: 50,
            title: 'A Bar chart with sharper antialiasing'
        }
    }).draw();
</script>

Introduction

Version 7 of RGraph brings with it a much-improved visual appearance thanks to the scaling up of the canvas. In practice, this means that the size of the canvas - the number of pixels in the canvas coordinate system - is now doubled so your 700x300 canvas is changed to become a 1400x600 canvas and then it's scaled down to the size that you specify (ie 700x300) by setting the width and height CSS properties to 700px and 300px respectively. This is done behind the scenes by RGraph when you draw your chart so you don't have to change your canvas tag.

If you do any custom drawing, however, you may need to change the coordinates that you're using in order to accommodate the new coordinate system. ie If you're drawing something at [35,35] (which, prior to now, was the default left and top margins) then you will probably need to double these to [70,70] to accommodate the scaling up (ie the number of pixels on the canvas has been doubled). Widths and heights may also now need doubling.

You should note though, that the coordinates that are generated by the charts are as they are on the canvas. So if what you're drawing is done by using the obj.coords property (for example, you might be drawing a red line around a bar on a Bar chart), then these would NOT need doubling - because the coordinates are exactly those that were used to draw the bar.

Things to note

1. If you're doing custom drawing on your canvas then you need to remember that the canvas coordinate space has doubled. This means that the 35px margin that's the default for most charts is now actually 70px. RGraph will try to accommodate this in the options that are set initially by doubling them for you but after this 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 here should not need to be altered. If you have any problems then feel free to post a message in the RGraph support forum.
2. Similar to the above point, if you use gradients as your colors, the pixel stops may need updating. If they do need updating, the stops will likely need to be doubled due to the increased coordinate space of the canvas.
3. 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 Bar chart to see how close they are now.
4. Some of the CSS effects had to be changed from using the canvas tags width/height properties (which are now twice as large as they used to be) to the offsetWidth/offsetHeight properties. You may need to make this change too if you're using the width/height properties.
5. 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 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, y=100] they will now need to be doubled to [x=200, y=200, width=200, y=200].
6. Accessible text 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.
7. If you use the RGraph.showPNG function to generate an image of the canvas, then you should note that the generated image will be twice as large now because of scaling.
8. If you're doing transformations (eg translate(), scale(), rotate(), 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 (set it to false).
9. 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 or image that you draw. Have a look at the tickmark images HOWTO document for more information .