Displaying financial data

[No canvas support]

OfficeExcel 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 ()
    {
        // The data variable is defined in the external file
        var s = new OfficeExcel.Scatter('cvs', data);
        s.Set('chart.ymin', 0.5);
        s.Set('chart.xmin', Date.UTC(2007,0,1));
        s.Set('chart.xmax', Date.UTC(2010,11,31));
        s.Set('chart.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)]]);
        s.Set('chart.labels.specific.align', 'center');
        s.Set('chart.tickmarks', null);
        s.Set('chart.line', true);
        s.Set('chart.line.colors', ['red']);
        s.Set('chart.units.pre', '$');
        s.Set('chart.gutter.left', 35);
        s.Set('chart.title', 'Euro exchange rate data over the past 4 years');
        s.Set('chart.tooltips.effect', 'snap');
        s.Set('chart.background.grid.autofit.numvlines', 16);
        s.Set('chart.scale.decimals', 2);
        s.Draw();
    }
</script>