0
votes

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

Js Error

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

2

2 Answers

0
votes

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.

0
votes

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