Histograms on X and Y Axis

[Taimoor]

Hello,

 

I have a ScatterPointSeries which contains multiple points and I want to display histograms on both x and y axis of my plot. the histograms should be synched with the scatter points.

I have used bar series with additional categorical axis (which is wrong) because linear axis of scatter points and categorical axis of histogram are not synchronized as shown in figure.

I have also tried to use ScatterPointSeries with point template as rectangle but it is also not giving me the desired result.

 

Please help me in this matter.

 

 

[Petar Marchev]

Hi Taimoor,

First I want to quickly try and explain the differences between the categorical and linear axes. The numerical axes have a notion of continuity and every value can be mapped to some position easily. Say that we have a linear axis with a range [0, 100], we can easily find where 67.8 would be positioned. We can even find the position of 200, even though it is not in the range. The numerical and datetime axes have this notion of ranges and a value can be located easily. The categorical axis, however, works in a completely different way. In general, the categories are thought to be distinct, unique, discrete entities. Categories can be Profit, Bolts, Will, 7.3, 2015/04/22, "gogo" and so on. The axis considers all categories equally important, so each category gets the same space allocated. Here, we cannot find the position of a category that is not in the categories set.

The problem in your case is that you have not found a way to sync the values and the categories. This is not possible in the general case. Because if you have a numerical range of [0, 10] you can easily position value 3.14, but you cannot easily create the categories of the categorical axis to ensure that there is a category at the same position. Surely, you can add 1000 categories and the 314th category will be positioned in the same spot. But hat if you wanted to show a category at position 2.78456? You can either insert a million categories or you can insert a hundred categories and work with approximations. I think that both cases are not a good option, but if you want, you can give them a try if you think they may get you the desired results.

I think the best way to go here is to use a scatter series and not mix a scatter with a categorical chart. We need to use some scatter series and give it a point template. The template needs to mimic a vertical thin bar. You can use a template like this one:

<DataTemplate x:Key="t1">
 <Canvas Width="1" Height="1">
  <Rectangle Width="1" Height="10000" Fill="Black" />

Now we have to clip the series so that the bottom of the bars appear to be at 0. We can find the position of 0 via the conversion api of the chart (ConvertDataToPoint methods of the chart). The little problem here is that you need to set the Clip of the series often - when the chart's size changes, when the series are rebound, when the axes change range, when you zoom in and so on. Anyway, I am sure that you will be able to solve this.

Let us know if you need further assistance.

Regards,
Petar Marchev
Telerik

 

 

[Taimoor]

Hi Peter,

Thank you so much for the suggestion. I have synched both categorical and linear axis.

However now I am facing another problem.

For linear axis, the barseries and scatterseries are synched perfectly but when I change my linear axis to log axis for scatterseries, the barseries goes out of sync. The reason for this is because the majorstep in categorical axis is 1. But for log axis its 0.1. So is there a way to change the majorstep of categorical axis as well?

I have attached the screenshots for the above mentioned scenerio 

Thank you

[Petar Marchev]

Hi Taimoor,

The categorical axis allows you to control the MajorTickInterval and LabelInterval. However, I do not think that using these will get you the desired result, simply because there is no categorical-logarithmic collaboration. I will again direct you to my previous suggestion to use a scatter series with a point template.

Regards,
Petar Marchev
Telerik

 

 

[Taimoor]

Hi Petar,

I have also used scatter series and in that approach, the Y axis histogram is not displaying correctly

Also when I zoom in, the bars are getting clipped and when I zoomed till the minimum zoom level, the plot does not display even a single bar. However when I zoom out, bars get restored.

 

Thank you

[Taimoor]

Hi Petar,

Using Scatterseries with point template to draw Y-Axis histogram, I am encountering following problem as shown in attached figure. Now the frequency is the X axis value and bin number is Y axis value, where width of the template should be frequency. The desired result should exactly be the inversion of filled area.

The point template that I used for this is:

                                 <DataTemplate>
                                    <Canvas Width="1" Height="1">
                                        <Rectangle Width="2000" Height="10" Fill="Blue" />
                                    </Canvas>
                                </DataTemplate>

​Thank you

[Petar Marchev]

Hi Taimoor,

Do you mean to say that the desired result would be achieved if you set Canvas.Left="-2000" to the Rectangle element?

Regards,
Petar Marchev
Telerik

 

 

[Taimoor]

Hi Petar,

Yes thank you so much. The desired result is achieved now. 

 

However I am still facing the other issue i.e.

when I zoom in, the bars are getting clipped and when I zoomed till the minimum zoom level, the plot does not display even a single bar. But when I zoom out, bars get restored.

 

Thank you

[Petar Marchev]

Hello Taimoor,

I created a small project in order to test and see what is happening. I was able to reproduce the bars that go missing. This is due to the virtualization mechanism of the chart.

The chart uses a simple virtualization mechanism where visuals are reused and only the needed elements (the ones that are in the view port) are handled. In your case, when you zoom in, the point (with size 1x1) is not in the view port anymore and the chart decides not to show it. You cannot override this mechanism or turn it off and this is why I think that you cannot really use the PointTemplate work-around. You could give the point template a larger size, say 1000000x1000000, but when the user zooms enough, the element will not be in the viewable area and the chart will again not show the bar (you can fight this by setting a MaxZoom of the chart).

However, I do not think that this is a good way to go. The provided PointTemplate is incompatible with zooming and I will suggest you take another approach. Use annotations.

You can use CartesianCustomLineAnnotations. You need to set the horizontal and vertical from and to. This way the chart will know that the element is in the visual area and it will be shown. I have attached a small project in order to demonstrate this. I hope this helps, let us know how it goes.

Regards,
Petar Marchev
Telerik

 

 

[Taimoor]

Dear Petar,

Thank you so much but this issue is bearable with me.

However there is another issue

That I put the "Width" of the Rectangle in Point template as '10'

But for small bins I am getting the gap length between bars. How can I remove the gap length here (for black histogram).

 

Thank you

[Petar Marchev]

Hello Taimoor,

I am unsure if I understand properly. In my last response I explained why a series with a PointTemplate will not work when you have a zoom behavior included. I suggested you use annotations that will appear as bars. You can set the horizontal start and end of the annotations in such a way that the bars will not have gaps between them. Let me know if I am missing something.

Regards,
Petar Marchev
Telerik

 

 

[Taimoor]

Hello Petar,

I am still using series with a point template. Is there anyway to remove the gap length between bars in this approach.

 

Thank you

[Petar Marchev]

Hi Taimoor,

The CategoricalAxis has a GapLength property, have you tried setting it to zero?

Regards,
Petar Marchev
Telerik

 

 

[Taimoor]

Hi Petar,

Yes, the categorical axis has the 'GapLength' property which removes the gap between bars when we set it to 0.

 

But is there any way to remove the gap between bars using scattarpointseries with point template (illustrated by the following code):

<telerik:ScatterPointSeries.PointTemplate>
    <DataTemplate>
        <Canvas Width="1" Height="1">
          <Rectangle Canvas.Bottom="-10000" Width="10" Height="10000" Fill="Blue" />
        </Canvas>
    </DataTemplate>
</telerik:ScatterPointSeries.PointTemplate>

[Petar Marchev]

Hi Taimoor,

Apologies for that, for a second there I forgot that you are using the scatter variation.

Unfortunately there is no easy way to get this done. Since you are using a PointTemplate, you need to specify the size of the point, so you need to handle this manually. However, this is not an easy task, because the size of the bar would depend on the value of the datapoint and the values of the adjacent datapoints and also depend on the size of the plot area.

I again will direct you to using marked zone annotations. When defining the from and to values, you can more easily specify values based on the adjacent data-items so that the bars do not have empty space between them.

Regards,
Petar Marchev
Telerik