How to display financial data using the Scatter chart

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

    new RGraph.Scatter({
        id: 'cvs',
        data: data,
        options: {
            yaxisScaleMin: 0.5,
            yaxisScaleMax: 1,
            xaxisScaleMin: Date.UTC(2007,0,1),
            xaxisScaleMax: Date.UTC(2010,11,31),
            xaxisLabels: [
                ['2007', Date.UTC(2007,0,1)],
                ['2008', Date.UTC(2008,0,1)],
                ['2009', Date.UTC(2009,0,1)],
                ['2010', Date.UTC(2010,0,1)]
            xaxisLabelsSpecificAlign: 'center',
            tickmarksStyle: null,
            line: true,
            lineColors: ['red'],
            yaxisScaleUnitsPre: '$',
            marginLeft: 45,
            title: 'Euro/Dollar exchange rate data over the past 4 years',
            backgroundGridHlinesCount: 64,
            backgroundGridVlinesCount: 20,
            yaxisScaleDecimals: 2,
            textSize: 12,
            xaxis: false