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

Scatter chart with area of best fit

4 Answers 27 Views
Chart
This is a migrated thread and some comments may be shown as answers.
David
Top achievements
Rank 1
Iron
Veteran
David asked on 28 Oct 2019, 02:08 AM

Hi,

I am trying to add an area of best fit to a standard scatter plot: I have one set of data points, and two equations for lines of best fit. The desired result is a scatter plot of the data points with a shaded area between the two lines of best fit.

I understand that it is currently not possible to mix categorical and XY charts (https://www.telerik.com/forums/using-area-and-scatter-chart-types-in-one-chart). I have tried drawing the desired area on the scatter chart as per https://docs.telerik.com/kendo-ui/controls/charts/how-to/appearance/draw-on-scatter-plots, however this results in the area being superimposed on the chart surface and prevents user interaction with the data points (tool-tips etc.) so is not an acceptable solution.

Is there any other way to achieve the desired result? Please see attached for a simplified example of what I'm trying to achieve.

4 Answers, 1 is accepted

Sort by
0
Tsvetomir
Telerik team
answered on 30 Oct 2019, 12:06 PM

Hi David, 

Thank you for the provided screenshot example. 

In general, the Kendo Area Chart and the Scatter Chart depend on different categorial axes. Therefore, the direct integration between the two would not possible. What I can recommend is to draw on the surface of the chart with the help of the Drawing API.

In the example that you have provided, the rectangle element is drawn on top of the chart surface, consuming all events, including the click and hover (needed for the tooltip). In order for the scatter points to be clickable, you would have to draw the elements on the chart's background visual. 

Here is an example:

        render: function(e) {
            var chart = e.sender;
            var xAxis = chart.getAxis("xAxis");
            var yAxis = chart.getAxis("yAxis");
            var xSlot = xAxis.slot(80, -20);
            var ySlot = yAxis.slot(-20, 80);

            var rect = new geom.Rect([
              // Origin X, Y
              xSlot.origin.x, ySlot.origin.y
            ], [
              // Width, height
              xSlot.width(), ySlot.height()
            ]);

            var path = draw.Path.fromRect(rect, {
              stroke: null,
              fill: gradient
            });
          
          var pane = chart.findPaneByIndex(0);
          pane.chartsVisual.insert(0, path);

            //chart.surface.draw(path);
        }

More information on the findPaneByIndex() method could be found here:

https://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart/methods/findpanebyindex

Check out the following Dojo sample which demonstrates the suggestion above:

https://dojo.telerik.com/EmiDOHex

I hope you find this helpful.

 

Best regards,
Tsvetomir
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
David
Top achievements
Rank 1
Iron
Veteran
answered on 31 Oct 2019, 01:56 AM

Thanks Tsvetomir,

While this is a useful workaround it will take quite some time to implement correctly in our current solution. Ideally Kendo would eventually implement area 'scatter' support, such as 'scatterArea', and 'scatterAreaRange', like the existing 'scatterLine'.

I noticed that this was mentioned in a previous feature request (https://feedback.telerik.com/kendo-jquery-ui/1358477-area-range-chart-series) marked as completed but never implemented. Is there any intention to implement scatter area support? Should I submit a new feature request?

Kind regards,

David

0
Tsvetomir
Telerik team
answered on 31 Oct 2019, 11:03 AM

Hi David,

Based on the provided feature request, I would like to say that the rangeArea chart has been introduced. Indeed, this is a functionality that would not be suitable for your scenario.

What I would recommend is that you submit another request in the Feedback portal. The more voted and popular an item is, the higher the chance of it being implemented. Here is a short link, for your convenience:

https://feedback.telerik.com/kendo-jquery-ui

 

Best regards,
Tsvetomir
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
David
Top achievements
Rank 1
Iron
Veteran
answered on 01 Nov 2019, 01:25 AM

Great, thanks for all your help Tsvetomir.

Kind regards,
David

Tags
Chart
Asked by
David
Top achievements
Rank 1
Iron
Veteran
Answers by
Tsvetomir
Telerik team
David
Top achievements
Rank 1
Iron
Veteran
Share this question
or