XAML Sample

This topic will give you a description on how to create a chart with DateTime values.

 

To learn about how to create your first chart using a XAML file in Silverlight and WPF, refer the Quick Start section of this documentation.

 

Lets start by having a look at the data first. The table shows XValues as Date and YValues as Double.

 

XValues

YValues

1/1/2008

20

3/2/2008

14

4/18/2008

10

5/28/2008

12

7/4/2008

18

8/4/2008

9

9/2/2008

11

10/1/2008

19

11/2/2008

22

12/8/2008

18

Table 1: Data to create your first Chart with DateTime axis

 

Now according to data shown above, we shall create XAML.

 

 

<vc:Chart xmlns:vc="clr-namespace:Visifire.Charts;assembly=SLVisifire.Charts"

Width="400" Height="300" Theme="Theme2" Padding="8" BorderBrush="Gray" ScrollingEnabled="False">

     <vc:Chart.Titles>

          <vc:Title Text="Visifire Chart with DateTime Axis"/>

     </vc:Chart.Titles>

     <vc:Chart.AxesX>

          <vc:Axis IntervalType="Months" Interval="1" ValueFormatString="MMM/d/yyyy"/>

     </vc:Chart.AxesX>

     <vc:Chart.Series>

          <vc:DataSeries RenderAs="Column" XValueFormatString="MMM/d/yyyy">

               <vc:DataSeries.DataPoints>

                    <vc:DataPoint XValue="1/1/2008" YValue="20"/>

                    <vc:DataPoint XValue="3/2/2008" YValue="14"/>

                    <vc:DataPoint XValue="4/18/2008" YValue="10"/>

                    <vc:DataPoint XValue="5/28/2008" YValue="12"/>

                    <vc:DataPoint XValue="7/4/2008" YValue="18"/>

                    <vc:DataPoint XValue="8/4/2008" YValue="9"/>

                    <vc:DataPoint XValue="9/2/2008" YValue="11"/>

                    <vc:DataPoint XValue="10/1/2008" YValue="19"/>

                    <vc:DataPoint XValue="11/2/2008" YValue="22"/>

                    <vc:DataPoint XValue="12/8/2008" YValue="18"/>

               </vc:DataSeries.DataPoints>

          </vc:DataSeries>

     </vc:Chart.Series>

</vc:Chart>

 

 

In the above chart XAML, we have specified IntervalType property as Months in order to display a month view of AxisLabels with an Interval of 1. Also, the AxisLabels are formatted using ValueFormatString property. ValueFormatString property will format only the AxisX labels. So in order to format DataPoint labels and ToolTipText you have to set XValueFormaString property in DataSeries as shown above.

 

This is how the chart looks if you use this XAML in Silverlight.

 

 

 

See Also: Managed Code Sample