Chart with ZIndex rendering issues

[Helen]

When the ZIndex property arrived (2015 Q1 release?) it caused my chart to render incorrectly as shown in image "1_2015_Q1_&_Q2_Default_ZIndexes". My chart plots both before and after values of a set of history data (databound from the server side).

To fix the rendered output (to that prior to the 2015 Q1 release), I manually set the ZIndex of each series so that the datapoint and line of the same series are on top. This is shown in image "2_2015_Q1_ZIndexes_Set".

This was fine (not ideal but it worked) until 2015 Q2 arrived (and has not been corrected in 2015 Q2 SP1 either). Image "3_2015_Q2_Manual_ZIndexes" shows the issue when hovering on a series ​below another- the series datapoint below doesn't show through the series datapoint on top any longer. Leaving the ZIndexes to default fixes this, but makes the chart render like in image "1_2015_Q1_&_Q2_Default_ZIndexes". This is a minor issue.

However, things get worse, for charts with missing values. This chart's series have MissingValues = HtmlChart.MissingValuesBehavior.Gap and manual ZIndexes set. If there are gaps in the plotted data, I receive a JavaScript error every time the chart is refreshed as shown in image "4_2015_Q2_ZIndexesSet_JS_Error". If I close the error popup and click a series in the legend, the chart renders until it is refreshed again. The JavaScript error does not appear if the plotted data is complete though.

Therefore can you please assist me to either of the following workarounds until the two bug fixes can be applied:

1. Go back to allowing default ZIndexes, but fix the chart rendering to be like in image "2_2015_Q1_ZIndexes_Set", where ZIndexes are set.

2. Avoid the JavaScript error for manually set ZIndexes and MissingValues = HtmlChart.MissingValuesBehavior.Gap somehow.

Thanks

Thanks

[Danail Vasilev]

Hello Helen,

It seems that there is an issue with the chart when the zIndex of series is set and there are nullable values. I have logged the issue in our feedback portal here (http://feedback.telerik.com/Project/108/Feedback/Details/166080), so that you can monitor, comment and vote on it. For the time being you can use the workaround below:
ASPX:

<telerik:RadHtmlChart runat="server" ID="LineChart" Width="800" Height="500" Transitions="true">
    <PlotArea>
        <Series>
            <telerik:LineSeries Name="Week 15" ZIndex="0">
                <SeriesItems>
                    <telerik:CategorySeriesItem Y="15" />
                    <telerik:CategorySeriesItem />
                    <telerik:CategorySeriesItem Y="71" />
                    <telerik:CategorySeriesItem Y="93" />
                    <telerik:CategorySeriesItem Y="43" />
                    <telerik:CategorySeriesItem Y="23" />
                </SeriesItems>
            </telerik:LineSeries>
        </Series>
    </PlotArea>
</telerik:RadHtmlChart>
<script>
    kendo.dataviz.LineChart.fn.animationPoints = function () {
        var series = this.seriesOptions;
        var points = [];
        var seriesPoints;
        var pointsIdx, idx;
        for (idx = 0; idx < series.length; idx++) {
            if (series[idx].markers.visible) {
                seriesPoints = this.seriesPoints[idx];
                for (pointsIdx = 0; pointsIdx < seriesPoints.length; pointsIdx++) {
                    if (seriesPoints[pointsIdx] != null) {
                        points.push(seriesPoints[pointsIdx].marker);
                    }
                }
            }
        }
        return points.concat(this._segments);
    }
</script>

As for the other issues, could you please try to reproduce them with the above code and then provide us with the modification, so that we can reproduce them and provide solutions if possible?

I have also updated your Telerik points for reporting this issue to us.

Regards,
Danail Vasilev
Telerik

[Helen]

Thanks Danail

That resolves the JavaScript error that I was experiencing. The only modification I made was wrapping your scripts in an if statement so I could put it in one place in the Master Page, rather than on every page it's required.

if (typeof kendo !== "undefined") {...}

 

That solves my main issue. Going back to my minor point about the formatting, are the following issues due to a bug(s) or no longer supported / modified functionality?

I modified your code (as shown below) to show additional series which overlap and the attached pictures show the issues:

1. When setting manual ZIndexes, the background of the datapoints is white and not transparent so points behind cannot show through when hovered over,
2. When using default ZIndexes, the datapoints for last series added to the chart is visible over others, while the line for the first series added to the chart is for some reason visible over all others, and not the line for the last series - like what happens with the datapoints. This is also how charts rendered prior to 2015 Q1,
3. Independent of ZIndex setting, when hovering over a series in the legend, why does the line of that series not come to the top, above others? This also was part of the functionality prior to 2015 Q1, which I am disappointed to see now missing.

<telerik:RadHtmlChart runat="server" ID="LineChart" Width="800" Height="500" Transitions="true">
        <PlotArea>
            <Series>
                <telerik:LineSeries Name="Week 15" ZIndex="1">
                    <SeriesItems>
                        <telerik:CategorySeriesItem Y="15" />
                        <telerik:CategorySeriesItem />
                        <telerik:CategorySeriesItem Y="71" />
                        <telerik:CategorySeriesItem Y="93" />
                        <telerik:CategorySeriesItem Y="43" />
                        <telerik:CategorySeriesItem Y="23" />
                    </SeriesItems>
                </telerik:LineSeries>
                <telerik:LineSeries Name="Week 16" ZIndex="2">
                    <SeriesItems>
                        <telerik:CategorySeriesItem Y="15" />
                        <telerik:CategorySeriesItem />
                        <telerik:CategorySeriesItem Y="71" />
                        <telerik:CategorySeriesItem Y="71" />
                        <telerik:CategorySeriesItem Y="43" />
                        <telerik:CategorySeriesItem Y="23" />
                    </SeriesItems>
                </telerik:LineSeries>
                <telerik:LineSeries Name="Week 17" ZIndex="3">
                    <SeriesItems>
                        <telerik:CategorySeriesItem Y="15" />
                        <telerik:CategorySeriesItem />
                        <telerik:CategorySeriesItem Y="71" />
                        <telerik:CategorySeriesItem Y="71" />
                        <telerik:CategorySeriesItem Y="43" />
                        <telerik:CategorySeriesItem Y="23" />
                    </SeriesItems>
                </telerik:LineSeries>
            </Series>
        </PlotArea>
    </telerik:RadHtmlChart>
    <script type="text/javascript">
        kendo.dataviz.LineChart.fn.animationPoints = function () {
            var series = this.seriesOptions;
            var points = [];
            var seriesPoints;
            var pointsIdx, idx;
            for (idx = 0; idx < series.length; idx++) {
                if (series[idx].markers.visible) {
                    seriesPoints = this.seriesPoints[idx];
                    for (pointsIdx = 0; pointsIdx < seriesPoints.length; pointsIdx++) {
                        if (seriesPoints[pointsIdx] != null) {
                            points.push(seriesPoints[pointsIdx].marker);
                        }
                    }
                }
            }
            return points.concat(this._segments);
        }
    </script>

 

Thanks

[Danail Vasilev]

Hi Helen,

I have made a test with an older version of the controls and the lines are not hovered for the overlapping series as well. If you want such a behavior, however, I would suggest that you use our feedback portal, in order to log your ideas about the control

As for the inconsistent behavior of points highlighting when zIndex is / is not set I have logged such an issue in our feedback portal here - http://feedback.telerik.com/Project/108/Feedback/Details/166394, so that you can monitor, comment and raise its priority by voting on it.

As small token of gratitude for helping us improve the quality of our controls I have updated your Telerik points..

Regards,
Danail Vasilev
Telerik