Here, we'll create a simple spark win/loss chart to show the performance of Yankees this season.

 
XML Data
Our fictional season's data can be converted into XML as under:
<chart caption='Yankees' subcaption='Current season' >
   <dataset>
      <set value='W' />
      <set value='W' />
      <set value='D' />
      <set value='L' />
      <set value='W' />
      <set value='W' />
      <set value='L' />
      <set value='L' />
      <set value='W' />
      <set value='L' />
      <set value='W' scoreless='1'/>
      <set value='L' />
      <set value='W' />
      <set value='W' />
   </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. 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 win/loss chart XML can have only <dataset> element, under which individual data points can be specified using <set value='W' />.
  • Set value can be of 3 types:
    • W - Indicating a win
    • L - Indicating a loss
    • D - Indicating a draw

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.