HOWTO: Animated adjusting for the Line chart

• Introduction
• The code for the chart
• Using the adjustingXonly option

Introduction

The Line chart adjusting can be very useful - but it's not particularly usable on touch-based devices (eg mobiles and tablets). This is because of the requirement to drag a point on the Line to its new location and dragging isn't terribly intuitive or even feasible in these environments.

But the Line chart can still be adjusted in these environments as this example shows you. A bit of custom coding is needed - but as it's all provided to you here (and with new functions that were added in version 6.10) the amount of code necessary has been reduced dramatically and it's just a matter of copying and pasting! This version of adjusting is also animated, whereas regular adjusting is not.

There's also an example in the download archive that you can examine that provides you with an example of it in action (this demo, however, uses the adjustableXonly option which is not animated). And you can find that file in the demos/ folder. But first, let's have a look at the code that goes into making the chart.

The code for the chart

Here's the code that makes the chart - as you can see the two new Line chart functions that were added in version 6.10 (obj.closest and the obj.growPoint) have reduced the necessary code to a very small amount. So this should make implementing the code easier for you.

<script>
    line = new RGraph.Line({
        id: "cvs",
        data: [4,8,5,2,6,7,9,1,5,4,3,8],
        options: {
            xaxisLabels: ["Alf","Bob","Charlie","Doug","Edgar","Fay","Gary","Harry","Indigo","Jay","Kev","Lou"],
            textSize: 14,
            spline: true,
            xaxis: false,
            yaxis: false,
            backgroundGridBorder: false,
            backgroundGridVlines: false,
            marginInner: 10,
            tickmarksStyle: "filledcircle",
            tickmarksSize: 7,
            shadow: false
        }
    }).draw();
    
    line.canvas.onclick = function (e)
    {
        var indexes = line.closest({
            event: e,
            xonly: true    
        });

        var value = line.getValue(e);

        line.growPoint({
            index:   indexes.index,
            value:   value,
            dataset: 0,  // Optional
            frames:  15  // Optional
        });
    }
</script>

Using the adjustingXonly option

The Line chart does have an adjustableXonly option which may do what you want with you just having to specify it in your chart configuration. However, you need to note that this type of adjusting is not animated whilst the adjusting detailed on this page is.