bGraph - Customizable XML data graph

The bGraph Component is used for displaying graphs, plots, in flash, but can also be embedded directly in HTML and controlled via XML . Everything can be customized from a XML file and also from Flash.

You can have multiple plots on a graph and multiple graphs in one flash file. The width and height can be adjusted extremely easy and you don’t have to reposition anything, everything is done automated.

Features

It offers great features like:

• eveything can be loaded and configured from XML
• it can be made highly interactive
• multiple plots on a graph
• livepreview in Flash IDE
• calculates and draws the regression line(trendline)
• a tooltip can display a message formated by you when over the points
• message has special variables which help you in customizing the the text: $X, $Y, $INFO_0, $INFO_1,...., $INFO_N
• the message can be HTML formated and can be multiline
• possibility to show more data on click
• set if to show the circles, lines, regresion line, tooltip
• all the colors can be changed
• many methods which can help you modify the graph on runtime, making it highly interactive
• many many more

XML FILE

The whole graph

title="bGraph - Demo"      //title of the graph<br />
xLabel="Day"              //X axis label<br />
yLabel="Sales"          //Y axis label<br />
maxX="10"                 //max value for X axis<br />
maxY="25"                  //max value for Y axis<br />
grid="true"              //show the grid ?<br />
xNumberDivisions="10"      //X axis number of divisions<br />
yNumberDivisions="5"       //Y axis number of difivsions<br />
xGridNumber="10"          //grid spacing on X<br />
yGridNumber="10"        //grid spacing on Y<br />
gridColor="0xFFFFFF"    //grid color<br />
gridAlpha="0.2"            //grid alpha<br />
axisColor="0x280143"    //axis, labels, title and numbering color<br />

Each dataset

    <xcord>1,2,3,4,5,6,7,8,9,10</xcord>
    <ycord>0,2,6,8,15,14,18,22,10,7</ycord>    
    <extra>
        <extrainfo>Anything, you, want,can, be, displayed, here.,999$, ?ÎÂ??, ???!!! </extrainfo>
        <extrainfo>extra1_1,extra1_2,extra1_3,extra1_4,extra1_5,extra1_6,extra1_7,extra1_8,extra1_9,extra1_10</extrainfo>
        <extrainfo>extra2_1,extra2_2,extra2_3,extra2_4,extra2_5,extra2_6,extra2_7,extra2_8,extra2_9,extra2_10</extrainfo>
    </extra>

name="Sales B"             //name of the dataset<br />
color="0x65FF65"         //color of the lines and circles<br />
outline="0x669933"        //color if the circles outlines<br />
drawregresion="true"     //draw regression (trend line) ?<br />
showcircle="true"         //show the circles ?<br />
showline="true"         //show the lines between the circles ?<br />
extra="true"            //does it have arrays with extra info ?<br />
showtooltip="true"         //show a tooltip on MOUSE OVER ?<br />
tipmessage="Click Me for More!" //the message to be displayed<br />

The ToolTip Message

As is said before the message can be customized in any way you want with the help of the special variables. So for example something like (without the spaces in the tags):

The X coord is: <b>$X</b> <b r="" /> The Y coord is: <b>$Y</b> <b r="" /> With extra info: <b>$INFO_0</b> and <b>$INFO_1</b>

Will result in something like:

The X coord is: 7
The Y coord is: 23
With extra info: cool and awesome

Inside Flash

Besides all the things you can do from XML there are plenty more from flash like:

• Add new dataset
• delete dataset
• delete everything
• get X/Y coordinates for a dataset
• get extra info for a dataset
• PUSH /POP to/from a dataset
• many geters and seters
• dispatches events when COMPLETE , over and out of a point and when a point is pressed
• many options

bogDesigns Portfolio

Utilities