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.