I figured out the reversal, however the chart needed to plot downward and not left to right.
After trying to plot using the example below, the lines did not plot right. They were jagged and the graph did not plot any of the points in order.
One of my coworkers made the observation that the Silverlight charts always run left to right - for some reason it even happened when I "flipped" the chart in the way I previously tried (described below). However - the actual PLOTTING had remained the same.
So, by going into the control template, I was able to translate the actual plotting area for the line to actually flow downward.
Went ahead and posted the explanation here.
*******************************
Wanted to reverse a Line Chart in Silverlight. All I could find were solutions using C#, and I am not the C-sharpest (I am more C-dull) so I decided to play around with the styles and options in the Linear Chart that is in the Silverlight 5 toolkit. (Have not tested it in Silverlight 4).
I looked at the code for the chart and couldn't figure out why it all had to be in C#, the elements themselves could use RenderTransform to change their orientation.
Started with the basic control, Layout Root. Added a Canvas for my new chart. I do include the entire list of xmlns definitions at the top. It helps me remember what to use, and kept getting frustrated with seeing a solution, but not what I needed to refer to so that it would WORK for me. I am still at the basic level when it comes to coding.
Make sure that you have the System.Windows.Controls.DataVisualization.Toolkit.dll in your References folder, or this won't work.
You can download the most current Silverlight Toolkit here.
Ok, from this point on - I am only showing the main code used in the actual line graph. That top part is LONG. Started with the basic line chart, and I did separate out the Axis Titles, this way if they need to be rotated I just rotate the TextBlock without affecting the entire axis.
Then added the LineSeries (these are notes for me, and I know I would forget this part too - so, have to make sure that I keep track of this chart item as well)
I didn't want to create the points for this entry in the code behind, so I used the answer to this post and just defined the points in the XAML for now.
I also went ahead and finished defining the minimum and maximum for both of the axes - for the X-Axis, I gave an Interval of 2 so more lines would show.
Below is the finished code and a screenshot of the chart itself - right now it is the basic, default chart without any styling.
Since the code has become rather long (for me to keep copying and making it readable) I will just show the individual elements of the chart as I change them.
First, I reversed the actual Axis Labels on the Y axis - this has not changed the line as the preview shows. I added the RenderTransform Code to the elements - this is why I separated the Title of the Axis using <chartingToolkit:LinearAxis.Title> and a TextBlock. Since it automatically rotates with the axis, I can rotate it back to where it should be.
For the Labels, they will be upside down once you reverse the ScaleY of the axis, but by using the <chartingToolkit:LinearAxis.AxisLabelStyle> I can transform them back to the orientation they need to be.
Now, I just need to reverse the line on this chart - and it will display like I want it too - the zero at the top left hand corner and going DOWN as values change.
Reversing the LineSeries is SUPER easy - all I did was add
<toolkit:LineSeries.RenderTransform>
<CompositeTransform ScaleY="-1" />
</toolkit:LineSeries.RenderTransform>
Now the line is reversed with the Y axis - and I have the chart the way I wanted it - the Y axis reversed with 0 on the top.
And there it is - a reversed chart where I didn't fry my brain on C# (it did fry a bit on the XAML since I had to play around with it and came up with a lot of deformed charts).
I've uploaded the file for you to play with/use.
No comments:
Post a Comment