Resizing your charts

Share RGraph:   

Summary
A description of the resizing feature that's a part of RGraph. It can be used to enlarge your charts to make them easier to see and read.

Requires jQuery
The resizing feature requires jQuery to be included in your page. See below for a sample <script> tag that uses the Google CDN hosted copy of jQuery.
[No canvas support]

 

RGraph has the facility to allow you to resize your charts. This is new as of 10th April 2010. Because of the numerous events it has to install code on, it is possible that it may not work well with another dynamic feature that you may want to use. The context menu does though, and the example shows tooltips. and resizing.

All you need to do to enable it is set chart.resizable to true. There are certain caveats that you should be aware of though:


The source code for the above example is:

<script>
    new RGraph.Bar({
        id: 'cvs',
        data: [84,54,64,53,52,78,48,68,61,23,56,89],
        options: {
            colors: ['Gradient(white:#ccf:#aaf:#aaf:#aaf:#aaf:#aaf)'],
            strokestyle:  'rgba(0,0,0,0)',
            shadow: false,
            backgroundGridAutofitNumvlines: 12,
            resizable: true,
            labels: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'],
            textSize: 12,
            gutterBottom: 30,
            textAccessible: true,
            noaxes: true,
            scaleZerostart: true,
            unitsPost: '%',
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            gutterLeft: 50
        }
    }).draw();
</script>

Including jQuery in your page

The resizing feature requires jQuery in order to work correctly. You can either download jQuery and use it on your own server or you can use the Google CDN copy of jQuery as shown below. If your page is accessed via HTTPS you will need to change the http:// in the URL below to https://

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Comments

Add a new comment...