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 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.
< 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!
5 comments:
What do you do about the Y Axis scrolling off the screen?
@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
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
Thank You. that < charting:LinearAxis Orientation="Y" ShowGridLines="False" /> and ExtendRangeToOrigin="True" were what I was looking for and could not find anywhere else.
Create line series chart in .NET
Post a Comment