shading a scatterline chart

6 posts, 0 answers
  1. Justin
    Justin avatar
    3 posts
    Member since:
    Jun 2010

    Posted 11 Apr 2012 Link to this post

    I am trying to shade from the x axis to the scatter line.  Is there a way to do this using the scatterline chart?
  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2834 posts

    Posted 12 Apr 2012 Link to this post

    Hello,

    This sounds a lot like a combination between the scatter line and the area chart.

    Such "scatter area" chart is not supported right now, but there are no technical issues that stop us from implementing it. We'll consider it during our planning for the Q2 release.

    Thank you for bringing this up. As a token of gratitude for your involvement your Telerik points have been updated.

    Greetings,
    Tsvetomir Tsonev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. David
    David avatar
    21 posts
    Member since:
    Sep 2019

    Posted 24 Oct 2019 in reply to T. Tsonev Link to this post

    There still doesn't appear to be a scatter area chart. Is this going to be implemented?

    Use case: A scatter plot with shading to define the accepted / allowed area for data points.

  4. Tsvetomir
    Admin
    Tsvetomir avatar
    756 posts

    Posted 29 Oct 2019 Link to this post

    Hi David,

    The Kendo UI Chart widgets allow for having multiple axes at once. Therefore, you would be able to create a Scatter chart with a series of Area Chart which should represent the shady area.

    Therefore, the outcome of this approach would be similar to the following one:

    https://demos.telerik.com/kendo-ui/area-charts/multiple-axes

    And the multi-axis for the scatter chart:

    https://demos.telerik.com/kendo-ui/scatter-charts/multiple-axes

    I hope this helps.

     

    Kind 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
    21 posts
    Member since:
    Sep 2019

    Posted 29 Oct 2019 in reply to Tsvetomir Link to this post

    Hi Tsvetomir,

    I'm afraid that doesn't really demonstrate how to get a scatter plot and area on the same chart. The links you provided show how to plot multiple Scatter Chart only axes and multiple Area Chart only axes, but not a combination of the two. Are you able to provide an example?

    Kind regards,

    David

  6. Tsvetomir
    Admin
    Tsvetomir avatar
    756 posts

    Posted 30 Oct 2019 Link to this post

    Hi David,

    I have noticed that the current thread is a duplicate with the one below. It is recommended to stick to only one thread as this helps in keeping your history concise.

    In order to make the answer from the other thread transparent for our community, I am pasting the solution here:

    "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 "

     

    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.
Back to Top