Scatter chart with area of best fit

5 posts, 0 answers
  1. David
    David avatar
    5 posts
    Member since:
    Sep 2019

    Posted 27 Oct Link to this post

    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.

  2. Tsvetomir
    Admin
    Tsvetomir avatar
    385 posts

    Posted 30 Oct Link to this post

    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.
  3. David
    David avatar
    5 posts
    Member since:
    Sep 2019

    Posted 30 Oct in reply to Tsvetomir Link to this post

    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

  4. Tsvetomir
    Admin
    Tsvetomir avatar
    385 posts

    Posted 31 Oct Link to this post

    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.
  5. David
    David avatar
    5 posts
    Member since:
    Sep 2019

    Posted 31 Oct in reply to Tsvetomir Link to this post

    Great, thanks for all your help Tsvetomir.

    Kind regards,
    David

Back to Top