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

Unable to draw ScatterSeries over the ScatterLineSeries

6 Answers 116 Views

Chart (HTML5)

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

6 Answers, 1 is accepted

answered on 14 Sep 2016, 12:38 PM

markesimagebehindthescatterline.png

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

answered on 16 Sep 2016, 01:21 PM

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.

answered on 22 Sep 2016, 08:04 AM

imagestillbehindtheline.png

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>

<html xmlns="http://www.w3.org/1999/xhtml">

<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

answered on 27 Sep 2016, 05:15 AM

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.