The JS-OFC-Library

About

Please remember that this library is under heavy development. What does that mean? Well, some functions work differently than others, some important features are missing, some functions have restrictions. If you have wishes for the library or ideas, please do not wait and contact me at grillen at abendstille dot at.

erm... sorry for the ugly layout. i allready asked a friend of mine to give it a nice style...

Intends

This document intends to be a Tutorial and an API to learn how to use the OFC-JS-Library. But sorry, i have to commit, i have not so much time left atm, so the api has to wait. i posted some examples, if you have other questions please read the js-files - i tried to do good comments in JavaDoc-style... ok - they may be not consistent but they exist for _every_ method.

3 golden rules

To use the JS-library you have to make sure 3 golden rules:

• the Flash-object has to have an uniqe id in the HTML-Document
  .
• execute the JS-code after the page finished loading
  The OFC-JS-Class won't find the SWF if initialized before the object has been loaded. To be 100% sure, it'll be found only create it, after the page finished loading.
• include all necessary JS-files
  That means:
  • swfobject.js (comes with OFC)
  • prototype
  • ofc.js
  • data.js
  • charts/Bar.js
  • charts/Line.js
  • charts/Area.js
  • charts/Pie.js

The last four depend on what types you want to use. Look inside data.js to see what all of them can and inside the specific class to se what you can do with the different charttypes. Sorry for the time beeing i had no time for writing classes for HLC and Scatter. If you want to make a dotted line you take Line.js.

Tutorial

<script language="javascript" type="text/javascript">
    /**
     * This function will change the background color
     */
    function changeBG() {
        
        // we get an insance of the OFC-JS-class
        // this instance is automatically cached in a global variable
        // and can be accessed this way:
        var o = OFC.getChart('chart');
        
        // now we'll change a LoadVars-Variable
        // its going to be red!
        o.set('bg_colour', '#FF0000');
        
        // after we changed all variables we like to
        // we have to redraw the chart
        o.redraw();
    }
    
    // wenn the window gets loaded, we want to execute this code
    Event.observe(window, 'load', function(event_obj) {
        // i don't have to use a base url here - maybe you will - it defaults to ''
        // and must end with a slash. this path points to where the base of
        // the js-ofc-extension is located (it can be relative or absolute,
        // whatever you prefer).
        // OFC.baseURL = '';
        
        // now we create the chart. it inserts automatically into the DOM
        // only the first parameter (the id) ist obligatory.
        // the options are additional
        new OFC.Chart('chart', {
            sourceURL: 'data-files/data-1.txt',
            width: 500,
            height: 250
        });
    });
</script>
<div id="chart"></div>
<br /><br />
<!-- Now there comes an link people can click on to activate the script -->
<a href="javascript:changeBG();">Make it red!</a><br />
<a href="javascript:OFC.getChart('chart').object.reload()">Reset (Reload)</a>

Examples

TestBox

Adding new data

var o = OFC.getChart('chart');
o.emptyDataList();

o.xlabels = ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m"];

o.set('y_max', 9);

var b = new Bar();
b.values = [1, 2, 3, 4, 5, 6, 7, 8, 7, 6, 5, 4, 3];

var c = new Bar('fade');
c.values = [3, 4, 8, 5, 7, 1, 2, 3, 1, 6, 4, 4, 3];

o.addData(b);
o.addData(c);
o.redraw();

Changing chart types

var o = OFC.getChart('chart');

// 3d, fill, glass, fade can go here or nothing
var b = new Bar('3d');
b.xAxis3D = 5;


o.convertAll(b);

o.redraw()

Changing chart types 2

var o = OFC.getChart('chart');

// hollow, dot can go here or nothing
var l = new Line('hollow');

o.convert(o.getData(0), l);

o.redraw()

Changing color schemes

var o = new OFC('chart');

// hash access to colors:
o.colorScheme.set('background', '#FFFFFF'); // background
o.colorScheme.set('text',    '#000000'); // labels and text
o.colorScheme.set('axis',    '#000000'); // axis color
o.colorScheme.set('grid',    '#330000'); // grid color

// WARNING: this depends on the type!
var d = o.getData(0);
switch (d.getType()) {
    case 'area':    // line and area allowed
    case 'line':    // line allowed
    case 'pie':     // line and labels allowed
                    // data is also allowed, but its an array!
        d.colors.set('line', '#33CCFF');
    break;
    
    case 'bar':     // inner and border allowed
        d.colors.set('inner', '#33CCFF'); 
    break;
}

o.redraw()

Changing title and legends

var o = OFC.getChart('chart');

o.setTitle('The power of OFC', '{font-size:20px; color:#FF0000}');
o.setLegend('x', 'in the morning...', 10, '#CC0000');
o.setLegend('y', "you won't\r\nremember a thing...", 10, '#0000CC');

o.redraw()

API