CODEWITHSUNDEEP
kendo-uikendo-chart
Coppermill
Coppermill

Reputation: 6794

Changing the Step value from Javascript

I have the following Kendo.Chart in asp.net, and I need to change the Step value when the chart data is refreshed.

e.g.

.Step(8)

to

.Step(0)

How can I do this?

@(Html.Kendo().Chart<GenericDateTimeValueDataPoint>()
                              .Name("trendchart_" + location.LocationId)
                              .Legend(legend => legend.Visible(false))
                              .ChartArea(chartArea => chartArea.Background("transparent")
                                  .Height(276))
                              .AutoBind(false)
                              .DataSource(ds => ds.Read(read => read.Action("ProfileTrend", "Chart")
                                  .Data(@<text>function (){ var selectedTimespan = $('#duration option:selected').val(); var startDateTime = $('#startDateTimePicker').val(); var endDateTime = $('#endDateTimePicker').val() ; return { locationGuid: '@location.LocationId', timespan: selectedTimespan, startDateTime: startDateTime, endDateTime: endDateTime, timeZoneOffset: window.currentTimeZoneOffsetInHours }}</text>))
                                  .Events(ev => ev.RequestStart("viewModel.utilisationDataRequestStarted")
                                      .RequestEnd("uViewModel.utilisationDataLoaded")))
                              .SeriesDefaults(series => series.Column().Overlay(ChartBarSeriesOverlay.None))
                              .Series(series => series.Column(model => model.CollectedValue, categoryExpression: model => model.DateTimeFormattedString)
                                  .Gap(0.3)
                                  .Name("Valve Open")
                                  .Color(Lookups.GetColourAsHex(Colours.SilverGrey)))
                              .CategoryAxis(axis => axis.MajorGridLines(lines => lines.Visible(false))
                                  .Labels(labels => labels.Format("{0:d}").Step(8))
                                  .Categories()
                                  .Title(title => title.Text(DisplayText.Get("Time"))))
                              .ValueAxis(axis => axis.Numeric().Labels(labels => labels.Format("{0}%")).Line(line => line.Visible(true)).Min(0).Max(100).Title(title => title.Text(DisplayText.Get("Utilisation")))).Tooltip(tooltip => tooltip.Visible(true).Template("#=dataItem.DateTimeFormattedString#<br />#= kendo.format('{0:N2}',value) #%")))

Upvotes: 0

Views: 688

Answers (1)

Daniel Wermann
Daniel Wermann

Reputation: 38

You can add a callback to the dataBound event (which is fired every time the data is bound to your chart) and then on this callback you can change/set the step property. But you will need to call the refresh method form the kendo chart in order to have the changes applied.

The code would be similar to the following:

//Your code
.Events(ev => ev.RequestStart("viewModel.utilisationDataRequestStarted")
.RequestEnd("uViewModel.utilisationDataLoaded")))
.DataBound("onDataBound")))
//Your code

//Javascript
function onDataBound(arg) {
    var chart = $("ELEMENT_ID").getKendoChart();
    chart.options.axisDefaults.labels.step = 2;
    chart.refresh();
}

Hope it helps you.

Upvotes: 1

Related Questions