FusionWidgets v3 Documentation

Spark Charts > Spark Column > Simple Example

Here, we'll create a simple spark column chart to show the monthly revenue of a fictional company for one year.

The XML data for the chart would look as under:

<chart palette='2' caption='Revenue' subcaption='12 months' numberPrefix='$' highColor='00CC33' lowColor='CC0000'>

         <dataset>

            <set value='783000' />

            <set value='201000' />

            <set value='515000' />

            <set value='115900' />

            <set value='388000' />

            <set value='433000' />

            <set value='910000' />

            <set value='198000' />

            <set value='183300' />

            <set value='162000' />

            <set value='159400' />

            <set value='185000' />

         </dataset>

    </chart>

In the above XML, we're:

Created the <chart> element, which is the root element of each chart.
Specified the caption & sub-caption, palette number, number prefix. We've also asked the chart to color the highest and lowest month columns using different colors. You can specify a lot more properties for the <chart> element, which have been discussed in next sections.
Thereafter, we've added the <dataset> element to contain data. Each spark column chart XML can have only <dataset> element, under which individual data points can be specified using <set value='23400' />.

When you now view the chart, you'll get something as under:

Next, we'll see how to configure the various aspects of this chart.