Introduction

The FreeSilverlightChart Control provides charting solution in a silverlight environment. It uses XAML and C# to display charts on the silverlight platform.

The FreeSilverlightChart Control supports the following chart types:

The Chart Model

The FreeSilverlightChart Control uses a model to access the data for displaying a chart. The specific model class must be of type FreeSilverlight.ChartModel.

The chart values are draw using YValues 2D array property by the chart modal. Each element in this array must contain an array of doubles. These values in this array represent a series values with in a group. For XYLine and Scatter plots XValues 2D array property is also required.

For Pie chart and Funnel chart if the YValues array length is more than one, multiple charts are shown. Each array element in the YValues is used to draw one chart.

For circular and semiCircular gauge charts only one series in the YValues is used. Multiple charts are displayed if size of YValues array is greater than one. Each array element in the YValues is used to draw one chart.

Rendering Chart in a Canvas

The FreeSilverlightChart Control can be easily drawn on any canvas once a ChartModel is specified and a particular chart type is choosen. The following is a code snipped showing its usage:

        <UserControl 
        x:Class="ChartUsage.Page"
        xmlns="http://schemas.microsoft.com/client/2007"
        xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
        xmlns:app="clr-namespace:AdvanceUsage">
          <Canvas Width="680" Height="400" x:Name="parentCanvas"/>
        </UserControl>
      
      public void Page_Loaded(object o, EventArgs e)
      {
        // Load the chart model my data
        ChartModel model = _loadChartModel();
        
        // create the chart and set the prefered properties
        Chart chart = Chart.CreateChart(Chart.ChartType.PIE, model);
        chart.IsPerspective = true;
        chart.LegendPosition = location;
        chart.AnimationDuration = 1.5;
        chart.YMajorGridCount = yMajorCount;
        chart.Format = myformat;
        
        // set the bounds of the chart control 
        chart.SetBounds(new Rect(0, 0, parentCanvas.Width, parentCanvas.Height));
        
        // add the custom component
        parentCanvas.Children.Add(chart);
        
        // setup the event handler
        chart.ChartClicked += new ChartEventHandler(ChartClicked);
        // now draw it
        chart.Draw();
      }
      

Labeling

The FreeSilverlightChart Control provides flexibility for labeling of chart data. The YValues and group labels are the two types of labels used in a chart.

YValue Labeling

The YValues(y axis labels for verticalBar, area, line etc. and x axis labels for horizontalBar) are labeled based on the YMajorGridLineCount. The maximum and minimum values are displayed for the YValues even if the YMajorGridLineCount=0.

Group Labeling

The group labels(x axis labels for verticalBar, area, line etc. and y axis labels for horizontalBar) are controlled by GroupLabels in the chart model. Please note that the size of the groupLabels may not match the size of the YValues. If the groupLabels size is larger than the YValues size, the chart will display blank after the missing values. This is sometimes useful to chart incomplete data. The groupLabels array may also contain blanks or nulls so that label for an index is ignored. If the groupLabels size is less than the YValues, the axis is divided into portions equal to the size of groupLabels. This feature is useful for labeling large data set.

Label Formatting

The formatting of the values displayed as labels is controlled by the Format property. The default format is "$#,##0.00;($#,##0.00);0".

Grid Lines

The FreeSilverlightChart Control displays displays vertical and horizontal grid lines inside charts.

YValues Grid Lines

The grid line for YValues(y axis for verticalBar, area, line etc. and x axis for horizontalBar) are controlled by YMajorGridLineCount. The number of yValue labels displayed are also controlled by this attribute. The maximum and minimum values are displayed and then a value is displayed corresponding to each major grid line.

For gauge charts minor grid lines are displayed within a major grid section. YMinorGridLineCount attribute is used to control this feature.

X Grid Lines

The property XMajorGridLineCount attribute controls the number of vertical major grid lines displayed in the chart. The default value is -1, which implies that the vertical major grid lines are controlled by the groupLabels in the chart model.

Legend

The FreeSilverlightChart Control displays the series labels as a legend. The LegendPosition property of the chart component controls the display of the legend. The legend can be turned off by setting this attribute to "FreeSilverlightChart.Chart.LegendLocation.NONE". Please note that legend is never displayed for circular and semicircular gauge chart since these charts display only one series.

Perspective

The FreeSilverlightChart Control can be displayed in perspective(2.5D) or in 2D. The perspective is purely a visual representation and does not provide any additional detail from a chart in 2D. Please note that perspective flag does not have any effect on radar and gauge charts.

Animation

The FreeSilverlightChart Control provides support for animation during initial load. The animation is controlled by AnimationDuration property (in seconds). The default value is 1.5 seconds. Setting this attribute to 0 will turn off animation.

Please note that the animation should be used with caution, it should not be used at the expense of usability. For e.g. if a page is periodically updating charts using a timer, animation will effect the usability of the chart.

Skinning

The FreeSilverlightChart Control provides support for skinning of the chart elements. The chart elements are rendered by using XAML returned by a class that implements FreeSilverlightChart.LookAndFeelinterface. A Look and Feel can be registered with the Control using Chart.RegisterLookAndFeel static method.

The chart chart control comes with two LookAndFeel implementations : 1)GradientLookAndFeel and 2)TransparentLookAndFeel. A new LookAndFeel can be created by either extending one of these two classes or implementing FreeSilverlightChart.LookAndFeel interface. The GradientLookAndFeel is the default LookAndFeel that is registered with the Chart control.

Tooltips

The FreeSilverlightChart Control displays tooltips in response to the user moving the mouse on the chart data. The chart control may display multiple tooltips for area and radarArea charts if the user moves the mouse inside an area that is enclosed by multiple series. For line chart and area charts the tooltips display interpolated values. The tooltips display can be turned off by setting DisplayToolTip property to "false".

DrillDown

The FreeSilverlightChart control triggers chartClicked event when the user drills clicks on the chart data. The event handler must have the following signature: ChartClicked(object sender, ChartEventArgs e)

chart.ChartClicked += new ChartEventHandler(ChartClicked);
....
    private void ChartClicked(object sender, ChartEventArgs e)
    {
      // Handle the click based on the data that was clicked
    }