Generating Real Time Graphs Webimpetus - Introduction - How renders - Another example graph type 3D_Column - Creating different types graphs randomly - Creating Pie graph - Balinder Walia Systems Developer Tenthmatrix Information Systems Ltd Technical Notes January Document revision Webimpetus has inbuilt graphing charting scripting language generates real time graphs given commands data Various kinds graphs created inbuilt graph generator literally part graph defined controlled sophiticated commands Commands available should defined attributes main tag - Define graph image height format - Define graph image width format - quotDefine data displayed across axis graph format equals - quotValue first series format equals - quotValue second series format equals - Define boolean value TRUE FALSE FALSE case user define scale units themselves TRUE define automatically depending minimum maximum values series - Minimum value scale Starts scale - Maximum value shown - Maximum difference between units - Minimum difference between units - Yes Legend automatically define legend yourselfIf follwing commands further allow display legend position it39s order - Yes - Horizontal - Yes specifies whether order series legend reversed - Yes specifies whether series label key explains unique pattern color series reversed default show key left - Location legend Possible value these above UseOffsets following offset values used when location expressed points left side graph left side legend expressed points top graph top legend commands available above passed attributes inside following tag shown below order tell Webimpetus process these commands free text object graph gif image Various types graphs available WebImpetus After creating code save document notice gif image file created attached object written code Graph created dynamically fly every type code written These commands very easy order create graph all write code above commands their attribute values format shown below various attributes control graph type color series data defined gt Let39s write some code generate simple graph type size graph display data categorised into months say start month upto Basically display series data monthly intervals year Add values each series each month using attribute order create graph add following code object box caliban editor area save Lets add graph image width height using attributes Lets add some categories want display graph data set graph legend options yesno yesno yesno gt Conclusion Creating maintaining different types graphs easy Webimpetus non technical person graphic design skills create graphs charts example code how renders below set graph legend option yesno yesno yesno gt

making the web work

Impetus

What is it?
Products
Services
Features
Home Releases

Information

Company
Contact

Users

Sites
Applications

Support

QuickStart Site Index

Partners

4D developers
ISPs
Web devs

Generating Real Time Graphs with Webimpetus

Introduction

By Balinder S Walia, Systems Developer (Tenthmatrix Information Systems Ltd) Technical Notes for January 2006 Document revision : 1.2 Webimpetus has in-built graphing and charting scripting language which generates real time graphs from the given set of commands and data. Various kinds of graphs can be created with in-built graph generator and literally any part of the graph can be defined and controlled by this sophiticated set of commands: Commands available which should be defined as attributes of the main tag are as follows:

Graph_Height - Define graph image height in format "Integer"
Graph_Width - Define graph image width in format "Integer"
Graph_Categories - "Define the data displayed across x axis of the graph in the format equals to category1;category2;category3;....categoryN"
Graph_Values1 - "Value of first series in the format equals to value1;value2;value3;....valueN"
Graph_Values2 - "Value of the second series in the format equals to value1;value2;value3;....valueN"
Graph_Series - "Series1Name;Series2Name"
Graph_Series.setScaleAuto - Define a boolean value TRUE or FALSE (FALSE in case user will define scale units themselves or TRUE to define automatically depending on minimum and maximum values in the series data
Graph_Series.minValue - Minimum value of the scale (Starts the scale from this value)
Graph_Series.maxValue - Maximum value to be shown on the scale
Graph_Series.maxIncrement - Maximum difference between the units of scale
Graph_Series.minIncrement - Minimum difference between the units of scale
Graph_Legend.setAuto - Yes to set Legend automatically, No to define legend yourself
If Graph_Legend.setAuto is set to No follwing commands can further allow you to display a legend, set it position and it's order of display
Graph_Legend.display - Yes or No
Graph_Legend.orientation - Horizontal or Vertical
Graph_Legend.reverseOrder - Yes or No, It specifies whether the order of the series in the legend is reversed or not
Graph_Legend.reverseKey - Yes or No, It specifies whether the series label and the key that explains the unique pattern and color of the series are reversed. The default is to show the key to the left of the label.
Graph_Legend.location - Location of the legend, Possible value can be one these: UseOffsets;TopLeft;BottomLeft;TopRight;BottomRight;Left;Right;Top;Bottom
If above is set to UseOffsets then following offset values can be passed:
Graph_Legend.location.horizOffset
Graph_Legend.location.vertOffse
Graph_Legend.location.horizOffset and Graph_Legend.location.vertOffset are used when location is set to 0. Graph_Legend.location.horizOffset is expressed in points from the left side of the graph to the left side of the legend. Graph_Legend.location.vertOffset is expressed in points from the top of the graph to the top of the legend.

Any of the commands available above can be passed as an attributes inside the following tag  as shown below in order to tell Webimpetus to process these commands from a free text object as a graph gif image. Various types of graphs are available in the WebImpetus. After creating the code save the document and you will notice a gif image file is created and attached to the object in which you have written the code. Graph is created dynamically on the fly every type code is written. These commands are very easy to use as in order to create a graph all we have to write code with the above commands and their attribute values, in the format as shown below:  Let's write some code to generate a simple graph of type "Area" of size 470 x 280. This graph will display data categorised into months, say we start from month 11/04 and go upto 10/05. Basically it will display series data in monthly intervals for a year. Add values for each series for each month using attribute 'Graph_Values1' and 'Graph_Values2'. So in order to create a graph add the following code in the object box in the caliban editor area and save the document:

<!--WebImpetusGraph Graph_Type="Area"

Graph_Type_Options="Area;Column;Picture;Line;Scatter;Pie;Polar;2D_XY;3D_Column;3D_Line;3D_Area;3D_Surface;3D_Triangle;3D_Spike;Random" -- | Lets add graph image width and height using attributes 'Graph_Width' and 'Graph_Height' |-- Graph_Width="470"
Graph_Height="280"
--| Lets add some categories in which we want to display graph data 'Graph_Categories'
Graph_Categories="11/04;12/04;01/05;02/05;03/05;04/05;05/05;06/05;07/05;08/05;09/05;10/05"
Graph_Values1="4;5;6;5;5;6;7;5.5;5;6;5;5" Graph_Values2="6;7;4;6;5.5;5;4.5;6;6;5;5;4"
Graph_Series="Response time;Average" Graph_Series.colors="orange;blue"
Graph_Series.setScaleAuto="false" Graph_Series.minValue="0"
Graph_Series.maxValue="12" Graph_Series.maxIncrement="1" Graph_Series.minIncrement="0.1" //set graph legend options Graph_Legend.setAuto="false" Graph_Legend.display="yes" yes/no Graph_Legend.orientation="Horizontal" Horizontal/Vertical Graph_Legend.reverseOrder="no" yes/no Graph_Legend.reverseKey="no" yes/no Graph_Legend.location="Top" Graph_Legend.locationoptions=UseOffsets;TopLeft;BottomLeft;TopRight;BottomRight;Left;Right;Top;Bottom Graph_Legend.location.horizOffset="" Graph_Legend.location.vertOffset=" --> Conclusion: Creating and maintaining different types of graphs is easy with Webimpetus. A non technical person with no graphic design skills can create graphs and charts. See the example code and how it renders below:

How it renders

Another example of graph type: 3D_Column

Creating different types of graphs randomly

Creating a Pie graph