Displaying financial data

Share RGraph:   

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>
    window.onload = (function ()
    {
        var scatter = 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,
                textAccessible: true,
                textSize: 14,
                noxaxis: true
            }
        }).fadeIn();
    })
</script>

Comments

Add a new comment...