Chart |
Adds a chart to the Web page.
Note: These Charts are rendered using a Flash player. In cases where the Flash player is not supported, not installed, or disabled, the Charts are rendered using the JavaScript rendering option in the Web browsers.
Syntax
HTML |
<div cordysType="wcp.library.util.Chart" id="chart1" title="test title"> ... </div> |
The properties and methods defined for the chart library are as follows.
Table 1. List of Attributes
Attribute |
Property |
Description |
|---|---|---|
title |
title |
String that contains the title of the chart. |
width |
width |
String that contains the width of the chart. |
height |
height |
String that contains the height of the chart. |
chartType |
chartType |
String that contains the chart type to be rendered on the XForm. |
xAxisCaption |
xAxisCaption |
String that contains the x-axis label for the chart. |
yAxisCaption |
yAxisCaption |
String that contains the y-axis label for the chart. |
Table 2. List of Methods
Method |
Description |
|---|---|
draw(container) |
Draws the chart in the provided container (a div element). |
getAnimation |
Retrieves the animation property set for the control. |
getYAxisMaxValue() |
Retrieves the upper limit of values that can be displayed in the chart. |
getYAxisMinValue() |
Retrieves the lower limit of values that can be displayed in the chart. |
setAnimation(value) |
Denotes whether the chart control will open as an animation, when rendered. Possible values aretrue(default) andfalse. |
setXAxisCaption(label) |
Sets the x-axis label for the chart. |
setYAxisCaption(label) |
Sets the y-axis label for the chart. |
setChartType(chartType) |
Sets the chart type to be rendered on the XForm. See Table 3 below for information about the various chart types and respective values to be passed. |
setDataColor(dataColor) |
Sets the color for each data plot in the chart. |
setData(data) |
Sets the data to be displayed for a chart. |
setDimensions(width, height) |
Sets the width and height for the chart. |
setLabelColumn(labelColumn) |
Sets the label column that is the x-axis for the chart. |
setTitle(title) |
Sets the title of the chart. |
setYAxisMaxValue(value) |
Sets the upper limit for the values that can be displayed on the y-axis of the chart. If not specified, it is calculated based on the data provided for display in the chart. |
setYAxisMinValue(value) |
Sets the lower limit for the values that can be displayed on the y-axis of the chart. If not specified, it is calculated based on the data provided for display in the chart. |
setValueColumn(valueColumn) |
Sets the value column(s) that is the y-axis for the chart. |
Table 3. List of Chart Types (used with the setChartType method)
Control |
Chart type |
Value to be passed |
|---|---|---|
Chart - Single Series |
"Column 2D" |
"Column 2D" |
|
"Column 3D" |
"Column 3D" |
|
"Line 2D" |
"Line 2D" |
|
"Area 2D" |
"Area 2D" |
|
"Bar 2D" |
"Bar 2D" |
|
"Pie 2D" |
"Pie 2D" |
|
"Pie 3D" |
"Pie 3D" |
|
"Pyramid" |
"Pyramid" |
Chart - Multi Series |
"Column 2D" |
"Multi-series Column 2D" |
|
"Column 3D" |
"Multi-series Column 3D" |
|
"Line 2D" |
"Multi-series Line 2D" |
|
"Area 2D" |
"Multi-series Area 2D" |
|
"Bar 2D" |
"Multi-series Bar 2D" |
|
"Scroll Column 2D" |
"Scroll Column 2D" |
|
"Scroll Line 2D" |
"Scroll Line 2D" |
|
"ScrollStackedColumn2D" |
"ScrollStackedColumn2D" |
|
"StackedColumn2D" |
"StackedColumn2D" |
|
"StackedColumn3D" |
"StackedColumn3D" |
|
"StackedBar2D" |
"StackedBar2D" |
|
"StackedBar3D" |
"StackedBar3D" |
Chart - Gauge |
"Angular Gauge" |
"Angular Gauge" |
|
"Linear Gauge" |
"Linear Gauge" |
|
"Vertical Bullet" |
"Vertical Bullet" |
|
"Horizontal Bullet" |
"Horizontal Bullet" |
Example
<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Chart Demo</title>
<script type="text/javascript" src="/cordys/wcp/application.js"></script>
<script type="cordys/xml" id="chartData1">
<data>
<tuple>
<old>
<Reports>
<monthname>Jan</monthname>
<year2007>27400</year2007>
<year2008>10000</year2008>
</Reports>
</old>
</tuple>
<tuple>
<old>
<Reports>
<monthname>Feb</monthname>
<year2007>29800</year2007>
<year2008>11500</year2008>
</Reports>
</old>
</tuple>
<tuple>
<old>
<Reports>
<monthname>Mar</monthname>
<year2007>25800</year2007>
<year2008>12500</year2008>
</Reports>
</old>
</tuple>
</data>
</script>
<script type="text/javascript">
function draw()
{
chart = document.getElementById("chart1");
chart.setData(cordys.cloneXMLDocument(chartData1.XMLDocument));
chart.setLabelColumn(".//monthname");
chart.setValueColumn([".//year2007", ".//year2008"]);
chart.draw(chart);
}
</script>
</head>
<body>
<div cordysType="wcp.library.util.Chart" id="chart1" width="500" height="500"
title="Revenue Reports" chartType="Multi-series Column 2D"
xAxisCaption="Month" yAxisCaption="Revenue">
</div>
<br/>
<button class="medium" onclick=draw()>Draw Chart</button>
<br/><br/>
</body>
</html>