About
RGraph is a JavaScript charts library based on HTML5 SVG and canvas. RGraph is mature (over 15 years old) and has a wealth of features making it an ideal choice to show charts on your website.

More »

 

License
RGraph can be used for free under the GPL or if that doesn't suit your situation there's an inexpensive (£99) commercial license available.

More »

 

Download
Get the latest version of RGraph (version 6.17) from the download page. There's also older versions available, minified files and links to cdnjs.com hosted libraries.

More »

Adjustable charts

You have the ability with some chart types to adjust your charts interactively. Currently, the charts listed here have this ability. Some chart types use multiple event listeners and as such are unlikely to work well with other dynamic features. The Line chart is an example of this, and whilst it does work with the context menu, it is unlikely to work with other dynamic features.

The adjustable events

These three RGraph events are associated with adjusting. The adjustbegin event fires when adjusting begins. Much like the mousedown event. The adjust event fires during adjusting, much like the mousemove event. The adjustend event fires when adjusting is finished, much like the mouseup event.

Activity meter

The Activity meter adjusting can be seen in the activity-adjustable.html demo in the download archive.

<script>
    adjusting = new RGraph.Activity ({
        id: 'cvs',
        min: 0,
        max: 100,
        value: [23,45,55],
        options: {
            adjustable: true
        }
    }).draw().on('adjustbegin', function (obj)
    {
        // ...
    }).on('adjust', function (obj)
    {
        // ...
    }).on('adjustend', function (obj)
    {
        // ...
    });
</script>

Bar chart

The Bar chart adjusting can be seen in the activity-adjustable.html and bar-adjustable-limited.html demos in the download archive.

<script>
    bar = new RGraph.Bar({
        id: 'cvs',
        data: [5,14,12,13,10,16],
        options: {
            colors: ['red'],
            adjustable: true,
            marginInner: 5,
            yaxis: false,
            yaxisScaleunitsPost: '%',
            yaxisScaleMax: 100,
            marginLeft: 45,
            title: 'An adjustable Bar chart',
            shadow: false,
            backgroundGridVlines: false,
            backgroundGridBorder: false
        }
    }).draw().on('adjustbegin', function (obj)
    {
        // ...
    }).on('adjust', function (obj)
    {
        // ...
    }).on('adjustend', function (obj)
    {
        // ...
    });
</script>

Fuel chart

The Fuel chart adjusting can be seen in the fuel-interactive.html demo in the download archive.

<script>
    fuel = new RGraph.Fuel({
        id: 'cvs',
        min: 0,
        max: 100,
        value: 78,
        options: {
            adjustable: true
        }
    }).draw().on('adjustbegin', function (obj)
    {
        // ...
    }).on('adjust', function (obj)
    {
        // ...
    }).on('adjustend', function (obj)
    {
        // ...
    });
</script>

Gantt chart

The Gantt chart can be adjusted by dragging the bars left or right, or the events can be resized if you place the cursor at the right edge of the event. To get the details of the bar being dragged you can use the adjust or adjustend events and inside the event handler, you can look at the RGraph registry - RGraph.Registry.get('adjusting.gantt') The returned array consists of:

When adjusting is complete the obj.data array is updated. So you can use the numerical index that you find in the registry (as above) with the obj.data array to get up-to-date event information.

The Gantt chart adjusting can be seen in the gantt-adjustable.html gantt-adjustable2.html gantt-adjustable-limited.html demos in the download archive.

<script>
    gantt_events = [
        {start: 31, duration: 28,  label:'Richard'},
        {start: 0,  duration: 120, label:'Bob'},
        {start: 84, duration: 16,  label:'Fred'},
        {start: 35, duration: 45,  label:'Charles'},
        {start: 0,  duration: 35,  label:'Kev'},
        {start: 0,  duration: 28,  label:'Wayne'},
        {start: 31, duration: 28,  label:'John'}
    ];

    gantt = new RGraph.Gantt({
        id: 'cvs',
        data: gantt_events,
        options: {
            xaxisScaleMax: 120,
            backgroundGridVlinesCount: 4,
            borders: false,
            colorsDefault: '#0c0',
            xaxisLabels: ['January', 'February', 'March', 'April'],
            title: 'An adjustable Gantt chart',
            adjustable: true,
            backgroundVbars: [
                [0, 31, 'rgba(230,230,230,0.4)'],
                [59, 31, 'rgba(230,230,230,0.4)']
            ]
        }
    }).draw().on('adjust', function (obj)
    {
        var events = obj.data;
        var conf   = RGraph.Registry.get('adjusting.gantt');


        if (conf) {
            
            var index = conf.dataset;

            document.getElementById("eventID").value       = index;
            document.getElementById("eventStart").value    = events[index].start;
            document.getElementById("eventDuration").value = events[index].duration;
            
            console.log('Event ID: ' + index + ', Event start: ' + events[index].start + ' Event duration: ' + events[index].duration);
        }
    });
</script>

Gauge chart

The Gauge chart adjusting can be seen in the gauge-adjustable.html demo in the download archive.

<script>
    gauge = new RGraph.Gauge({
        id: 'cvs',
        min:0,
        max:100,
        value:78,
        options: {
            adjustable: true
        }
    }).draw().on('adjustbegin', function (obj)
    {
        console.log('The adjustbegin event has fired. Value: ' + obj.value.toFixed(2));
    }).on('adjust', function (obj)
    {
        console.log('The adjust event has fired. Value: ' + obj.value.toFixed(2));
    }).on('adjustend', function (obj)
    {
        console.log('The adjustend event has fired. Value: ' + obj.value.toFixed(2));
    });
</script>

Horizontal bar chart

The Horizontal bar chart adjusting can be seen in the hbar-adjustable.html hbar-adjustable-limited.html demos in the download archive.

<script>
    new RGraph.HBar({
        id: 'cvs',
        data: [4,8,6,3,5,2,6],
        options: {
            adjustable: true,
            yaxisLabels: ['Richard','Ben','Larry','Pete','Luis','John','Fred']
        }
    }).draw().on('adjustbegin', function (obj)
    {
        console.log('The adjustbegin event has fired.');
    }).on('adjust', function (obj)
    {
        console.log('The adjust event has fired.');
    }).on('adjustend', function (obj)
    {
        console.log('The adjustend event has fired.');
    });
</script>

Horizontal progress bar

The Horizontal progress bar adjusting can be seen in the hprogress-grow.html demo in the download archive.

<script>
    hprogress = new RGraph.HProgress({
        id: 'cvs',
        min: 0,
        max: 100,
        value: 83,
        options: {
            marginBottom: 30,
            colors: ['Gradient(white:red)'],
            adjustable: true,
            margin: 10,
            tickmarksInner: true,
            tickmarksZerostart: true,
            scaleUnitsPost: '%'
        }
    }).draw().on('adjustbegin', function (obj)
    {
        console.log('The adjustbegin event has fired.');
    }).on('adjust', function (obj)
    {
        console.log('The adjust event has fired.');
    }).on('adjustend', function (obj)
    {
        console.log('The adjustend event has fired.');
    });
</script>

Horseshoe meter

The Horseshoe meter adjusting can be seen in the horseshoe-adjustable.html demo in the download archive.

<script>
    horseshoe = new RGraph.Horseshoe({
        id: 'cvs',
        min: 0,
        max: 100,
        value: 78,
        options: {
            adjustable: true
        }
    }).draw().on('adjustbegin', function (obj)
    {
        console.log('The adjustbegin event has fired. Value: ' + obj.value.toFixed(2));
    }).on('adjust', function (obj)
    {
        console.log('The adjust event has fired. Value: ' + obj.value.toFixed(2));
    }).on('adjustend', function (obj)
    {
        console.log('The adjustend event has fired. Value: ' + obj.value.toFixed(2));
    });
</script>

Line chart

Note If you don't like the line being drawn outside of the chart area (ie in the margins where the title or the labels are) you can use the outofboundsClip option.

The Line chart can be adjusted by dragging the line(s) up and down. When you click on a line to adjust it (and hold the mouse button down) you can then retrieve the relevant details of that point from the registry:

RGraph.Registry.get('adjusting.shape');

The Line chart adjusting can be seen in the line-adjustable-limited.html line-adjustable-onetouch.html line-adjustable-range.html line-adjustable-touch-event.html line-adjustable.html demos in the download archive.

<script>
    line = new RGraph.Line({
        id: 'cvs',
        data: [
            [45,74,84,85,45,35,65,68,87,97,45,34,12],
            [15,14,12,16,18,19,14,12,74,84,95,65,35]
        ],
        options: {
            xaxisLabels: ['Kev','Matt','Rich','Dave','Iggy','Polly','Fiona','Fred','Pete','Lou','Fred','Bob'],
            linewidth: 2,
            marginInner: 10,
            shadow: false,
            adjustable: true,
            title: 'An adjustable line chart',
            outofbounds: true,
            spline: true,
            tickmarksStyle: 'circle',
            tickmarksSize: 5
        }
    }).draw();
</script>

Meter chart

The Meter chart adjusting can be seen in the meter-adjustable.html demos in the download archive.

<script>
    meter = new RGraph.Meter({
        id: 'cvs',
        min: 0,
        max: 100,
        value: 78,
        options: {
            adjustable: true
        }
    }).draw().on('adjustbegin', function (obj)
    {
        console.log('The adjustbegin event has fired. Value: ' + obj.value.toFixed(2));
    }).on('adjust', function (obj)
    {
        console.log('The adjust event has fired. Value: ' + obj.value.toFixed(2));
    }).on('adjustend', function (obj)
    {
        console.log('The adjustend event has fired. Value: ' + obj.value.toFixed(2));
    });
</script>

Odometer chart

The Odometer chart adjusting can be seen in the odo-adjustable.html demos in the download archive.

<script>
    odo = new RGraph.Odometer({
        id: 'cvs',
        min: 0,
        max: 100,
        value: 78,
        options: {
            adjustable: true
        }
    }).draw().on('adjustbegin', function ()
    {
        console.log('The adjustbegin event has fired. Value: ' + odo.value);
    }).on('adjust', function ()
    {
        console.log('The adjust event has fired. Value: ' + odo.value);
    }).on('adjustend', function ()
    {
        console.log('The adjustend event has fired. Value: ' + odo.value);
    });
</script>

Scatter chart

The Scatter chart adjusting can be seen in the scatter-adjustable.html demo in the download archive.

<script>
    data = [
        [21,0], [13,16],[8,10], [10,8], [18,18],[15,19],
        [13,16],[15,12],[16,13],[12,11],[10,18],[11,19],
        [7,17], [11,18],[9,13], [11,12],[12,10],[10,9],
        [19,10],[15,15]
    ];

    new RGraph.Scatter({
        id: 'cvs',
        data: data,
        options: {
            backgroundGridVlines: false,
            backgroundGridBorder: false,
            colorsDefault: 'red',
            tickmarksStyle: 'circle',
            tickmarksSize: 10,
            xaxisScaleMax: 31,                
            adjustable: true,
            xaxisLabelsOffsety: 3,
            xaxisLabels: [
                'M','T','W','T','F','S','S',
                'M','T','W','T','F','S','S',
                'M','T','W','T','F','S','S',
                'M','T','W','T','F','S','S'
            ]
        }
    }).draw().on('adjustbegin', function (obj)
    {
        // ...
    }).on('adjust', function (obj)
    {
        // ...
    }).on('adjustend', function (obj)
    {
        // ...
    });
</script>

Segmented donut chart

The Segmented donut chart adjusting can be seen in the segmented-adjustable.html demo in the download archive.

<script>
    segmented = new RGraph.Segmented({
        id: 'cvs',
        min: 0,
        max: 100,
        value: 78,
        options: {
            adjustable: true
        }
    }).draw().on('adjustbegin', function (obj)
    {
        console.log('The adjustbegin event has fired. Value: ' + obj.value.toFixed(2));
    }).on('adjust', function (obj)
    {
        console.log('The adjust event has fired. Value: ' + obj.value.toFixed(2));
    }).on('adjustend', function (obj)
    {
        console.log('The adjustend event has fired. Value: ' + obj.value.toFixed(2));
    });
</script>

Semi-circular progress bar

The Semi-circular Progress bar adjusting can be seen in the semicircularprogress-adjustable.html demos in the download archive.

<script>
    scp = new RGraph.SemiCircularProgress({
        id: 'cvs',
        min: 0,
        max: 100,
        value: 83,
        options: {
            marginTop: 10,
            marginLeft: 10,
            marginRight: 10,
            adjustable: true,
            scaleUnitsPost: '%',
            colors: ['Gradient(white:#0a0)']
        }
    }).draw().on('adjustbegin', function ()
    {
        console.log('The adjustbegin event has fired. Value: ' + scp.value);
    }).on('adjust', function ()
    {
        console.log('The adjust event has fired. Value: ' + scp.value);
    }).on('adjustend', function ()
    {
        console.log('The adjustend event has fired. Value: ' + scp.value);
    });
</script>

Thermometer chart

The Thermometer chart adjusting can be seen in the thermometer-adjustable.html demos in the download archive.

<script>
    new RGraph.Thermometer({
        id: 'cvs',
        min: 0,
        max: 100,
        value: 78,
        options: {
            marginBottom: 20,
            colors: ['Gradient(orange:white)'],
            titleSide: 'An adj. thermometer',
            adjustable: true
        }
    }).draw().on('adjustbegin', function ()
    {
        // ...
    }).on('adjust', function ()
    {
        // ...
    }).on('adjustend', function ()
    {
        // ...
    });
</script>

Vertical progress bar

The Vertical Progress bar adjusting can be seen in the vprogress-grow.html demos in the download archive.

<script>
    new RGraph.VProgress({
        id: 'cvs',
        min: 0,
        max: 100,
        value: 83,
        options: {
            colors: ['red'],
            adjustable: true,
            marginInner: 15,
            tickmarksInner: true,
            labelInner: true,
            scaleUnitsPost: '%',
            marginRight: 55
        }
    }).draw().on('adjustbegin', function (obj)
    {
        // ...
    }).on('adjust', function (obj)
    {
        // ...
    }).on('adjustend', function (obj)
    {
        // ...
    });
</script>