LineChart with BaseUnit milliseconds

7 posts, 0 answers
  1. Michael
    Michael avatar
    39 posts
    Member since:
    Jan 2012

    Posted 22 Mar Link to this post

    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
        });
  2. Michael
    Michael avatar
    39 posts
    Member since:
    Jan 2012

    Posted 23 Mar in reply to Michael Link to this post

    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>")
         )
  3. Stefan
    Admin
    Stefan avatar
    912 posts

    Posted 24 Mar Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  4. Michael
    Michael avatar
    39 posts
    Member since:
    Jan 2012

    Posted 24 Mar in reply to Stefan Link to this post

    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

  5. Stefan
    Admin
    Stefan avatar
    912 posts

    Posted 28 Mar Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  6. Michael
    Michael avatar
    39 posts
    Member since:
    Jan 2012

    Posted 28 Mar Link to this post

    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

  7. Stefan
    Admin
    Stefan avatar
    912 posts

    Posted 29 Mar Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top