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

Change YAxis Step on client-side

1 Answer 171 Views

Chart (HTML5)

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

Mattia asked on 25 Mar 2016, 04:36 PM

Is it possible to change the yAxis step client-side?

something like

chart._chartObject.options.yAxis.step = 2;

just after obtain the data.

function setDataFromService(sender, args) {

//Get the returned data

var newData = args.get_content().d;

if (newData.length > 0) {

chart._chartObject.options.title.text = newData[0].Name;

//step Y AXIS

chart._chartObject.options.yAxis.step = 2;

}

else

chart._chartObject.options.title.text = "";

//Set the new datasource to the RadHtmlChart

chart.set_dataSource(newData);

//Repaint the RadHtmlChart

chart.repaint();

//Avoid raising the OnClientResponseEnded client-side event

//avoid setting the received data as content for the RadXmlHttpPanel

args.set_cancel(true);

if (currentLoadingPanel != null) {

currentLoadingPanel.hide(currentControl);

}

Chart

<telerik:RadHtmlChart runat="server" ID="DetailChart" ClientIDMode="Static" Transitions="false" RenderAs="Canvas" >

<ChartTitle>

<Appearance Position="Top">

<TextStyle FontSize="9px" Margin="0" Padding="0"/>

</Appearance>

</ChartTitle>

<ClientEvents OnLoad="onChartLoad" />

<Legend>

<Appearance Position="Bottom" Visible="true"></Appearance>

</Legend>

<Pan Enabled="true" />

<Zoom Enabled="true">

<MouseWheel Enabled="true" Lock="Y" />

<Selection Enabled="true" ModifierKey="Shift" />

</Zoom>

<PlotArea>

<Series>

<telerik:ScatterLineSeries DataFieldY="YValue1" DataFieldX="XValue" MissingValues="Zero">

<MarkersAppearance Visible="false" />

<Appearance Overlay-Gradient="None">

<FillStyle BackgroundColor="#e65100" />

</Appearance>

<LineAppearance Width="1px" />

<LabelsAppearance Visible="false"></LabelsAppearance>

<TooltipsAppearance Visible="False"></TooltipsAppearance>

</telerik:ScatterLineSeries>

<telerik:ScatterLineSeries DataFieldY="YValue2" DataFieldX="XValue" MissingValues="Zero">

<MarkersAppearance Visible="false" />

<Appearance Overlay-Gradient="None">

<FillStyle BackgroundColor="#000066" />

</Appearance>

<LineAppearance Width="1px" />

<LabelsAppearance Visible="false"></LabelsAppearance>

<TooltipsAppearance Visible="False"></TooltipsAppearance>

</telerik:ScatterLineSeries>

</Series>

<XAxis BaseUnit="Auto" Type="Date" MaxDateGroups="8">

<MajorGridLines Visible="false" />

<MinorGridLines Visible="false" />

<LabelsAppearance DataFormatString="dd/MM HH:mm" Step="2">

<TextStyle FontSize="10px" />

</LabelsAppearance>

</XAxis>

<YAxis >

<MajorGridLines Visible="true" Width="1" Color="#efefef" />

<MinorGridLines Visible="false" />

<LabelsAppearance >

<TextStyle FontSize="10px" />

</LabelsAppearance>

</YAxis>

</PlotArea>

</telerik:RadHtmlChart>

<telerik:RadXmlHttpPanel runat="server" ID="XmlHttpPanelWCF" WcfRequestMethod="POST" ClientIDMode="AutoID"

OnClientResponseEnding="setDataFromService " WcfServicePath="HomeWebService.asmx" OnClientResponseError="OnClientResponseError"

WcfServiceMethod="GetHomeChartData">

</telerik:RadXmlHttpPanel>

Thank you

1 Answer, 1 is accepted

answered on 30 Mar 2016, 12:20 PM

Hello Stefania,

With the client-side object you should use majorUnit property instead of step. You can refer to this Kedno article—http://docs.telerik.com/kendo-ui/api/javascript/dataviz/ui/chart#configuration-yAxis.majorUnit.

chart._chartObject.options.yAxis.majorUnit = 2;

Also, I suggest you using the get_kendoWidget method to get the client-side object—http://docs.telerik.com/devtools/aspnet-ajax/controls/htmlchart/client-side-programming/overview#get-client-side-object-reference.

Regards,
Ianko
Telerik

Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.