This is a migrated thread and some comments may be shown as answers.

RadCartesianChart Bar Series - two linear axes (plot a bar series like a scatter plot)

7 Answers 42 Views
ChartView
This is a migrated thread and some comments may be shown as answers.
Kevin
Top achievements
Rank 1
Kevin asked on 21 Aug 2018, 09:47 PM

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

Sort by
0
Accepted
Martin Ivanov
Telerik team
answered on 24 Aug 2018, 11:39 AM
Hello Kevin,

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Kevin
Top achievements
Rank 1
answered on 08 Jan 2019, 11:28 PM
Hi Martin

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
0
Kevin
Top achievements
Rank 1
answered on 08 Jan 2019, 11:47 PM

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

0
Accepted
Martin Ivanov
Telerik team
answered on 11 Jan 2019, 01:48 PM
Hello 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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Kevin
Top achievements
Rank 1
answered on 14 Jan 2019, 03:20 PM

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

0
Kevin
Top achievements
Rank 1
answered on 16 Jan 2019, 04:22 PM

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 ;)

0
Martin Ivanov
Telerik team
answered on 18 Jan 2019, 12:08 PM
Hi Kev,

Great to know this helped. All the best to you too for this year.

Regards,
Martin Ivanov
Progress Telerik
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
ChartView
Asked by
Kevin
Top achievements
Rank 1
Answers by
Martin Ivanov
Telerik team
Kevin
Top achievements
Rank 1
Share this question
or