Line Chart

Top  Previous  Next  

File examples you can find in the package:

 

Sample XML for Line Chart:

<?xml version="1.0" encoding="iso-8859-1"?>

<graph>

       <general_settings bg_color="CCCCCC" showAnchor="1" showArea="0" type_animation="1">

       <header text="Test header" font="Verdana" color="000000" size="18" />

       <subheader text="Test Subheader" font="Verdana" color="000000" size="15" />

       <legend font="Verdana" color="000000" font_size="11" />

       <legend_popup font="Verdana" bgcolor="FFFFE3" font_size="10" />

       <Xheaders show_calibration="1" rotate="90" color="000000" size="10" title="Test Xheaders" title_color="000000" />

       <Yheaders color="000000" size="10" title="Test Yheaders" title_rotate="90" title_color="000000" />

       <grid animation="0" showX="1" showY="1" grid_width="550" grid_height="250" grid_color="000000" grid_alpha="40" grid_thickness="1" bg_color="ffffff" bg_alpha="100" alternate_bg_color="00FFFF" border_color="000000" border_thickness="2" />

       <abscissa_data>

               <x value="00:00" />

               <x value="01:00" />

               <x value="02:00" />

               <x value="03:00" />

               <x value="04:00" />

               <x value="05:00" />

               <x value="06:00" />

               <x value="07:00" />

               <x value="08:00" />

               <x value="09:00" />

               <x value="10:00" />

               <x value="11:00" />

               <x value="12:00" />

               <x value="13:00" />

               <x value="14:00" />

               <x value="15:00" />

               <x value="16:00" />

               <x value="17:00" />

               <x value="18:00" />

               <x value="19:00" />

               <x value="20:00" />

               <x value="21:00" />

               <x value="22:00" />

               <x value="23:00" />

       </abscissa_data>

       <ordinate_data seriesName="Sat" color="0080C0" alpha="50" size="3.5">

               <y value="66" color_area="AFD8F8" alpha_area="80" />

               <y value="51" color_area="F6BD0F" alpha_area="80" />

               <y value="50" color_area="8BBA00" alpha_area="80" />

               <y value="75" color_area="FFFF00" alpha_area="80" />

               <y value="30" color_area="A66EDD" alpha_area="80" />

       </ordinate_data>

       <ordinate_data seriesName="Fri" color="FF0000" size="3.5">

               <y value="23" />

               <y value="40" />

               <y value="62" />

               <y value="118" />

               <y value="130" />

               <y value="139" />

               <y value="158" />

               <y value="233" />

               <y value="297" />

               <y value="379" />

               <y value="503" />

               <y value="687" />

               <y value="746" />

               <y value="857" />

               <y value="973" />

               <y value="1125" />

               <y value="1320" />

               <y value="1518" />

               <y value="1797" />

               <y value="1893" />

               <y value="2010" />

               <y value="2057" />

               <y value="2166" />

               <y value="2197" />

       </ordinate_data>

       <ordinate_data seriesName="Bat" color="FF8040" size="3.5">

               <y value="115" />

               <y value="141" />

               <y value="175" />

               <y value="189" />

               <y value="208" />

               <y value="229" />

               <y value="252" />

               <y value="440" />

               <y value="608" />

               <y value="889" />

               <y value="1334" />

               <y value="456" />

               <y value="1000" />

               <y value="2600" />

               <y value="3070" />

               <y value="3451" />

               <y value="3918" />

               <y value="4140" />

               <y value="4296" />

               <y value="4519" />

               <y value="4716" />

               <y value="2881" />

               <y value="1092" />

               <y value="522" />

       </ordinate_data>

       <ordinate_data seriesName="Microsoft" color="FF0080" size="3.5">

               <y value="98" />

               <y value="1112" />

               <y value="1192" />

               <y value="1219" />

               <y value="1264" />

               <y value="1282" />

               <y value="1365" />

               <y value="1433" />

               <y value="1559" />

               <y value="1823" />

               <y value="1867" />

               <y value="2198" />

               <y value="1112" />

               <y value="1192" />

               <y value="1219" />

               <y value="2264" />

               <y value="2282" />

               <y value="2365" />

               <y value="2433" />

               <y value="2559" />

               <y value="2823" />

               <y value="2867" />

               <y value="2867" />

               <y value="2867" />

       </ordinate_data>

</graph>

 

Description:

 

Header tag of the XML file:

 

<?xml version="1.0" encoding="ISO-8859-1"?>

<graph>...</graph>

 

You should place a valid XML header at the beginning of every XML file. If you use symbols different from Latin-1 encoding, please set the right encoding for you. In order to get more universality you can use Unicode:

 

<?xml version="1.0" encoding="utf-8"?>

<graph>

 

Setting up the appearance of the chart:

 

<general_settings bg_color="CCCCCC" showAnchor="1" showArea="0" type_animation="2">

 

Data:

Attribute

Description

bg_color

'CCCCCC' - general background color of the line chart

showAnchor

"1" - Showing of the anchor points on the lines:
'1' - to show

'0' - not to show

showArea

"0" - Showing of the continuous fields under chart lines.  It affects only if  type_animation="2":
'1' - to show

'0' - not to show

type_animation

"2" - Animation type:
"2" type 2

"1" type 1

"0" without animation

 

Setting up the top row of the Line Chart header (the uppermost text):

 

<header  text='Test header' font='Verdana' color='000000' size='18'/>

 

Data:

Attribute

Description

text

'Test header' - Header content

font

'Verdana' -  Header font

color

'000000' - Header color

size

'18' - Header font size

 

Setting up the bottom row of the Line Chart header (the text second from above):

 

<subheader  text='Test Subheader' font='Verdana' color='000000' size='15'/>

 

Data:

Attribute

Description

text

'Test subheader' - Header content

font

'Verdana' - Header font

color

'000000' - Header color

size

'15' - Header font size

 

Setting up the legend:

 

<legend font='Verdana' color='000000' font_size='11'/>

 

Data:

Attribute

Description

font

'Verdana' - caption font

font_color

'000000' - caption color

font_size

'11' - caption font size

 

Setting up the view of the popup hint on mouse over the sectors of line chart:

 

<legend_popup font='Verdana' bgcolor='FFFFE3' font_size='10'/>

 

Data:

Attribute

Description

font

'Verdana' - caption font

bgcolor

'FFFFE3' - popup background color

size

'10' - caption font size

 

Setting up the view of calibration text on axis X of the graph:

 

<Xheaders show_calibration="1" rotate='90' color='000000' size='10' title='Test Xheaders' title_color='000000'/>

 

Data:

Attribute

Description

rotate

'90' - Text rotation angle (there are two values possible, 0 and 90)

color

'000000' - text color

size

'10'- font size

title

'Test Xheaders' - caption content for X axis

title_color

'000000' - caption text color

 

Setting up the view of graduation text on axis Y of the graph:

 

<Yheaders color='000000' size='10' title='Test Yheaders' title_rotate='90' title_color='000000'/>

 

Data:

Attribute

Description

color

'000000'- text color

size

'10'- font size

title

'Test Yheaders' - caption content for Y axis

title_rotate

'90' - Caption rotation angle (there are two values possible, 0 and 90)

title_color

'000000' - caption text color

 

Setting up the view of the chart grid:

 

<grid  animation="0" showX='1' showY='1' grid_width='550' grid_height='250' grid_color='000000' grid_alpha='40' grid_thickness='1' bg_color='ffffff' bg_alpha='100' alternate_bg_color='00FFFF' border_color='000000' border_thickness='2'/>

 

Data:

Attribute

Description

animation

"0" - Animation when drawing grid lines:

'1' - with animation

'0' - without animation

showX, showY

showX='1' showY='1' showing of grid lines:
'1' - to show

'0' - not to show

persent_stepY_from_stepX

"175" - Ratio of  the step of  placing vertical lines and the step of placing horizontal lines (in percents) . Number of horizontal lines depends on it.

grid_width, grid_height

grid_width='550' grid_height='250' - grid width, grid height (in pixels)

grid_color

'000000' - grid lines color

grid_alpha

'40' - grid lines alpha-transparency (between 0 and 100)

grid_thickness

'1' - grid lines thickness

bg_color

'ffffff' - grid field background color

bg_alpha

'100' - grid field background alpha-transparency

alternate_bg_color

'00FFFF' - grid rectangular alternate fields color

border_color

'000000' - grid border color

border_thickness

'2' - grid border thickness

 

Values postponed on Х axis:

 

<abscissa_data>

       <x value="00:00" />

       <x value="01:00" />

       ...

       <x value="23:00" />

</abscissa_data>

 

Values postponed on y axis:

!! If <y value='' /> or <y value="" /> - no data, it will be displayed as the break of a continuous line

 

<ordinate_data seriesName='Sat' color='0080C0' alpha='50' size='3.5'>

 

Data:

Attribute

Description

seriesName

'Sat' - data series name which is displayed at the legend and the legend popup

color

'0080C0' - chart line color

alpha

'50' - transparency of the continuous field under the grid (when showArea="1")

size

'3.5' - chart line size

 

!! You have to set attributes color_area="AFD8F8" and alpha_area="80" in  <y value='66' color_area="AFD8F8" alpha_area="80"/> when it is necessary to paint continuous field under the lines using different colors according to the data:

 

<y value='66' color_area="AFD8F8" alpha_area="80"/>

 

Data:

Attribute

Description

color_area

"AFD8F8" - continuous field color (when showArea="1")

alpha_area

"80" - continuous field transperancy (when showArea="1")