Unable to draw ScatterSeries over the ScatterLineSeries

7 posts, 0 answers
  1. Auvo
    Auvo avatar
    34 posts
    Member since:
    Jul 2011

    Posted 08 Sep Link to this post

    Hi,

    When I'm adding both scatterLineSeries and ScatterSeries in the same graph, scatterseries are always behind the scatterLineSeries? How I get ScatterSeries over the Scatterlineseries?

     

    Regards,

    Auvo

     

     

  2. Stamo Gochev
    Admin
    Stamo Gochev avatar
    157 posts

    Posted 13 Sep Link to this post

    Hello Auvo,

    You can have a look at the following help article, which describes how to use the ZIndex property in order to display one series over the other:

    http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/appearance-and-styling/order-series-via-zindex-property

    Regards,
    Stamo Gochev
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Auvo
    Auvo avatar
    34 posts
    Member since:
    Jul 2011

    Posted 14 Sep in reply to Stamo Gochev Link to this post

    Hi,

     

    For some reason Zindex does not effect when using MarkersImages. The custom image is staying always behind the ScatterLines. See the example code and attached image

    <telerik:RadHtmlChart runat="server" ID="ScatterChart1" Width="800px">
        <PlotArea>
            <Series>
     
                <telerik:ScatterLineSeries ZIndex="1">
                    <SeriesItems>
                        <telerik:ScatterSeriesItem X="10" Y="15" />
                        <telerik:ScatterSeriesItem X="30" Y="50" />
                        <telerik:ScatterSeriesItem X="40" Y="10" />
                    </SeriesItems>
                </telerik:ScatterLineSeries>
     
                <telerik:ScatterSeries Name="Applicance 1" ZIndex="2">
                    <MarkersAppearance Visual="markersVisual" Size="30" />
                    <SeriesItems>
                        <telerik:ScatterSeriesItem X="15" Y="25" />
                        <telerik:ScatterSeriesItem X="79" Y="13" />
                        <telerik:ScatterSeriesItem X="77" Y="10" />
                        <telerik:ScatterSeriesItem X="74" Y="7" />
                    </SeriesItems>
                </telerik:ScatterSeries>
     
            </Series>
        </PlotArea>
    </telerik:RadHtmlChart>
    <script>
        function markersVisual(e) {
            var src = "./images/rotate.png";
            var image = new kendo.drawing.Image(src, e.rect);
            return image;
        }
    </script>

     

     

    Regards,

    Auvo

     

     

     

     

  5. Auvo
    Auvo avatar
    34 posts
    Member since:
    Jul 2011

    Posted 14 Sep in reply to Auvo Link to this post

    So question is, how can I set the Z order so that custom image is over the scatterline?

     

    Regards,

    Auvo

     

  6. Stamo Gochev
    Admin
    Stamo Gochev avatar
    157 posts

    Posted 16 Sep Link to this post

    Hello Auvo,

    Thanks for sending a runnable page, which helped me investigate the case.

    The marker image of the second scatter series is displayed "above" the first one, because this is the default rendering order in SVG:

    https://www.w3.org/TR/SVG/render.html#RenderingOrder

    This being said, if you want to display the second series "below" the first one, you need to switch their order in the Series collection (the series with marker images should be the first and not the second as it is currently).

    Regards,
    Stamo Gochev
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
  7. Auvo
    Auvo avatar
    34 posts
    Member since:
    Jul 2011

    Posted 22 Sep in reply to Stamo Gochev Link to this post

    Hello,

     

    I still have a problem. I cannot get image over the scatterline series. Can you provide me examle where you get this working.

     

    Here's the latest code where I test this case

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="Neocodex.ASPNET.WW_LADA.WebForm3" %>
     
    <!DOCTYPE html>
     
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
            <div>
                <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"></telerik:RadAjaxManager>
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server"></telerik:RadScriptManager>
     
     
                <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="800px">
                    <PlotArea>
                        <Series>
                            <telerik:ScatterSeries Name="Applicance 1" ZIndex="2">
                                 <MarkersAppearance Visual="markersVisual" Size="30" />                          
                                <SeriesItems>
                                    <telerik:ScatterSeriesItem X="13" Y="15" />
                                    <telerik:ScatterSeriesItem X="79" Y="13" />
                                    <telerik:ScatterSeriesItem X="77" Y="10" />
                                    <telerik:ScatterSeriesItem X="74" Y="7" />
                                </SeriesItems>
                            </telerik:ScatterSeries>
     
                            <telerik:ScatterLineSeries ZIndex="1">
                                <SeriesItems>
                                    <telerik:ScatterSeriesItem X="10" Y="10" />
                                    <telerik:ScatterSeriesItem X="15" Y="20" />
                                    <telerik:ScatterSeriesItem />
                                    <telerik:ScatterSeriesItem X="32" Y="40" />
                                    <telerik:ScatterSeriesItem X="43" Y="50" />
                                </SeriesItems>
                            </telerik:ScatterLineSeries>
                        </Series>
                    </PlotArea>
                </telerik:RadHtmlChart>
     
                <script>
                    function markersVisual(e) {
                        var src = "./images/rotate.png";
                        var image = new kendo.drawing.Image(src, e.rect);
     
                        return image;
                    }
                </script>
     
            </div>
        </form>
    </body>
    </html>

    Regards,

    Auvo

  8. Stamo Gochev
    Admin
    Stamo Gochev avatar
    157 posts

    Posted 27 Sep Link to this post

    Hi Auvo,

    You need to set the z-index property of the visual as well, e.g.:

    <script>
            function markersVisual(e) {
                var src = "./images/rotate.png";
                var image = new kendo.drawing.Image(src, e.rect);
                image.options.zIndex = 2;
                return image;
            }
    </script>
    Setting the ZIndex property of the series is not enough, when using a custom visual. We will consider adding this as a built-in functionality if there isn't a collision with existing configurations.

    Regards,
    Stamo Gochev
    Telerik by Progress
    Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017