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
|
|---|---|