Adjustable charts

• The adjustable events
• Adjustable chart types:
• Activity meter
• Bar chart
• Fuel chart
• Gantt chart
• Gauge chart
• Horizontal Bar chart
• Horseshoe meter
• Horizontal Progress bar
• Line chart
• Meter chart
• Odometer chart
• Scatter chart
• Segmented donut chart
• Semi-circular Progress bar
• Thermometer chart
• Vertical Progress bar

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

• adjustbegin
• adjust
• adjustend

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:

• index - The numerical index of the event being adjusted (corresponding to the data array that you set in the constructor).
• object - The Gantt chart object
• shape - The pertinent shape information
• mousex - The mouse X coordinate when adjusting began
• mousey - The mouse Y coordinate when adjusting began
• event_duration - The size of the event (when adjusting was commenced)
• mode - This can be either move or resize indicating what was done to the bar.

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

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>