Cannot set all the Line Chart's categoryAxis.baseUnit with Javascript

[CHIHPEI]

Scenario:

I've got several Line Charts in my TabStrip,

and I set these Line Charts with same Class Name by .HtmlAttributes(new {@class = "MyClass"})

I'm trying to set these Charts categoryAxis.baseUnit with JavaScript.

Question:

I get all the Line Chart with ClassName

and used a for loop to get the KendoChart and set the categoryAxis.baseUnit.

There's no error poping out,

but there was only one chart been set,

the others remains the origin setting.

I'll leave my code below hope someone could give me some hint.

Code:

.cshtml line chart

//I only showed one of the Line Chart, incase the view gets messy
@(Html.Kendo().Chart(MyViewModel)
                .Name("Chart1")
                .Title("Displacement Time History")
                .Legend(legend => legend
                      .Position(ChartLegendPosition.Bottom)
                 )
                 .ChartArea(chartArea => chartArea
                      .Background("transparent")
                 )
                  .SeriesDefaults(seriesDefaults =>
                      seriesDefaults.Line().Style(ChartSeriesStyle.Smooth)
                 )
                 .Series(series => {
                      series.Line(model => model.ReadData).Name("Displacement").Markers(m => m.Visible(true));
                 })
                 .ValueAxis(axis => axis
                      .Numeric()//.Labels(labels => labels.Format("{0:n1}"))
                 )
                 .CategoryAxis(axis => axis
                      .Categories( m => m.ReadTime)
                      .Type(ChartCategoryAxisType.Date)
                      .BaseUnit(ChartAxisBaseUnit.Fit)
                      .Justify(true) 
                      .Labels(labels => labels.Rotation(-90).Step(10))
                      .Crosshair(c => c.Visible(true))
                      .MajorGridLines(c => c.Visible(false))
                      .AutoBaseUnitSteps(config => config.Seconds(10))
                 )
                 .Tooltip(tooltip => tooltip
                      .Visible(true) 
                      .Format("{0:n3}")
                 )
                 .HtmlAttributes(new {@class = "MyChartClassName"})  // Where I set the ClassName of Chart
   )

javascript

$( document ).ready(function() {
        
        var chartsEle = document.getElementsByClassName('MyChartClassName'); //Gets all the HtmlDocument by ClassName
        
        // for to loop through every Line Chart
        for(var i=0; i<chartsEle.length; i++){
            
            var chart = $('#'+chartsEle[0].id).data("kendoChart"); //gets the exact KendoChart with id 
            chart.options.categoryAxis.baseUnit  = "seconds";  // setting baseUnit
            chart.redraw();
        }
      
    });

[Mihaela]

Hi CHIHPEI,

I have reviewed the code snippets and noticed a typo in the for loop (pass the index to get a reference to each Chart):

$( document ).ready(function() {
        var chartsEle = document.getElementsByClassName('MyChartClassName'); //Gets all the HtmlDocument by ClassName
        
        // for to loop through every Line Chart
        for(var i=0; i<chartsEle.length; i++){
            
            var chart = $('#'+chartsEle[i].id).data("kendoChart"); //gets the exact KendoChart with id 
            chart.options.categoryAxis.baseUnit  = "seconds";  // setting baseUnit
            chart.redraw();
        }
});

REPL example: https://netcorerepl.telerik.com/mmPclHbd17sLgiLp57

Let me know if all charts are rendered properly at your end.

 

Regards, Mihaela Progress Telerik

[CHIHPEI]

Hi Mihaela,

What a dumb mistake that I made,

and I can't even find it...

thank you for spending time reviewing my code

CHIHPEI