Hi All,
I am attempting to code a RadCartesianChart Bar series with two linear axes - similar to a scatter plot where there would be an X and Y coordinate, but instead of scatter points, I'd use a bar series; is anyone familiar with doing this?
In a nutshell I want to have time as the x axis - so I can plot a couple of data points where they would fall at any time from 0 to max, instead of having a Categorical axis where increment on the axis represents on category/value . I want them to be plotted freely on this axis, and at times overlap. (see attached radchartview-series-barseries - mine)
The y-axis would be a linear (dependent? ) axis as well, allowing me to plot my data point against a scale of kilo Joules 0 to the max.
Right now I am using C# WPF and just painting the points on a canvas and I had to paint grid lines and calculate the squares/scaling lines - very tedious. And telerik has some great pan, zoom and data point summary info on item click capabilities.
Please help
Many thanks
Kevin
7 Answers, 1 is accepted
The RadChartView suite doesn't support scatter bars series. However, there is a feature request to implement such visualization.
Currently, it is possible to acheive similar visualization using ScatterPointSeries with a custom PointTemplate. You can calculate the size of the element in the template using the Conversion API of the chart. I've prepared a small example showing this approach. I hope it helps.
Regards,
Martin Ivanov
Progress Telerik
Rank 1
Firstly, thank you sincerely for taking the time to answer my post. My apologies for taking 6 months to reply.
The example code you provided worked excellently! It made tracking the data points much more efficient than if I was drawing squares onto a canvas. Being able to use Telerik's API library to hover over data points/rectangles was really cool as well.
That being said, The grid currently performs like the picture attached (left side) whereby the top/upper of plotted rectangle (its "high position" or Y coordinate) is lining up to the Y-axis major axis line, however its thickness or vertical width is only half or a third of the actual major axis line - whereas I'd like to see if it can take up the whole space between major axis points. See Problem_2_plot.png, the rectangles to the left is what it is doing, the bigger rectangles to the right is what I envision it should do.
Would this be something I modify in any of the following?
ScatterBarVisual.xaml <Rectangle Height="20">
MainWindow.xaml Public class PlotInfo > double High
or
ScatterBarVisual.xaml.cs Public void UpdateVisualHeight double highPosition or var length
~I am aware that this may be tricky since in order to have two linear or numerical axes, we originally converted a Scatter Point Series into a Scatter Bar visual graph, thus to manipulate the scatter point's thickness/width to fit the axis scale would be different from its original purpose of being drawn as a X,Y coordinate 'dot' in line with the correct value on the linear/dependent Y axis, not considering its height or thickness as it relates to the Major Axis lines/increments.
- - - - - -
Xaml code snippet:
<telerik:LinearAxis/>
</telerik:RadCartesianChart.VerticalAxis>
<telerik:RadCartesianChart.HorizontalAxis>
<telerik:LinearAxis/>
</telerik:RadCartesianChart.HorizontalAxis>
<telerik:ScatterPointSeries YValueBinding="Y" XValueBinding="High" ItemsSource="{Binding}">
<telerik:ScatterPointSeries.PointTemplate>
<DataTemplate>
<local:ScatterBarVisual HighValue="{Binding DataItem.High}" LowValue="{Binding DataItem.Low}" Chart="{Binding RelativeSource={RelativeSource AncestorType=telerik:RadCartesianChart}}"/>
- - - - -
I thank you once again and I hope to hear from you soon
Sincerely,
Kevin
Rank 1
Hi Martin,
Thank you sincerely for your response. My apologies for the delayed reply. Your solution worked excellently!
There is a part 2 that I am attempting to write a detailed reply on now with some code snippets but the Telerik forums aren't letting me post it and they need to review it.
Meanwhile, I have taken a snapshot of the text I wrote and attached it here (PictureOfMessagetoMartinAtTelerik.png) please let me know what you think about the second problem.
Thanks again
Kindly,
Kevin
I am glad to hear that the solution helped. And thank you for the report. It seems that something wasn't right back when you created the original post because now I can see it.
To achieve your requirement you will also need to manually calculate and set the Height of the Rectangle in the ScatterBarVisual UserControl. I've updated my last project to show this approach. I also improved the size calculation logic because it was wrong. I hope this helps.
Regards,
Martin Ivanov
Progress Telerik
Rank 1
Hello Martin,
I understand now and will look into the updated code snippet to manually calculate the height of the rectangle in ScatterBarVisual.
-Will let you know how it goes once I get it working!
Thanks again sincerely for your help, Martin
Have a great week
Kev
Rank 1
Good morning Martin,
The update with manual calculations and setting the height of the rectangles in ScatterBarVisual worked perfectly. :) After adjusting the major step increment of the grid in the xaml, to see what was being drawn at scale, I then had more control over how I position the shapes by being able to add the XLow, XHigh, YStart as well as YStop to my constructor. The result was much cleaner, my coordinates lined up with what was calculated and the user had a better visual aesthetic.
Thanks sincerely again for all your help
Wish you all the best for the rest of the year!
Regards
Kev
*Made sure I responded within a year this time ;)
Great to know this helped. All the best to you too for this year.
Regards,
Martin Ivanov
Progress Telerik