Scatter chart with area of best fit

[David]

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.

[Tsvetomir]

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

[David]

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

[Tsvetomir]

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

[David]

Great, thanks for all your help Tsvetomir.

Kind regards,
David