How to display financial data using the Scatter chart

Share RGraph:   Share or Like RGraph on Facebook!

Summary
An example of using the Scatter chart to show financial data. The Scatter chart is used because you can supply the X and the Y values (where as the Line chart only supports Y values).

[No canvas support]

RGraph can be used to display financial information, as shown here. In this case the chart is showing exchange rate information for the period 2008 - 2010.

Because the Line chart has no concept of an X axis scale, the Scatter chart with a connecting line is used to show the data.

Note: If you don't have a lot of data then if you use a connecting line (as it is here) it may look jagged - particularly if your data jumps from a high value to a low value or vice versa.

The chart uses data that is held in a separate file (because there's a lot of it). You can see this file here: financial-data.js


<script>
    new RGraph.Scatter({
        id: 'cvs',
        data: data,
        options: {
            ymin: 0.5,
            ymax: 1,
            xmin: Date.UTC(2007,0,1),
            xmax: Date.UTC(2010,11,31),
            labels: [
                ['2007', Date.UTC(2007,0,1)],
                ['2008', Date.UTC(2008,0,1)],
                ['2009', Date.UTC(2009,0,1)],
                ['2010', Date.UTC(2010,0,1)]
            ],
            labelsSpecificAlign: 'center',
            tickmarks: null,
            line: true,
            lineColors: ['red'],
            unitsPre: '$',
            gutterLeft: 45,
            title: 'Euro/Dollar exchange rate data over the past 4 years',
            backgroundGridAutofitNumhlines: 64,
            backgroundGridAutofitNumvlines: 20,
            scaleDecimals: 2,
            textSize: 12,
            noxaxis: true
        }
    }).fadeIn();
</script>
© Copyright Richard Heyes 2008-2017