| |
| |
2D Column and Bar Charts
| Author: Edward Hardin Reference Number: AA-00313 Views: 4240 Last Updated: 05/24/2011 12:25 PM |
0 Rating/ Voters
|
 |
2D Column and Bar Charts
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:
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:
Setting up the appearance of the chart:
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):
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):
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:
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 mouseover on the sectors of the Bar Chart:
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:
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:
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:
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:
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 an incremental step when drawing bars. A bigger value of the pieces_grow_bar means a 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:
|
Attribute |
Description |
|
name
|
"Tue Jun 20" - data series name
|
|
value
|
"5100" - values on X axis
|
|
color
|
"FFDE5B" – color of the bar
|
|
|
| |
|
Categories 