RadHtmlChart - Telerik ASP.NET HtmlChart Zoom Not Working Via MouseWheel

Question

I am working on a RadHtmlChart using the Telerik controls.

Basically the zoom ability worked until i applied a styling fix to the x-axis ensure the labels stayed fixed at the bottom and would not enter the chart and overlay plots on the graph.

The style fix I am working is that I want to keep the x axis line at 0 and keep the values below the chart. This feature request is already logged by Telerik feedback portal: http://feedback.telerik.com/Project/108/Feedback/Details/54923-add-top-and-bottom-positions-for-axes-axes-labels-in-radhtmlchart

This is because some of the graph plots get covered by the x axis labels:

Telerik Work Around Suggestion: called on the ClientEvents OnLoad event

<script>
 function BottomXAxisLabels() {
     var chart = $find("<%=LinearityChart.ClientID%>").get_kendoWidget();
     var axis = $telerik.$.extend(true, {}, chart.options.xAxis);
     axis.line.visible = false;
     chart.setOptions({ xAxis: [{ labels: { visible: false }}, axis] });
     chart.options.yAxis.axisCrossingValues = [0, -99999999999];
     chart.redraw();
 }

RadHtmlChart is an ASP.NET wrapper of Kendo UI chart. This means that you can take advantage of some server-side features, but you can also use all of the client-side functionality of Kendo chart this is how i have edited the x-axis.

Chart Code:

<telerik:RadHtmlChart runat="server" ID="LinearityChart" Width="100%" Height="100%" CssClass="LinearityDiv pageBreak" ViewStateMode="Disabled">
   <ClientEvents OnLoad="chartLoad" />
   <Pan Enabled="true" />
   <Zoom Enabled="true">
       <MouseWheel Enabled="true" />
       <Selection Enabled="true" ModifierKey="Shift" />
   </Zoom>

Chart Plot Area

<PlotArea>
        <Appearance>
            <FillStyle BackgroundColor="Transparent"></FillStyle>
        </Appearance>

        <XAxis Color="Black" MajorTickType="Outside" MinorTickType="None" Reversed="false">
            <MinorGridLines Visible="false" />
            <TitleAppearance Text="<%$ Resources:Charting, BiasXAxisTitle %>" />
        </XAxis>

        <YAxis Color="Black" MajorTickType="Outside" Reversed="false">
            <MinorGridLines Visible="false" />
            <LabelsAppearance DataFormatString="{0}%" />
            <TitleAppearance Text="<%$ Resources:Charting, BiasYAxisTitle %>" />
        </YAxis>
        <Series>
            <telerik:ScatterSeries Name="<%$ Resources:Charting, BiasSExpRec %>">
                <Appearance FillStyle-BackgroundColor="SeaGreen" />
                <TooltipsAppearance DataFormatString="{0}, {1}%" />
                <LabelsAppearance Visible="false" />
            </telerik:ScatterSeries>
            <telerik:ScatterSeries Name="<%$ Resources:Charting, BiasSPeerRec %>" Visible="false">
                <Appearance FillStyle-BackgroundColor="DeepSkyBlue" />
                <TooltipsAppearance DataFormatString="{0}, {1}%" />
                <LabelsAppearance Visible="false" />
            </telerik:ScatterSeries>
            <telerik:ScatterSeries Name="<%$ Resources:Charting, BiasSExpPeer %>" Visible="false">
                <Appearance FillStyle-BackgroundColor="Orange" />
                <TooltipsAppearance DataFormatString="{0}, {1}%" />
                <LabelsAppearance Visible="false" />
            </telerik:ScatterSeries>
        </Series>
</PlotArea>

JavaScript OnChart Load Call

function ChartLoad(sender, args) {
                    if (typeof chart1 == "undefined") {
                        chart1 = sender.get_kendoWidget();

                        var chart = $find("<%=LinearityChart.ClientID%>").get_kendoWidget();
                        var axis = $telerik.$.extend(true, {}, chart.options.xAxis);
                        axis.line.visible = false;
                        chart.setOptions({
                            xAxis:
                                [{
                                    majorTicks: { size: 0, color: "black", width: 0 },
                                    labels: { visible: false },
                                    line: { width: 1, color: "black" }
                                }, axis]
                        });
                        chart.options.yAxis.axisCrossingValues = [0, -99999999999];
                        chart.redraw();

 }

I am getting this JavaScript error when I try and use the zoom:

uncaught TypeError: ***'Cannot set property 'min' of undefined'***

Location

ScriptResource.axd?d=WLmYcdOKb_LAUnVSHQHR_kB0hnE6StN3zr4wDRAuaXXTTm9SzIhvtoUXojqb1ZfsdSXLkneHGz4NiY5j6kVC8VaaTvGQ5mMSTqwnSkMTPNGJrAEoFl8D6RiyP_SwihtPCpHzwlN9-Gqda-jtSvQFnQ2&t=ffffffffcf2f22b2

Any help would be appreciated to help fix the zoom ability.

score 0 · Answer 1 · answered Jun 14 '16 at 12:37

0

Try setting the properties you tweak with JS with the markup. I suspect something may be going wrong within the setOptions call (perhaps one of those properties cannot be set dynamically after the widget initialization).

Here is an example:

                <XAxis Width="1" Color="Black" MajorTickType="None" MajorTickSize="0">
                    <LabelsAppearance Visible="false"></LabelsAppearance>
                </XAxis>
                <YAxis AxisCrossingValue="-99999999999"></YAxis>

Or, try removing some of the dynamic settings to see which one breaks the code.

answered Jun 14 '16 at 12:37

rdmptn

5,413
1
16
29

Thanks for help, you are correct to suspect it is the setOptions call that breaks the zoom. Telerik had suggested to use the setOptions to keep the x axis line at 0 and keep the values below the chart. This feature request is already logged in their feedback portal: http://feedback.telerik.com/Project/108/Feedback/Details/54923-add-top-and-bottom-positions-for-axes-axes-labels-in-radhtmlchart. However this breaks the zoom ability, i am unable to keep the x axis line at 0 with the markup – Ryan Gavin Jun 14 '16 at 13:32
That's just a workaround, ultimately. It probably can't handle all scenarios. My suggestion is to wait for the feature to be released by Telerik so you can use it. Vote on the feedback items and follow their progress. – rdmptn Jun 14 '16 at 14:38

score 0 · Answer 2 · answered Jun 16 '16 at 15:32

A similar issue has been logged in the Telerik feedback portal here - http://feedback.telerik.com/Project/108/Feedback/Details/181171 .

The issue has been fixed with the Q1 2016 SP1 release, so that you can try upgrading to the latest version.

I have also made a test to reproduce this issue with the runnable example from this feedback portal (feedback.telerik.com/Project/108/Feedback/Details/54923) but everything works properly on my side. You can watch the video test here - http://screencast.com/t/VXKFseenlSN5

RadHtmlChart - Telerik ASP.NET HtmlChart Zoom Not Working Via MouseWheel

2 Answers2