How to display financial data using the Scatter chart

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>