2D Column and Bar Charts

Top  Previous  Next  

File examples that you can find in the package:

 

Sample XML for 2D Column and Bar Charts:

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

<graph>

<general_settings bg_color="CCCCCC" type_graph="v" />

<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 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 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" />

<bars view_value="1" width="55" alpha="70" view_double_bar="1" color_double_bar="b7b7b7" pieces_grow_bar="40" />

       <data name="Tue Jun 20" value="5100" color="FFDE5B" />

       <data name="Wed Jun 21" value="7900" color="FFD737" />

       <data name="Thu Jun 22" value="11200" color="FFD012" />

       <data name="Fri Jun 23" value="6200" color="FFDB49" />

       <data name="Sat Jun 24" value="2200" color="FFE992" />

       <data name="Sun Jun 25" value="3500" color="FFE680" />

</graph>

 

Description:

 

Header tag of the XML file:

 

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

<graph>...</graph>

 

You should place valid XML header at the beginning of every XML file. If you use symbols differ 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" type_graph="v" />

 

Data:

Attribute

Description

bg_color

"CCCCCC" - chart background general color.

type_graph

"v" - type of arrangement:

"v" -  vertical

"h" -  horizontal

 

 

Setting up the header of the chart (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 sub header of the chart (The second text 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

bgcolor

"FFFFE3" – caption color

size

"11" – caption font size

 

 

Setting up the view of the popup hint on mouse over on the sectors of Bar 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 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 Bar Chart grid:

 

<grid 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

grid_width, grid_height

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

grid_color

'000000' - grid lines color

grid_alpha

'40' - grid lines alpha-transparency (from 0 to 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 vertical rectangular alternate fields color

border_color

'000000' - grid border color

border_thickness

'2' - grid border thickness

 

Setting up the bars view of chart:

 

<bars view_value="1" width="55" alpha="70" view_double_bar="1" color_double_bar="b7b7b7" pieces_grow_bar="40" />

 

Data:

Attribute

Description

view_value

'1' - Showing the value near the left side of the bar:
'1' - to show

'0' - not to show

width

'55' - bars width

alpha

'70' - bars transparency

view_double_bar

"1" - Showing the double bars:

'1' - to show

'0' - not to show

color_double_bar

"b7b7b7" - Bar copy color

pieces_grow_bar

'40' - Number of shares (pieces), on which maximal bar length will be divided when calculating the animation step. One share is equal to increment step when drawing bars. Bigger value of pieces_grow_bar means smaller speed of bars. If pieces_grow_bar=1 bars will reach their real length instantly.

 

Setting up the data for the line graph:

 

<data name="Tue Jun 20" value="5100" color="FFDE5B" />

<data name="Wed Jun 21" value="7900" color="FFD737" />

<data name="Thu Jun 22" value="11200" color="FFD012" />

...

 

Data:

Attribute

Description

name

"Tue Jun 20" - data series name

value

"5100" - values on X axis

color

"FFDE5B" – color of the bar