Saturday, July 17, 2010

Line Series Chart In SilverLight 4

During my development in silver light 4 I came across this problem when I have to show large amount of data using the charting control provided in the silver light 4 toolkit. The problem what that when you show small data then it will look nice and good looking , but when you need to display large data in the charting (Line series ) control then the values are overlapped and will not show properly in the x-Axes.
The problem was that I have to show the values against time in the line series chart. So the date time value is shown along the x-axes and the integer value is shown along y-Axes. Below is the main screen when I display the 96 record for the 4 days and you can see that the overlapping of the value on x-Axes , user can't read the value on the x-Axes. I have search heard on the google but can't find any thing regard the overlapping of the x-Axes values. So I decided to go with my own way and here I will give you one of the solution to this problem.

The solution to the problem is very simple which come to my mind,Just place the chart control in the scroll viewer control and then set the width of the chart control dynamically, depending on the number of days. I have set the 1440 for one day and if the number of days increases then multiple the 1440 with the number of days and set the width of the chart control.

Here is my xaml code which is used to define the axes. Here you can see that I have set the date time axes along the x-Axes , the orientation property and also the set the interval ,mean the difference between the two point on the x-Axes and also set the showGridLines property to true to show the grid line on the chart. You can see that I have also set the style of the date time axes and set the string format for the date to be displayed on x-Axes.

< charting:Chart.Axes>
< charting:DateTimeAxis Interval="2" IntervalType="Hours" Orientation="X" ShowGridLines="True" >
< charting:DateTimeAxis.AxisLabelStyle>
< Style TargetType="charting:DateTimeAxisLabel">
< Setter Property="StringFormat" Value="{}{0:dd/MM/yy HH:mm}"/>
< /Style>
< /charting:DateTimeAxis.AxisLabelStyle>
< /charting:DateTimeAxis>
< charting:LinearAxis Orientation="Y" ShowGridLines="True" />
< /charting:Chart.Axes>

Below is the line of code which is used to set the width of the chart control here you can see that I have multiple the 1440 value with the number of days by substructure the current date from the total days, by adding the counter value using addHours and then use the day + 1 to multiple it with 1440.

chrtChart.Width = 1440 * (((TimeSpan)DateTime.Now.AddHours(intCounter).Subtract(DateTime.Now)).Days + 1);
By doing this my problem of view large amount of data is solved .You can download the source code from here
All and any comments / bugs / suggestions are welcomed!


darren said...

What do you do about the Y Axis scrolling off the screen?

Asim Sajjad said...

@darren: you can see same technique to use it along the Y Axis as I have used it in the X Axis. I have used it along X Axis because I have large data on X Axies

Anonymous said...

i think what he means is your Y axis, which tells you the Y value of your points is not visible, since it inside of the scrollviewer

Anonymous said...

Thank You. that < charting:LinearAxis Orientation="Y" ShowGridLines="False" /> and ExtendRangeToOrigin="True" were what I was looking for and could not find anywhere else.

Anonymous said...

Create line series chart in .NET