aspx:SerialChart
Serial Chart allows the creation of bar, area or line charts. Using this component, you can show one or more graphs at the same time.
Sample of bar chart:
<aspx:SerialChart runat="server" height="300px" dataUrl="/aspx/chartsplayground/accountsbytype" categoryField="Type" rotate="true">
<Graphs>
<aspx:Graph type="column" valueField="Count" title="Account Type" balloonText="$[[value]]"/>
</Graphs>
<legend useGraphSettings="true"/>
<categoryAxis labelRotation="30"/>
</aspx:SerialChart>
Sample data:
{
"Type": "Gold Partners",
"Count": 1203,
"AverageNew": 7
},
{
"Type": "Silver Partners",
"Count": 845,
"AverageNew": 3
},
{
"category": "Bronze Partners",
"Count": 983,
"AverageNew": 4
}
SerialChart Properties
| Property | Type | Description |
|---|
| Angle | int | |
| Depth3D | int | |
| CategoryField | string | Field name used |
| CategoryAxis | object | Settings for category axis of the chart see below |
| Colors | string | List of colors - comma-separated |
| Legend | Object | Type of Legend |
| Graphs | Object | List of graphs to be shown for the given category value |
| Title | string | Title of the chart |
| Rotate | bool | |
| DataUrl | string | JSON resource URL |
| DataHttpType | string | GET or POST |
| ValueAxis | object | Settings of the value axis, see below. |
| Width | Pixel unit | Values such as "200px" or "100%" |
| Height | Pixel unit | "300px", do not use percent values for best results. |
Graph Properties
| Property | Type | Description |
|---|
| balloonText | string | How the balloon text should be formatted
Default: [[title]] of [[category]]:[[value]] |
| clustered | bool | |
| colorField | string | Field in the dataset that designates the color of the graph |
| type | picklist | Values: column, line, smoothedLine, step |
| fillAlphas | float | default:1 |
| labelText | string | |
| lineThickness | int | |
| lineAlpha | int | default:1 |
| title | string | |
| valueField | string | The field in the data source should be shown as the value of this graph. |
CategoryAxis Properties
| Property | Type | Description |
|---|
| position | picklist | The field in the data source should be shown as the value of this graph.
NotSet, Top, Middle, Bottom
Default: bottom |
| labelRotation | int | |
| gridPosition | string | Values:start, middle
default:start |
| titleColor | color | Hex sting value of the title color |
ValueAxis Properties
| Property | Type | Description |
|---|
| position | picklist | "left","right"
Default: "left" |
| title | string | |
| titleColor | string | |
| precision | short | Number of decimal places shown |
| stackType | picklist | "regular","100%","3D" |
| unit | string | Examples: "kg" or "cm",
Value will be to the left or right of the value Axis. |
| unitPosition | picklist | Values: "left", "right"
Default: "right" |