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

shading a scatterline chart

5 Answers 59 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Justin
Top achievements
Rank 1
Justin asked on 11 Apr 2012, 05:12 AM
I am trying to shade from the x axis to the scatter line.  Is there a way to do this using the scatterline chart?

5 Answers, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 12 Apr 2012, 01:51 PM
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!
0
David
Top achievements
Rank 1
Iron
Veteran
answered on 24 Oct 2019, 07:37 AM

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.

0
Tsvetomir
Telerik team
answered on 29 Oct 2019, 07:02 AM

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.
0
David
Top achievements
Rank 1
Iron
Veteran
answered on 29 Oct 2019, 07:28 AM

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

0
Tsvetomir
Telerik team
answered on 30 Oct 2019, 12:09 PM

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.
Tags
Charts
Asked by
Justin
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
David
Top achievements
Rank 1
Iron
Veteran
Tsvetomir
Telerik team
Share this question
or