LineChart with BaseUnit milliseconds

[Michael]

Hi!

Is there a way to set the BaseUnit to Milliseconds.

I have to view a sine curve with max. 5Hz like this:

var oscillatorChartData = new kendo.data.ObservableArray(
        [{"T":"\/Date(1490195633551)\/","Val":0.48},{"T":"\/Date(1490195633571)\/","Val":1.45},{"T":"\/Date(1490195633591)\/","Val":2.34},{"T":"\/Date(1490195633611)\/","Val":3.07},{"T":"\/Date(1490195633631)\/","Val":3.61},{"T":"\/Date(1490195633651)\/","Val":3.93},{"T":"\/Date(1490195633671)\/","Val":3.99},{"T":"\/Date(1490195633691)\/","Val":3.81},{"T":"\/Date(1490195633711)\/","Val":3.39},{"T":"\/Date(1490195633731)\/","Val":2.75},{"T":"\/Date(1490195633751)\/","Val":1.94},{"T":"\/Date(1490195633771)\/","Val":1.01},{"T":"\/Date(1490195633791)\/","Val":0.02},{"T":"\/Date(1490195633811)\/","Val":-0.98},{"T":"\/Date(1490195633831)\/","Val":-1.91},{"T":"\/Date(1490195633851)\/","Val":-2.72},{"T":"\/Date(1490195633871)\/","Val":-3.37},{"T":"\/Date(1490195633891)\/","Val":-3.8},{"T":"\/Date(1490195633911)\/","Val":-3.99},{"T":"\/Date(1490195633931)\/","Val":-3.93},{"T":"\/Date(1490195633961)\/","Val":-3.63},{"T":"\/Date(1490195633971)\/","Val":-3.09},{"T":"\/Date(1490195633991)\/","Val":-2.36},{"T":"\/Date(1490195634011)\/","Val":-1.49},{"T":"\/Date(1490195634031)\/","Val":-0.52},{"T":"\/Date(1490195634051)\/","Val":0.48},{"T":"\/Date(1490195634071)\/","Val":1.46},{"T":"\/Date(1490195634091)\/","Val":2.34},{"T":"\/Date(1490195634111)\/","Val":3.07},{"T":"\/Date(1490195634131)\/","Val":3.61},{"T":"\/Date(1490195634151)\/","Val":3.93},{"T":"\/Date(1490195634171)\/","Val":3.99},{"T":"\/Date(1490195634191)\/","Val":3.81},{"T":"\/Date(1490195634211)\/","Val":3.39},{"T":"\/Date(1490195634241)\/","Val":2.75},{"T":"\/Date(1490195634251)\/","Val":1.94},{"T":"\/Date(1490195634271)\/","Val":1.01},{"T":"\/Date(1490195634291)\/","Val":0.01},{"T":"\/Date(1490195634311)\/","Val":-0.98},{"T":"\/Date(1490195634331)\/","Val":-1.91},{"T":"\/Date(1490195634361)\/","Val":-2.73},{"T":"\/Date(1490195634371)\/","Val":-3.37},{"T":"\/Date(1490195634401)\/","Val":-3.8},{"T":"\/Date(1490195634411)\/","Val":-3.99},{"T":"\/Date(1490195634431)\/","Val":-3.93},{"T":"\/Date(1490195634451)\/","Val":-3.63},{"T":"\/Date(1490195634471)\/","Val":-3.09},{"T":"\/Date(1490195634491)\/","Val":-2.36},{"T":"\/Date(1490195634511)\/","Val":-1.49},{"T":"\/Date(1490195634531)\/","Val":-0.52},{"T":"\/Date(1490195634551)\/","Val":0.49},{"T":"\/Date(1490195634571)\/","Val":1.46},{"T":"\/Date(1490195634601)\/","Val":2.34},{"T":"\/Date(1490195634611)\/","Val":3.07},{"T":"\/Date(1490195634631)\/","Val":3.62},{"T":"\/Date(1490195634651)\/","Val":3.93},{"T":"\/Date(1490195634681)\/","Val":3.99},{"T":"\/Date(1490195634691)\/","Val":3.81},{"T":"\/Date(1490195634711)\/","Val":3.38},{"T":"\/Date(1490195634731)\/","Val":2.75},{"T":"\/Date(1490195634751)\/","Val":1.94},{"T":"\/Date(1490195634771)\/","Val":1.01},{"T":"\/Date(1490195634791)\/","Val":0.01},{"T":"\/Date(1490195634811)\/","Val":-0.98},{"T":"\/Date(1490195634841)\/","Val":-1.92},{"T":"\/Date(1490195634851)\/","Val":-2.73},{"T":"\/Date(1490195634871)\/","Val":-3.37},{"T":"\/Date(1490195634891)\/","Val":-3.8},{"T":"\/Date(1490195634911)\/","Val":-3.99},{"T":"\/Date(1490195634941)\/","Val":-3.93},{"T":"\/Date(1490195634951)\/","Val":-3.62},{"T":"\/Date(1490195634981)\/","Val":-3.09},{"T":"\/Date(1490195634991)\/","Val":-2.36},{"T":"\/Date(1490195635011)\/","Val":-1.48},{"T":"\/Date(1490195635031)\/","Val":-0.51},{"T":"\/Date(1490195635051)\/","Val":0.49},{"T":"\/Date(1490195635081)\/","Val":1.47},{"T":"\/Date(1490195635091)\/","Val":2.35},{"T":"\/Date(1490195635111)\/","Val":3.08},{"T":"\/Date(1490195635131)\/","Val":3.61},{"T":"\/Date(1490195635151)\/","Val":3.93},{"T":"\/Date(1490195635171)\/","Val":3.99},{"T":"\/Date(1490195635191)\/","Val":3.81},{"T":"\/Date(1490195635211)\/","Val":3.38},{"T":"\/Date(1490195635231)\/","Val":2.74},{"T":"\/Date(1490195635251)\/","Val":1.94},{"T":"\/Date(1490195635271)\/","Val":1},{"T":"\/Date(1490195635291)\/","Val":0.01},{"T":"\/Date(1490195635311)\/","Val":-0.99},{"T":"\/Date(1490195635331)\/","Val":-1.92},{"T":"\/Date(1490195635351)\/","Val":-2.73},{"T":"\/Date(1490195635371)\/","Val":-3.37},{"T":"\/Date(1490195635391)\/","Val":-3.8},{"T":"\/Date(1490195635411)\/","Val":-3.99},{"T":"\/Date(1490195635431)\/","Val":-3.93},{"T":"\/Date(1490195635451)\/","Val":-3.62},{"T":"\/Date(1490195635471)\/","Val":-3.09},{"T":"\/Date(1490195635491)\/","Val":-2.36},{"T":"\/Date(1490195635511)\/","Val":-1.48},{"T":"\/Date(1490195635531)\/","Val":-0.51},{"T":"\/Date(1490195635551)\/","Val":0.49},{"T":"\/Date(1490195635571)\/","Val":1.46},{"T":"\/Date(1490195635591)\/","Val":2.35},{"T":"\/Date(1490195635611)\/","Val":3.08},{"T":"\/Date(1490195635631)\/","Val":3.62},{"T":"\/Date(1490195635651)\/","Val":3.93},{"T":"\/Date(1490195635671)\/","Val":3.99},{"T":"\/Date(1490195635691)\/","Val":3.81},{"T":"\/Date(1490195635711)\/","Val":3.38},{"T":"\/Date(1490195635731)\/","Val":2.74},{"T":"\/Date(1490195635751)\/","Val":1.93},{"T":"\/Date(1490195635771)\/","Val":1},{"T":"\/Date(1490195635791)\/","Val":0.01},{"T":"\/Date(1490195635811)\/","Val":-0.99},{"T":"\/Date(1490195635831)\/","Val":-1.93},{"T":"\/Date(1490195635851)\/","Val":-2.73},{"T":"\/Date(1490195635871)\/","Val":-3.37},{"T":"\/Date(1490195635891)\/","Val":-3.8},{"T":"\/Date(1490195635911)\/","Val":-3.99},{"T":"\/Date(1490195635931)\/","Val":-3.93},{"T":"\/Date(1490195635951)\/","Val":-3.62},{"T":"\/Date(1490195635971)\/","Val":-3.09},{"T":"\/Date(1490195635991)\/","Val":-2.36},{"T":"\/Date(1490195636011)\/","Val":-1.48},{"T":"\/Date(1490195636031)\/","Val":-0.5},{"T":"\/Date(1490195636051)\/","Val":0.5},{"T":"\/Date(1490195636071)\/","Val":1.47},{"T":"\/Date(1490195636091)\/","Val":2.35},{"T":"\/Date(1490195636111)\/","Val":3.08},{"T":"\/Date(1490195636131)\/","Val":3.62},{"T":"\/Date(1490195636151)\/","Val":3.93},{"T":"\/Date(1490195636171)\/","Val":3.99},{"T":"\/Date(1490195636191)\/","Val":3.81},{"T":"\/Date(1490195636211)\/","Val":3.38},{"T":"\/Date(1490195636240)\/","Val":2.74},{"T":"\/Date(1490195636260)\/","Val":1.93},{"T":"\/Date(1490195636270)\/","Val":1},{"T":"\/Date(1490195636300)\/","Val":0},{"T":"\/Date(1490195636310)\/","Val":-0.99},{"T":"\/Date(1490195636340)\/","Val":-1.92},{"T":"\/Date(1490195636350)\/","Val":-2.74},{"T":"\/Date(1490195636380)\/","Val":-3.38},{"T":"\/Date(1490195636400)\/","Val":-3.8},{"T":"\/Date(1490195636420)\/","Val":-3.99},{"T":"\/Date(1490195636440)\/","Val":-3.93},{"T":"\/Date(1490195636450)\/","Val":-3.62},{"T":"\/Date(1490195636480)\/","Val":-3.08},{"T":"\/Date(1490195636490)\/","Val":-2.35},{"T":"\/Date(1490195636520)\/","Val":-1.47},{"T":"\/Date(1490195636540)\/","Val":-0.5}]
    );

    var oscillatorDataSource = new kendo.data.DataSource({
        data: oscillatorChartData
    });

[Michael]

I have tried the example in Kendo UI Dojo! And it works great!

http://dojo.telerik.com/UJIfU/2

So i found out, that the type: "date" option in the categoryAxis object is the reason why it doesn't run with milliseconds.

Is there a chance to get this running in asp.net mvc wrapper? When i removed the Date() from CategroyAxis the build is broken!

 

Html.Kendo().Chart<OscillatorLiveData>()
     .Name("oscillatorChart")
     .Legend(legend => legend.Position(ChartLegendPosition.Bottom))
     .ChartArea(chartArea => chartArea.Background("transparent"))
     .SeriesDefaults(seriesDefaults => seriesDefaults
        .Line()
         .Style(ChartLineStyle.Smooth)
        .Markers(false)
     )
     .Series(series =>
     {
         series.Line(m => m.Val)
           .Name(@ApplicationStrings.ServoAxisFrequency)
           .CategoryField("T");
     })
     .CategoryAxis(axis => axis
        .Date()
        .Categories(c => c.T)
        .BaseUnit(ChartAxisBaseUnit.Fit)
        .AutoBaseUnitSteps(steps => steps.Milliseconds(1))
        .Crosshair(c => c.Visible(true))
        .MajorGridLines(lines => lines.Visible(false))
        .Labels(label => label
            .Step(10)
            .Template("#= kendo.toString(new Date(value.substr(6,13)*1), 'ss.fff') #")
        )
     )
     .ValueAxis(axis => axis
        .Numeric()
        .Labels(labels => labels.Format("#.###"))
        .Line(line => line.Visible(false))
        .AxisCrossingValue(-10)
     )
     .Tooltip(tooltip => tooltip
        .Visible(true)
        .Format("#.###")
        .Template("<p><b>#= series.name #</b><br><p style=\"align:left\">#= value #</p></p>")
     )

[Stefan]

Hello Michael,

The reason that the Chart is not working with the provided data is because the date  T is not parsed as a valid date object.

After I make the data with actual date objects the example is working as expected with the type date property:

http://dojo.telerik.com/UJIfU/4

As for the MVC example,  I can assume that the error occurs because AutoBaseUnitSteps is set to milliseconds which is only available in Date() categoryAxis.

Please try removing it to observe if the issue still occurs.

Regards,
Stefan
Telerik by Progress

[Michael]

Hello Stefan,

thx for your reply!

I need milliseconds in the date format! So i tried it with millisecond values - but it seems this doesn't work!

http://dojo.telerik.com/UJIfU/5

[Stefan]

Hello Michael,

After inspecting it I noticed that the example is using an older version of Kendo UI. After updating it and setting the baseUnits to milliseconds the example is working as expected:

http://dojo.telerik.com/UJIfU/9

Please update to the latest version of Kendo UI in order to achieve the desired result.

Regards,
Stefan
Telerik by Progress

[Michael]

Hi Stefan,

is there a way in asp.net mvc version to set the baseunit on millisecounds?

The ChartAxisBaseUnit enum doesn't offer this value!

http://docs.telerik.com/aspnet-mvc/api/Kendo.Mvc.UI/ChartAxisBaseUnit

[Stefan]

Hello Michael,

Thank you for reporting this.

I added it and the milliseconds option will be added in the next release.

I updated your Telerik points for bringing this to our attention.

Regards,
Stefan
Telerik by Progress