Preview GalleryTable of Contents
SwifferChart input XML
SwifferChart input XML has these elements:
- chart as the root element
- datatable to specify data and
- visual to customize the rendering attributes of the chart
- customobjects to overlay custom drawing objects, text and html
The overall structure of the xml is very simple with two top-level sections:
<chart> <visual>...</visual> <customobjects>...</customobjects> <datatable>...</datatable> </chart>
chart element
This is enveloping root element of the input xml.
| Node | Type | Data type | Min.1) | Max.2) | Example |
|---|---|---|---|---|---|
| » subtype | attribute | string | 0 | 1 | <chart subtype=”clustered”> |
| » type | attribute | string | 1 | 1 | <chart type=”bar”> |
NOTE Most of the attributes have value ranges and applicability that vary with the type of chart. Refer to individual chart type manual pages for details.
datatable element
Datatable element describes data in terms of rows and columns.
| Node | Type | Data type | Min.3) | Max.4) | Example |
|---|---|---|---|---|---|
| » comment | attribute | string | 0 | 1 | <datatable comment=”Rainfall data”> |
| row | element | xmlnode | 1 | ∞ | <row>...</row> |
| » » row.col | element | xmlnode | 2 | ∞ | <row><col ... ></col></row> |
| » » row.col.alt | attribute | string | 0 | 1 | <col alt=”$45,000.00”>45000</col> |
| » » row.col.animate | attribute | boolean | 0 | 1 | <col animate=”true”>45000</col> |
| » » row.col.highlight | attribute | boolean | 0 | 1 | <col highlight=”true”>45.33</col> |
| » » row.col.href | attribute | url | 0 | 1 | <col url=”/hr/employees.php?id=45”>Bloe, Joe</col> |
| » » row.col.name5) | attribute | string | 0 | 1 | <col name=”salary”>45000</col> |
| » » row.col.valuelabel | attribute | string | 0 | 1 | <col valuelabel=”15th May”>5/15/2007</col> |
| » » row.col.zoomxml | attribute | url | 0 | 1 | <col zoomxml=”/chartdata/salarybreakup.xml”>45000</col> |
NOTE The first column in each row is treated as the category-axis.
customobjects element
| Node | Type | Data type | Min.6) | Max.7) | Example |
|---|---|---|---|---|---|
| arc | element | xmlnode | 0 | 1 | to draw an arc |
| » arc.color | attribute | number | 0 | 1 | |
| » arc.dropshadow | attribute | boolean | 0 | 1 | show dropshadow or not |
| » arc.endstyle | attribute | string | 0 | 1 | square, round or none |
| » arc.opacity | attribute | number | 0 | 1 | |
| » arc.radii | attribute | string | 0 | 1 | comma-separated values of x-radius and y-radius |
| » arc.start | attribute | string | 0 | 1 | comma-separated start co-ordinates |
| » arc.startangle | attribute | number | 0 | 1 | starting point w.r.t first quadrant (+ve x-axis) |
| » arc.sweepangle | attribute | number | 0 | 1 | |
| » arc.thickness | attribute | number | 0 | 1 | |
| line | element | xmlnode | 0 | 1 | to draw a custom line |
| » line.color | attribute | number | 0 | 1 | |
| » line.dropshadow | attribute | boolean | 0 | 1 | show dropshadow or not |
| » line.end | attribute | string | 0 | 1 | comma-separated start co-ordinates |
| » line.endstyle | attribute | string | 0 | 1 | square, round or none |
| » line.opacity | attribute | number | 0 | 1 | |
| » line.start | attribute | string | 0 | 1 | comma-separated start co-ordinates |
| » line.thickness | attribute | number | 0 | 1 | |
| label | element | xmlnode | 0 | 1 | to place custom text |
| » label.align | attribute | string | 0 | 1 | |
| » label.bold | attribute | boolean | 0 | 1 | |
| » label.color | attribute | number | 0 | 1 | |
| » label.dropshadow | attribute | boolean | 0 | 1 | show dropshadow or not |
| » label.font | attribute | string | 0 | 1 | |
| » label.italic | attribute | boolean | 0 | 1 | |
| » label.kerning | attribute | boolean | 0 | 1 | |
| » label.position | attribute | string | 0 | 1 | comma-separated co-ordinates of top-left corner |
| » label.size | attribute | number | 0 | 1 | |
| » label.text | attribute | string | 0 | 1 | |
| » label.underline | attribute | boolean | 0 | 1 | |
| html | element | xmlnode | 0 | 1 | to place custom html text |
| » CDATA-Section | xmlnodevalue | string | 0 | 1 | html text |
| » html.dropshadow | attribute | boolean | 0 | 1 | |
| » html.position | attribute | string | 0 | 1 | comma-separated co-ordinates of top-left corner |
| ellipse | element | xmlnode | 0 | 1 | to draw an ellipse/circle |
| » ellipse.bordercolor | attribute | number | 0 | 1 | |
| » ellipse.borderopacity | attribute | number | 0 | 1 | |
| » ellipse.borderthickness | attribute | number | 0 | 1 | |
| » ellipse.center | attribute | string | 0 | 1 | center=”100,100” |
| » ellipse.colors | attribute | string | 0 | 1 | colors=”0xFFFFFF,0x0000FF” |
| » ellipse.dropshadow | attribute | boolean | 0 | 1 | show dropshadow or not |
| » ellipse.gradientangle | attribute | number | 0 | 1 | gradientangle=”-45” |
| » ellipse.gradienttype | attribute | string | 0 | 1 | gradienttype=”radial” |
| » ellipse.height | attribute | number | 0 | 1 | height=”25” |
| » ellipse.opacities | attribute | string | 0 | 1 | opacities=”30,80” |
| » ellipse.width | attribute | number | 0 | 1 | width=”25” |
| polygon | element | xmlnode | 0 | 1 | to draw any regular/irregular polygon |
| » polygon.bordercolor | attribute | number | 0 | 1 | |
| » polygon.borderopacity | attribute | number | 0 | 1 | |
| » polygon.borderthickness | attribute | number | 0 | 1 | |
| » polygon.colors | attribute | string | 0 | 1 | colors=”0xFFFFFF,0x0000FF” |
| » polygon.dropshadow | attribute | boolean | 0 | 1 | show dropshadow or not |
| » polygon.gradientangle | attribute | number | 0 | 1 | gradientangle=”-45” |
| » polygon.gradienttype | attribute | string | 0 | 1 | gradienttype=”radial” |
| » polygon.opacities | attribute | string | 0 | 1 | opacities=”30,80” |
| » polygon.vertices | attribute | string | 0 | 1 | string of vertex points in x1,y1;x2,y2;... format |
visual element
| Node | Type | Data type | Min.8) | Max.9) | Example |
|---|---|---|---|---|---|
| » animation | attribute | string | 0 | 1 | <visual animation=”bounce”> |
| » animationduration | attribute | number | 0 | 1 | <visual animationduration=”1”> |
| » orientation | attribute | string | 0 | 1 | <visual orientation=”vertical”> |
| » style | attribute | string | 0 | 1 | <visual style=”glass”> |
| bubble | element | xmlnode | 0 | 1 | |
| » bubble.minradius | attribute | number | 0 | 1 | |
| » bubble.radiusstep | attribute | number | 0 | 1 | |
| chartbackground | element | xmlnode | 0 | 1 | |
| » chartbackground.endcolor | attribute | number | 0 | 1 | endcolor=”0xFFFFFF” |
| » chartbackground.endopacity | attribute | number | 0 | 1 | endopacity=”30” |
| » chartbackground.gradientangle | attribute | number | 0 | 1 | gradientangle=”-45” |
| » chartbackground.gradienttype | attribute | string | 0 | 1 | gradienttype=”linear” |
| » chartbackground.maskopacity | attribute | number | 0 | 1 | maskopacity=”25” |
| » chartbackground.startcolor | attribute | number | 0 | 1 | startcolor=”0x0033FF” |
| » chartbackground.startopacity | attribute | number | 0 | 1 | startopacity=”100” |
| » chartbackground.type | attribute | string | 0 | 1 | type=”gradient” |
| » chartbackground.url | attribute | url | 0 | 1 | type=”image” url=”/images/rainfall.jpg” |
| charttitle | element | xmlnode | 0 | 1 | |
| » charttitle.align | attribute | string | 0 | 1 | |
| » charttitle.bold | attribute | boolean | 0 | 1 | |
| » charttitle.color | attribute | number | 0 | 1 | |
| » charttitle.font | attribute | string | 0 | 1 | |
| » charttitle.italic | attribute | boolean | 0 | 1 | |
| » charttitle.kerning | attribute | boolean | 0 | 1 | |
| » charttitle.size | attribute | number | 0 | 1 | |
| » charttitle.text | attribute | string | 0 | 1 | |
| » charttitle.underline | attribute | boolean | 0 | 1 | |
| » charttitle.visible | attribute | boolean | 0 | 1 | |
| chartzones | element | xmlnode | 0 | 1 | |
| » chartzones.colors | attribute | string | 0 | 1 | |
| » chartzones.lengths | attribute | string | 0 | 1 | |
| » chartzones.opacities | attribute | string | 0 | 1 | |
| gauge | element | xmlnode | 0 | 1 | |
| » gauge.radius | attribute | number | 0 | 1 | |
| » gauge.colors | attribute | string | 0 | 1 | |
| » gauge.xoffset | attribute | string | 0 | 1 | |
| » gauge.yoffset | attribute | string | 0 | 1 | |
| legend | element | xmlnode | 0 | 1 | |
| » legend.bold | attribute | boolean | 0 | 1 | |
| » legend.color | attribute | number | 0 | 1 | |
| » legend.font | attribute | string | 0 | 1 | |
| » legend.italic | attribute | boolean | 0 | 1 | |
| » legend.kerning | attribute | boolean | 0 | 1 | |
| » legend.position | attribute | string | 0 | 1 | |
| » legend.size | attribute | number | 0 | 1 | |
| » legend.underline | attribute | boolean | 0 | 1 | |
| majorgrid | element | xmlnode | 0 | 1 | |
| » majorgrid.horizontal | attribute | boolean | 0 | 1 | |
| » majorgrid.vertical | attribute | boolean | 0 | 1 | |
| » majorgrid.color | attribute | number | 0 | 1 | |
| » majorgrid.frequency | attribute | number | 0 | 1 | |
| minorgrid 10) | element | xmlnode | 0 | 1 | |
| » minorgrid.horizontal | attribute | boolean | 0 | 1 | |
| » minorgrid.vertical | attribute | boolean | 0 | 1 | |
| » minorgrid.color | attribute | number | 0 | 1 | |
| » minorgrid.frequency | attribute | number | 0 | 1 | |
| pie | element | xmlnode | 0 | 1 | |
| » pie.width | attribute | number | 0 | 1 | |
| » pie.height | attribute | number | 0 | 1 | |
| » pie.center | attribute | string | 0 | 1 | |
| plotarea | element | xmlnode | 0 | 1 | |
| » plotarea.leftmargin | attribute | number | 0 | 1 | |
| » plotarea.rightmargin | attribute | number | 0 | 1 | |
| » plotarea.topmargin | attribute | number | 0 | 1 | |
| » plotarea.bottommargin | attribute | number | 0 | 1 | |
| series | element | xmlnode | 0 | 1 | |
| » series.colors | attribute | string | 0 | 1 | |
| » series.highlight | attribute | string | 0 | 1 | |
| » series.names | attribute | string | 0 | 1 | |
| » series.trendlines | attribute | string | 0 | 1 | |
| » series.trendlinetypes | attribute | string | 0 | 1 | |
| xaxis | element | xmlnode | 0 | 1 | |
| » xaxis.bottom | attribute | boolean | 0 | 1 | |
| » xaxis.color | attribute | number | 0 | 1 | |
| » xaxis.tickposition | attribute | string | 0 | 1 | |
| » xaxis.top | attribute | boolean | 0 | 1 | |
| xaxisticklabel | element | xmlnode | 0 | 1 | |
| » xaxisticklabel.bold | attribute | boolean | 0 | 1 | |
| » xaxisticklabel.color | attribute | number | 0 | 1 | |
| » xaxisticklabel.font | attribute | string | 0 | 1 | |
| » xaxisticklabel.frequency | attribute | number | 0 | 1 | |
| » xaxisticklabel.italic | attribute | boolean | 0 | 1 | |
| » xaxisticklabel.kerning | attribute | boolean | 0 | 1 | |
| » xaxisticklabel.size | attribute | number | 0 | 1 | |
| » xaxisticklabel.underline | attribute | boolean | 0 | 1 | |
| yaxis | element | xmlnode | 0 | 1 | |
| » yaxis.bottom | attribute | boolean | 0 | 1 | |
| » yaxis.color | attribute | number | 0 | 1 | |
| » yaxis.tickposition | attribute | string | 0 | 1 | |
| » yaxis.top | attribute | boolean | 0 | 1 | |
| yaxisticklabel | element | xmlnode | 0 | 1 | |
| » yaxisticklabel.bold | attribute | boolean | 0 | 1 | |
| » yaxisticklabel.color | attribute | number | 0 | 1 | |
| » yaxisticklabel.font | attribute | string | 0 | 1 | |
| » yaxisticklabel.frequency | attribute | number | 0 | 1 | |
| » yaxisticklabel.italic | attribute | boolean | 0 | 1 | |
| » yaxisticklabel.kerning | attribute | boolean | 0 | 1 | |
| » yaxisticklabel.pulloutlines | attribute | boolean | 0 | 1 | |
| » yaxisticklabel.showpercentage | attribute | boolean | 0 | 1 | |
| » yaxisticklabel.showvalue | attribute | boolean | 0 | 1 | |
| » yaxisticklabel.size | attribute | number | 0 | 1 | |
| » yaxisticklabel.underline | attribute | boolean | 0 | 1 |
