Created by: venkata.guddanti
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: verticalBar cylinderBar
horizontalBar stackedVerticalBar stackedHorizontalBar pie area stackedArea line barLine areaLine barAreaLine XYLine scatterPlot radar radarArea funnel circularGauge semiCircularGauge.
You can download the original source code from here
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:
- A verticalBar chart uses a series of columns to compare values across groups. Groups are organized horizontally while values are displayed vertically in order to place more emphasis on comparing values and less emphasis on time.
- Similar to veriticalBar; howver in perspective mode, the bars are draws as cylinders.
- A horizontalBar chart uses a series of bars to compare values across groups. Groups are organized vertically while values are displayed horizontally in order to place more emphasis on comparing values and less emphasis on time.
- A stacked vertical chart is used to compare the contribution of each value to a total across a series.
- Simlar to stackedVerticalBar except that the series and the groups are flipped
- One of the most widely used chart types, pie charts show how proportions of data contribute to a whole.
- Area charts emphasize the degree of change over time, and also shows the relationship of parts to a whole.
- A stacked area chart is an area chart that uses two or more data series and can be used to compare the degree of change to a total across a series
- A line chart illustrates trends in data with the passing of time.
- A barLine chart shows the combination of vertical bar and line chart. Each value from a series is alternated from a bar to a line, with the first series value displayed as a bar.
- An XYLine chart illustrates trends in data with the passing of time. It diffentiates from a normal line chart by having the X Values dictate the display along the X Axis.
- A scatterPlot chart uses value points to represent data. This chart needs both values along X and Y axis.
- A radar chart is a circular graph on which data are displayed in terms of values and angles.It is a circular chart used primarily as a comparative tool.
- This is similar to a radar chart except for the fact that the area enclosed by a series is filled.
- A funnel charts show how proportions of data contribute to a whole. It is similar to a pie chart but displays as a funnel.
- A circularGuage displays data in a gauge. It has a pivot point, around which a value is rotated so that it can be displayed in relation to maximum and a minimum.
- Similar to a circularGauge except for the fact that the gauge is semiCircular in shape.
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:
// Load the chart model my data
ChartModel model =
// 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, Width, Height));
// add the custom component
// setup the event handler
chart.ChartClicked += new ChartEventHandler(ChartClicked);
// now draw it
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.
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.
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.
The formatting of the values displayed as labels is controlled by the Format property. The default format is "$#,##0.00;($#,##0.00);0".
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.
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.
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.
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.
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.
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".
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_