Syntax
Parameters
Name | Data Type | Properties | Description |
---|---|---|---|
DataSeries | String |
RawData
|
Sets the data series shown in this chart. |
Layout | String |
RawData
|
Sets the layout used to display this chart. |
Template | String | - | Not in use. |
TemplateLocation | Locator | - | Not in use. |
Shared Parameters
Name | Data Type | Properties | Description |
---|---|---|---|
Access | String | - | Friendly name of the minimum access type level required by the site visitor to execute this macro. |
AccessDenied | String |
RawData
|
Sets the value that is returned when the site visitor has insufficient access. |
AIM | Enum | - |
Sets the AIM scanning mode of the macro.
Enum values:
|
Condition | String |
MustBeAttribute
ExpressionSyntax XmlDecode |
Sets the Viper expression to evaluate before actually executing the macro. If the expression returns false, the execution of the module and its child modules is skipped. |
Default | String |
RawData
|
Sets the default value that will be returned when the execution would otherwise return an empty string. |
Error | String |
RawData
|
Sets the value to return in case on error occurs during execution. The Viper expressions this.error(), this.error(full) and this.error(type) are available in this context. |
Id | String |
MustBeAttribute
Trim |
Sets the Id of the macro. Macros with Ids set can be accessed using Viper by referring to page.[id].[methodname()]. |
LocalId | String |
MustBeAttribute
Trim |
Sets the local id of the macro in the current buffer scope. |
Rem | String |
RawData
NoCache Trim |
Sets the remarks. Remarks have no effect on the actual execution of the module. They only improve the readability of the code. |
ResultFormat | String |
RawData
|
Sets the resultformat. |
ResultType | Enum | - |
Sets the type of the result.
Enum values:
|
Save | Collection | - | Sets the buffer names. |
Status | Enum | - |
Gets a value indicating the ModuleStatus of this module.
Enum values:
|
Timeout | Float | - | Sets the timeout in seconds. In the overriden Execute() method, you can call CheckTimeout() to check whether execution has timed out. |
Trim | Enum |
MustBeAttribute
|
Gets a value indicating how the whitespace is trimmed. |
Whitespace | Enum |
MustBeAttribute
|
Gets a value indicating whether to preserve whitespace.
Enum values:
|
Local Viper Methods
Viper | Extension | Description |
---|---|---|
This.ClearForcedResult |
Sets the result of the macro. used to override the normal handling of the result creation. |
|
This.getcount | Gets the number of values of the given series. | |
This.GetForcedResult | Gets the forced result of the macro, set by overriding the normal rendering using SetForcedResult(). | |
This.GetMaxYValue | Gets the max value of the given series. | |
This.GetMinYValue | Gets the min value of the given series. | |
This.getseriesname | Gets the name of the given series. | |
This.RenderTime | ✓ | Returns the render time of the macro in milliseconds. |
This.SetForcedResult |
Sets the result of the macro. used to override the normal handling of the result creation. |
|
This.XValue | Gets the current x value. | |
This.YValue | Gets the current y value. |
Shared Local Viper Methods
Viper | Extension | Description |
---|---|---|
This.AIM.Relations | ✓ | Gets a list of all outgoing AIM relations created by the macro. |
This.Buffer.Exists | Checks whether a local buffer exists. | |
This.Buffer.Get | Gets a local buffer. | |
This.Buffer.Set | Sets a local buffer. | |
This.Error.InnerException.Message | Returns the text message of the inner exception of the exception that has occurred. | |
This.Error.InnerException.SmartsiteCode | Returns Smartsite error code of the inner exception of the exception that has occurred. | |
This.Error.InnerException.Throw | Makes Smartsite throw the inner exception. | |
This.Error.InnerException.ToString | Returns the full information of the inner exception of the exception that has occurred, including the stack trace. | |
This.Error.InnerException.Type | Returns the full Type name of the inner exception of the exception that has occurred. | |
This.Error.Message | Returns the text message of the exception that has occurred. | |
This.Error.SmartsiteCode | Returns the Smartsite Error code of the exception that has occurred. | |
This.Error.Throw | Makes Smartsite throw the current exception. | |
This.Error.ToString | Returns the full information of the exception that has occurred, including the stack trace. | |
This.Error.Type | Returns the full Type name of the exception that has occurred. | |
This.FindExtension | Finds an extension macro. | |
This.GetParameter | ✓ | Gets the value of the given parameter/property. |
This.ParameterExists | ✓ | Checks whether the given parameter/property is set. |
This.Result |
Returns the result of the macro. Typically used in the ResultFormat property, to format, convert or encode the result. |
|
This.SXMLPath | Gets the path to the macro in the current execution stack. |
Examples
Line chart example
This example will show you how to create the line chart below. Although the example won't win any prizes for its design, it does demonstrate a wide variety of functions available in the Chart macro.
Note: This example uses one feature in the Chart macro, being the the arrowlength on the datalabel, that is available since 1.3 build 3. If you want to test this example on 1.3 build 1 or 2, you can remove the arrowlength attribute.
The dataseries
First, we need some data to draw a chart with, this is done with the XmlDataTable macro. You can read the code for that macro in the full example at the end of this article. Once we have the data, we need to bind it to the Chart macro by using the parameter "dataseries". This parameter allows us to bind multiple series to the chart.
Smartsite SXML | Copy Code |
---|---|
<se:parameter name="dataseries"> <se:series id="data1" inputdata="mydata" datacolumn="PageviewsPerDay" name="Pageviews per day" /> <se:series id="data2" inputdata="mydata" datacolumn="JustAnotherLine" name="Just another line" /> <se:series id="data3" inputdata="mydata" datacolumn="VisitorsPerDay" name="Visitors per day" /> </se:parameter> |
In this example we have three series, one for each line. The data for each line is stored in a column in a datatable.
The canvas
Next we define the canvas on which the chart is drawn using the chartcanvas element. The canvas represents the bitmap we are generating and it allows us to set several different options related to the bitmap. There are some obvious parameters like the width, height and fileformat of the bitmap that is generated. The mode parameter allows you to create 2d or 3d charts.
Smartsite SXML | Copy Code |
---|---|
<se:parameter name="layout"> <se:chartcanvas fileformat="png" width="640" height="480" mode3d="false"> <se:fill mode="gradient" color1="white" color2="#e0e0e0" gradientstyle="horizontal" gradientvariant="variant1" /> ... </se:chartcanvas> </se:parameter> |
The fill element generates the background filling for the entire bitmap. In this case it creates a gradient starting with white on the top of the bitmap and ending with the color #e0e0e0 on the bottom. The fill element can also create solid backgrounds or use images for its background.
The Cartesian chart
Inside the canvas we define a Cartesian chart. A Cartesian chart is a chart with an x and y axes. In this chart we can draw different types of chart like e.g. a line chart, a smooth line chart, a bar chart or an area chart. In this example we are drawing three line charts.
Smartsite SXML | Copy Code |
---|---|
<se:cartesianchart x="10" y="90" width="600" height="360"> <se:wall walls="back"> <se:fill mode="gradient" color1="white" color2="#d8d4d0" gradientstyle="horizontal" gradientvariant="variant1" /> </se:wall> ... </se:cartesionchart> |
The fill element inside in the wall element allows you to create a background filling for the cartesian chart. The wall element has the attribute "walls" set to "back". For 2d charts, this is the only usable option. For 3d charts, you can set the background filling for each of the walls of the cartesion chart.
First line
The first line is a very simple line. It has only one color, green, and its width has been set to 2. This style is applied to all the datapoints in this line.
Smartsite SXML | Copy Code |
---|---|
<se:line yvalues="data1"> <se:datapoints> <se:border color="green" width="2" /> </se:datapoints> </se:line> |
Second line
The second line is a different type of Cartesian chart. Instead of a normal line, this chart is a smooth line as you can see by the element "smoothline". This element has three child element "datapoints". The first element "datapoints" has no attributes on it which means that it applies to all datapoints on the line. The second "datapoints" element only applies to the datapoint 2 of the line and the third element "datapoints" applies only to the fourth datapoint of the line.
Smartsite SXML | Copy Code |
---|---|
<se:smoothline yvalues="data2"> <se:datapoints> <se:border color="blue" width="5" /> <se:marker shape="star" width="20" height="20"> <se:fill color1="#ffff00" /> </se:marker> <se:datalabel verticalalign="top" arrowlength="50"> <se:fill mode="color" color1="white" /> <se:line color="yellow" width="4" /> </se:datalabel> </se:datapoints> <se:datapoints match="2"> <se:datalabel> <se:line color="red" pattern="dot" /> </se:datalabel> </se:datapoints> <se:datapoints match="4"> <se:datalabel verticalalign="bottom" arrowlength="70" shape="rectangle" format="<value> points!"> <se:line color="black" startcap="diamondanchor" endcap="round" /> <se:fill color1="springgreen" /> </se:datalabel> </se:datapoints> </se:smoothline> |
The first "datapoints" has a blue border set to width 5. You easily spot it in the chart. The marker element defines a star shaped marker of 20x20 pixels which is applied to all datapoints on the blue line and a datalabel is defined for each datapoint on this line as well. The datalabels are placed 50px above the datapoint and are connected to the datapoint by a yellow line with width 4.
The second "datapoints" redefines the color of the line that connects the datapoint to the datalabel. It defines a red dotted line instead of a yellow line. It is important to note that all other properties are inherited from the first "datapoints" element. The second "datapoints" element only overrides those settings from the first "datapoints" element that are redefined. Settings that are not redefined remain the same. Note that even the line width (which is set to 4 in the first "datapoints" element) is inherited by the second "datapoints" element, even though the line is redefined. This is because the attribute "width" is not defined on the second "datapoints" element.
The third "datapoints" element redefines the datalabel. It positions the datalabel 70px below the datapoint, draws a black line to it instead of a yellow line and fills it with a green color. Again, all other properties are inherited from the first "datapoints" element.
Third line
The third line demonstrates some other features of the line chart. The first "datapoints" element is again the global "datapoints" that contains the markup that is applied to all datapoints on this line. It defines a rectangular yellow marker of 20x20 pixels. The second, third, fourth and fifth "datapoints" element redefine the shape and color of the marker. Note that the width and height are inherited from the first "datapoints" element. The last "datapoints" element uses the same shape as defined in the first "datapoints" element but only redefines the filling to be a gradient from red yellow.
Smartsite SXML | Copy Code |
---|---|
<se:line yvalues="data3"> <se:datapoints> <se:marker shape="bar" width="20" height="20"> <se:fill color1="#ffff00" /> </se:marker> </se:datapoints> <se:datapoints match="2"> <se:marker shape="pyramid"> <se:fill color1="#a0ffa0" /> </se:marker> </se:datapoints> <se:datapoints match="3"> <se:marker shape="cylinder"> <se:fill color1="#ffa0a0" /> </se:marker> </se:datapoints> <se:datapoints match="4"> <se:marker shape="diagonalcross"> <se:fill color1="#a0a0ff" /> </se:marker> </se:datapoints> <se:datapoints match="5"> <se:marker shape="cross"> <se:fill color1="#a0ffff" /> </se:marker> </se:datapoints> <se:datapoints match="6"> <se:marker shape="invertedpyramid"> <se:fill color1="#ffa0ff" /> </se:marker> </se:datapoints> <se:datapoints match="7"> <se:marker> <se:fill mode="gradient" color1="red" color2="#ffff00" /> </se:marker> </se:datapoints> </se:line> |
Complete listing
This is the complete listing of the code:
Smartsite SXML | Copy Code |
---|---|
<se:xmldatatable save="mydata" resulttype="datatable"> <se:row> <se:col name="PageviewsPerDay" datatype="integer">2345</se:col> <se:col name="VisitorsPerDay" datatype="integer">688</se:col> <se:col name="JustAnotherLine" datatype="integer">1000</se:col> </se:row> <se:row> <se:col>3210</se:col> <se:col>853</se:col> <se:col>2000</se:col> </se:row> <se:row> <se:col>3365</se:col> <se:col>870</se:col> <se:col>1300</se:col> </se:row> <se:row> <se:col>3526</se:col> <se:col>923</se:col> <se:col>2300</se:col> </se:row> <se:row> <se:col>3476</se:col> <se:col>901</se:col> <se:col>1600</se:col> </se:row> <se:row> <se:col>3677</se:col> <se:col>1700</se:col> <se:col>2600</se:col> </se:row> <se:row> <se:col>3746</se:col> <se:col>1015</se:col> <se:col>1900</se:col> </se:row> </se:xmldatatable> <se:chart> <se:parameters> <se:parameter name="dataseries"> <se:series id="data1" inputdata="mydata" datacolumn="PageviewsPerDay" name="Pageviews per day" /> <se:series id="data2" inputdata="mydata" datacolumn="JustAnotherLine" name="Just another line" /> <se:series id="data3" inputdata="mydata" datacolumn="VisitorsPerDay" name="Visitors per day" /> </se:parameter> <se:parameter name="layout"> <se:chartcanvas fileformat="png" width="640" height="480" mode3d="false"> <se:fill mode="gradient" color1="white" color2="#e0e0e0" gradientstyle="horizontal" gradientvariant="variant1" /> <se:cartesianchart x="10" y="90" width="600" height="360"> <se:wall walls="back"> <se:fill mode="gradient" color1="white" color2="#d8d4d0" gradientstyle="horizontal" gradientvariant="variant1" /> </se:wall> <se:line yvalues="data1"> <se:datapoints> <se:border color="green" width="2" /> </se:datapoints> </se:line> <se:smoothline yvalues="data2"> <se:datapoints> <se:marker shape="star" width="20" height="20"> <se:fill color1="#ffff00" /> </se:marker> <se:border color="blue" width="5" /> <se:datalabel verticalalign="top" arrowlength="50"> <se:fill mode="color" color1="white" /> <se:line color="yellow" width="4" /> </se:datalabel> </se:datapoints> <se:datapoints match="2"> <se:datalabel> <se:line color="red" pattern="dot" /> </se:datalabel> </se:datapoints> <se:datapoints match="4"> <se:datalabel verticalalign="bottom" arrowlength="70" shape="rectangle" format="<value> points!"> <se:line color="black" startcap="diamondanchor" endcap="round" /> <se:fill color1="springgreen" /> </se:datalabel> </se:datapoints> </se:smoothline> <se:line yvalues="data3"> <se:datapoints> <se:marker shape="bar" width="20" height="20"> <se:fill color1="#ffff00" /> </se:marker> </se:datapoints> <se:datapoints match="2"> <se:marker shape="pyramid"> <se:fill color1="#a0ffa0" /> </se:marker> </se:datapoints> <se:datapoints match="3"> <se:marker shape="cylinder"> <se:fill color1="#ffa0a0" /> </se:marker> </se:datapoints> <se:datapoints match="4"> <se:marker shape="diagonalcross"> <se:fill color1="#a0a0ff" /> </se:marker> </se:datapoints> <se:datapoints match="5"> <se:marker shape="cross"> <se:fill color1="#a0ffff" /> </se:marker> </se:datapoints> <se:datapoints match="6"> <se:marker shape="invertedpyramid"> <se:fill color1="#ffa0ff" /> </se:marker> </se:datapoints> <se:datapoints match="7"> <se:marker> <se:fill mode="gradient" color1="red" color2="#ffff00" /> </se:marker> </se:datapoints> </se:line> </se:cartesianchart> </se:chartcanvas> </se:parameter> </se:parameters> </se:chart> |
Smartsite SXML | Copy Code |
---|---|
Pie chart example
This example will show you how to create the pie chart below using the Chart macro.
The dataseries
First, we need some data to draw a chart with, this is done with the XmlDataTable macro. You can read the code for that macro in the full example at the end of this article. Once we have the data, we need to bind it to the Chart macro by using the parameter "dataseries". This parameter allows us to bind multiple series to the chart.
Smartsite SXML | Copy Code |
---|---|
<se:parameter name="dataseries"> <se:series id="calories" inputdata="mydata" datacolumn="Calories" name="Kilocalories per product" /> <se:series id="products" inputdata="mydata" datacolumn="Products" /> <se:series id="exploded" inputdata="mydata" datacolumn="Exploded" /> </se:parameter> |
In this example we have three series, one for each pie chart. The data for each pie is stored in a column in a datatable.
The canvas
Next we define the canvas on which the chart is drawn using the chartcanvas element. The canvas represents the bitmap we are generating and it allows us to set several different options related to the bitmap. There are some obvious parameters like the width, height and fileformat of the bitmap that is generated. The mode3d parameter has been set to true which means that we will see 3d pie charts. Text is rendered in antialias mode for smooth text. The bitmap has two borders, an inner border and a outer border.
Smartsite SXML | Copy Code |
---|---|
<se:parameter name="layout"> <se:chartcanvas fileformat="png" width="800" height="600" mode3d="true" textrenderingmode="antialias"> <se:fill mode="gradient" color1="white" color2="#e0e0e0" gradientstyle="horizontal" gradientvariant="variant1" /> <se:outerborder width="5" color="#e0e0e0" /> <se:innerborder width="5" color="#f0f0f0" /> ... </se:chartcanvas> </se:parameter> |
The legends
This example has three different legends defined. Each legend shown in the chart can have a different markup and location. The first two legends only have a different header text and location. The third legend has two columns and uses a dotted line to separate the datapoints in the legend.
Smartsite SXML | Copy Code |
---|---|
<se:legend id="firstlegend" x="720" y="20" anchor="bottomleft"> <se:header text="First Legend"> <se:font style="bold" /> </se:header> </se:legend> <se:legend id="secondlegend" x="720" y="220" anchor="bottomleft"> <se:header text="Second Legend"> <se:font style="bold" /> </se:header> </se:legend> <se:legend id="thirdlegend" x="720" y="420" anchor="bottomleft" maxcols="2"> <se:header text="Third Legend"> <se:font style="bold" /> </se:header> <se:horizontalline width="1" pattern="dash" /> <se:verticalline width="1" pattern="dash" /> </se:legend> |
The first pie
In the first chart is the pie chart in the upper left corner. Inside this pie chart the elements "projection", "lighting" and "pie" are defined. The element "projection" defines under which angle you look at the pie chart. This element allows you to perform 3d transformations to the pie chart. The second element defines how the lighting on the 3d pie is done. The element "pie" defines the pie with exploded pieces. The pie has a total angle of 270 degrees.
Smartsite SXML | Copy Code |
---|---|
<se:piechart x="20" y="20" width="250" height="250"> <se:projection predefined="perspectivetilted" /> <se:lighting predefined="northernlights" /> <se:pie values="calories" exploded="exploded" labels="products" totalangle="270" beginangle="15" style="pie" labelmode="center"> <se:serieslegend ref="firstlegend" mode="datapoints" format="<value> kilocalories in a <label>" /> <se:datapoints> <se:datalabel /> </se:datapoints> <se:datapoints match="1"> <se:fill color1="red" /> </se:datapoints> <se:datapoints match="2"> <se:fill color1="yellow" /> </se:datapoints> <se:datapoints match="3"> <se:fill color1="green" /> </se:datapoints> <se:datapoints match="4"> <se:fill color1="cyan" /> </se:datapoints> <se:datapoints match="5"> <se:fill color1="blue" /> </se:datapoints> <se:datapoints match="6"> <se:fill color1="purple" /> </se:datapoints> </se:pie> </se:piechart> |
The element "serieslegend" defines that the datapoints from this pie chart should be listed in the legend with the id "firstlegend". The datapoints define the colors for each datapoint of the pie.
Second pie
The second pie is the pie chart in the upper right corner. Its projection is slightly different from the first pie because it is rotated and elevated compared to the first pie. Its lighting has been set to "metalliclustre". The pie is defined as a "smoothedgepie" which shows because the pie has rounded corners compared to the first pie chart. The labelmode "rim" means that there is a line between the pie part and its datalabel.
Smartsite SXML | Copy Code |
---|---|
<se:piechart x="320" y="0" width="250" height="250"> <se:projection predefined="perspective" rotation="0" viewerrotation="30" elevation="-30" /> <se:lighting predefined="metalliclustre" /> <se:pie values="calories" labels="products" totalangle="270" beginangle="15" style="smoothedgepie" labelmode="rim" pieedge="100"> <se:serieslegend ref="secondlegend" mode="datapoints" format="<value> kcal per <label>" /> <se:datapoints> <se:datalabel /> </se:datapoints> <se:datapoints match="1"> <se:fill color1="red" /> </se:datapoints> <se:datapoints match="2"> <se:fill color1="yellow" /> </se:datapoints> <se:datapoints match="3"> <se:fill color1="green" /> </se:datapoints> <se:datapoints match="4"> <se:fill color1="cyan" /> </se:datapoints> <se:datapoints match="5"> <se:fill color1="blue" /> </se:datapoints> <se:datapoints match="6"> <se:fill color1="purple" /> </se:datapoints> </se:pie> </se:piechart> |
Third pie
The third pie is in fact a donut. This is achieved by setting the innter radius to 20 pixels. The clockwise attribute defines that the pie parts are in the reverse order compared to the other two pie charts. The labelmode "spider" result in a line consisting the two line segments from the pie part to the label.
Smartsite SXML | Copy Code |
---|---|
<se:piechart x="160" y="280" width="250" height="250"> <se:projection predefined="perspectiverotated" /> <se:lighting predefined="softtopright" /> <se:pie values="calories" totalangle="270" beginangle="15" style="torus" labelmode="spider" innerradius="20" clockwise="true"> <se:serieslegend ref="ThirdLegend" mode="datapoints" format="<value> kcal for each <label>" /> <se:datapoints> <se:datalabel /> </se:datapoints> <se:datapoints match="1"> <se:fill color1="red" /> </se:datapoints> <se:datapoints match="2"> <se:fill color1="yellow" /> </se:datapoints> <se:datapoints match="3"> <se:fill color1="green" /> </se:datapoints> <se:datapoints match="4"> <se:fill color1="cyan" /> </se:datapoints> <se:datapoints match="5"> <se:fill color1="blue" /> </se:datapoints> <se:datapoints match="6"> <se:fill color1="purple" /> </se:datapoints> </se:pie> </se:piechart> |
Complete listing
This is the complete listing of the code:
Smartsite SXML | Copy Code |
---|---|
<se:xmldatatable save="mydata" resulttype="datatable"> <se:row> <se:col name="Calories" datatype="integer">2345</se:col> <se:col name="Products" datatype="string">Hamburger</se:col> <se:col name="Exploded" datatype="float">0</se:col> </se:row> <se:row> <se:col>3210</se:col> <se:col>Sandwich</se:col> <se:col>1</se:col> </se:row> <se:row> <se:col>870</se:col> <se:col>Cookie</se:col> <se:col>2</se:col> </se:row> <se:row> <se:col>923</se:col> <se:col>Candybar</se:col> <se:col>3</se:col> </se:row> <se:row> <se:col>301</se:col> <se:col>Apple</se:col> <se:col>4</se:col> </se:row> <se:row> <se:col>367</se:col> <se:col>Banana</se:col> <se:col>5</se:col> </se:row> </se:xmldatatable> <se:chart> <se:parameters> <se:parameter name="dataseries"> <se:series id="calories" inputdata="mydata" datacolumn="Calories" name="Kilocalories per product" /> <se:series id="products" inputdata="mydata" datacolumn="Products" /> <se:series id="exploded" inputdata="mydata" datacolumn="Exploded" /> </se:parameter> <se:parameter name="layout"> <se:chartcanvas fileformat="png" width="800" height="600" mode3d="true" textrenderingmode="antialias"> <se:fill mode="gradient" color1="white" color2="#e0e0e0" gradientstyle="horizontal" gradientvariant="variant1" /> <se:outerborder width="5" color="#e0e0e0" /> <se:innerborder width="5" color="#f0f0f0" /> <se:legend id="firstlegend" x="720" y="20" anchor="bottomleft"> <se:header text="First Legend"> <se:font style="bold" /> </se:header> </se:legend> <se:legend id="secondlegend" x="720" y="220" anchor="bottomleft"> <se:header text="Second Legend"> <se:font style="bold" /> </se:header> </se:legend> <se:legend id="thirdlegend" x="720" y="420" anchor="bottomleft" maxcols="2"> <se:header text="Third Legend"> <se:font style="bold" /> </se:header> <se:horizontalline width="1" pattern="dash" /> <se:verticalline width="1" pattern="dash" /> </se:legend> <se:piechart x="20" y="20" width="250" height="250"> <se:projection predefined="perspectivetilted" /> <se:lighting predefined="northernlights" /> <se:pie values="calories" exploded="exploded" labels="products" totalangle="270" beginangle="15" style="pie" labelmode="center"> <se:serieslegend ref="firstlegend" mode="datapoints" format="<value> kilocalories in a <label>" /> <se:datapoints> <se:datalabel /> </se:datapoints> <se:datapoints match="1"> <se:fill color1="red" /> </se:datapoints> <se:datapoints match="2"> <se:fill color1="yellow" /> </se:datapoints> <se:datapoints match="3"> <se:fill color1="green" /> </se:datapoints> <se:datapoints match="4"> <se:fill color1="cyan" /> </se:datapoints> <se:datapoints match="5"> <se:fill color1="blue" /> </se:datapoints> <se:datapoints match="6"> <se:fill color1="purple" /> </se:datapoints> </se:pie> </se:piechart> <se:piechart x="320" y="0" width="250" height="250"> <se:projection predefined="perspective" rotation="0" viewerrotation="30" elevation="-30" /> <se:lighting predefined="metalliclustre" /> <se:pie values="calories" labels="products" totalangle="270" beginangle="15" style="smoothedgepie" labelmode="rim" pieedge="100"> <se:serieslegend ref="secondlegend" mode="datapoints" format="<value> kcal per <label>" /> <se:datapoints> <se:datalabel /> </se:datapoints> <se:datapoints match="1"> <se:fill color1="red" /> </se:datapoints> <se:datapoints match="2"> <se:fill color1="yellow" /> </se:datapoints> <se:datapoints match="3"> <se:fill color1="green" /> </se:datapoints> <se:datapoints match="4"> <se:fill color1="cyan" /> </se:datapoints> <se:datapoints match="5"> <se:fill color1="blue" /> </se:datapoints> <se:datapoints match="6"> <se:fill color1="purple" /> </se:datapoints> </se:pie> </se:piechart> <se:piechart x="160" y="280" width="250" height="250"> <se:projection predefined="perspectiverotated" /> <se:lighting predefined="softtopright" /> <se:pie values="calories" totalangle="270" beginangle="15" style="torus" labelmode="spider" innerradius="20" clockwise="true"> <se:serieslegend ref="ThirdLegend" mode="datapoints" format="<value> kcal for each <label>" /> <se:datapoints> <se:datalabel /> </se:datapoints> <se:datapoints match="1"> <se:fill color1="red" /> </se:datapoints> <se:datapoints match="2"> <se:fill color1="yellow" /> </se:datapoints> <se:datapoints match="3"> <se:fill color1="green" /> </se:datapoints> <se:datapoints match="4"> <se:fill color1="cyan" /> </se:datapoints> <se:datapoints match="5"> <se:fill color1="blue" /> </se:datapoints> <se:datapoints match="6"> <se:fill color1="purple" /> </se:datapoints> </se:pie> </se:piechart> </se:chartcanvas> </se:parameter> </se:parameters> </se:chart> |
Smartsite SXML | Copy Code |
---|---|
See Also
-
Line chart example
Article on how to build a line chart. -
Pie chart example
Article on how to build a pie chart.
-
Macro
- AIM Macro
- AIMScan Macro
- Application Macro
- Binary Macro
- Buffer Macro
- Cache Macro
- CacheFile Macro
- Calendar Macro
- CmsUpdate Macro
- Code Macro
- DigiDLogin Macro
- Dir Macro
- DoWhile Macro
- Embed Macro
- EmbedPreview Macro
- EmbedUri Macro
- Expression Macro
- FacetedSearchPrepareInputData Macro
- FacetedSearchPrepareInputData20 Macro
- FacetedSearchQueryBuilder Macro
- FacetedSearchQueryBuilder20 Macro
- FeedReader Macro
- Filter Macro
- FilterByHierarchy Macro
- For Macro
- Format Macro
- GoogleWebmasterTools Macro
- Hidden Macro
- HtmlPage Macro
- If Macro
- Image Macro
- ImageFromHtml Macro
- ImageProperties Macro
- Impersonate Macro
- ItemComments Macro
- ItemData Macro
- Join Macro
- Json Macro
- LegacyForm Macro
- Link Macro
- Locale Macro
- Login Macro
- Lorem Macro
- Metadata Macro
- NoAIM Macro
- PageTranslations Macro
- Paging Macro
- Parents Macro
- Payment Macro
- PdfDocument Macro
- PlaceHolder Macro
- Placeholder.Css Macro
- Placeholder.CssInclude Macro
- Placeholder.Javascript Macro
- Placeholder.JavascriptInclude Macro
- Placeholder.JavascriptOnLoad Macro
- PlaceholderData Macro
- Poll Macro
- References Macro
- Region Macro
- Rem Macro
- Replace Macro
- RSS Macro
- Scf Macro
- ScheduledJob Macro
- SearchEngineSitemap Macro
- SendMail Macro
- SetFileProperties Macro
- ShoppingCart Macro
- Siblings Macro
- SiteMap Macro
- Smartlet Macro
- SmartletBox Macro
- SmartletEditor Macro
- SmartletNoScript Macro
- SmartletPreset Macro
- SmiData Macro
- Sort Macro
- SqlQuery Macro
- StandardsCompliance Macro
- Statistics Macro
- Switch Macro
- SyncFileLinks Macro
- Tags Macro
- Text Macro
- Transform Macro
- TranslationContext Macro
- ViewHierarchy Macro
- ViewSource Macro
- WebAPI Macro
- Webservice Macro
- While Macro
- XHtmlPage Macro
- XLinks Macro
- XmlDataTable Macro
- XmlProcessor Macro
- Macro Parameters
- Macro Parameter Properties
- Vipers
- SXML Data Types
- Examples
- Tips & Tricks