Line chart plotting data wrong with CategoryAxis AutobaseUnitStep in milliseconds

[CHIHPEI]

Scenario:

I have a series of data,

and I would like to plot it in line chart.

The X Axis is time to milliseconds, Y axis is numeric data with at least three digit after decimal point,

and each time data is not in the same time step,

Example of my data:

Question:

I'm setting the CategoryAxis to milliseconds(1).

However, when I check the chart it only shows a few point,

and the data were in the wrong point.

Q1. Is the CategoryAxis AutobaseUnitStep setting wrong that made the data point mismatching?

Q2. How can I show more data point on grid?

Q3. How can I set the tooltip format to show data with at least 4 or 5 digit after decimal point, and the time to milliseconds?

 

Code

 @(Html.Kendo().Chart(MyViewModel)
                                    .Name("dtchart")
                                    .Title("Displacement")
                                    .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");
                                    })
                                    .ValueAxis(axis => axis
                                        .Numeric()
                                    )
                                    .CategoryAxis(axis => axis
                                        .Categories( m => m.ReadTime)
                                        .Type(ChartCategoryAxisType.Date)
                                        .BaseUnit(ChartAxisBaseUnit.Fit)
                                        .Labels(labels => labels.Rotation(-90))
                                        .Crosshair(c => c.Visible(true))
                                        .AutoBaseUnitSteps(config => config.Milliseconds(1))
                                    )
                                    .Tooltip(tooltip => tooltip
                                        .Visible(true)
                                        .Shared(true)
                                        .Format("{0:N0}")
                                    )
                                )

 

 

[Mihaela]

Hi CHIHPEI,

Here you can review my feedback:

Q1) and Q2) After reviewing the Chart configuration, I noticed that the BaseUnit() method of the CategoryAxis does not expose a Milliseconds option, so I have logged it in our Feedback portal on your behalf. You can follow the status here:

https://feedback.telerik.com/aspnet-core-ui/1585954-milliseconds-time-interval-in-chartaxisbaseunit-enum

Аs a token of gratitude, I have updated the points in your Telerik account for the product feedback.

While the option is available through the BaseUnit() method, I would suggest the following workaround:

• Get a reference to the Chart in the $( document ).ready() function.
• Set the categoryAxis.baseUnit option to "milliseconds";
• Trigger the redraw() method of the Chart.

 @(Html.Kendo().Chart(MyViewModel)
  .Name("dtchart")
  ...
  .CategoryAxis(axis => axis
  .Categories( m => m.ReadTime)
  .Type(ChartCategoryAxisType.Date)
  .BaseUnit(ChartAxisBaseUnit.Fit)
  .Labels(labels => labels.Rotation(-90))
  .Crosshair(c => c.Visible(true))
  .AutoBaseUnitSteps(config => config.Milliseconds(1))
  )
  ...
)
<script>
        $( document ).ready(function() {
        var chart = $("#dtchart").data("kendoChart");
        chart.options.categoryAxis.baseUnit  = "milliseconds";
        chart.redraw();
    });
</script>

When the base unit is set to "milliseconds", the labels may not be visible, so you can manipulate their appearance on the x-axis by using the Step/Skip configurations. For example:

.CategoryAxis(axis => axis
  .Categories( m => m.ReadTime)
  .Type(ChartCategoryAxisType.Date)
  .BaseUnit(ChartAxisBaseUnit.Fit)
  .Labels(labels => labels.Rotation(-90).Step(100))
  ...
)

 

Q3. You can format the tooltip to display the series data correctly as follows:

 .Tooltip(tooltip => tooltip
  .Visible(true)
  .Shared(true)
  .Format("{0:n10}") //Display 10 digits after the decimal point
)

In addition, I have prepared a REPL example for your reference:

https://netcorerepl.telerik.com/QwPbYolH58YMsTR333

 

Regards, Mihaela Progress Telerik

[CHIHPEI]

Hi Mihaela,

Thanks for the detailed description and demo.

After rethinking of the purpose of my chart.

I think I'll set my  base unit to seconds and with 10 seconds per step

since my data time step is about 100 milliseconds per data point,

and the x-axis label would be really messy.

However, there are additional questions,

hope you could help me out.

Q1: How can I also show date time in tooltip?
Q2: Is it possible to change the appearance of the x-axis scale?

Below is what I've tried so far

[Mihaela]

Hey CHIHPEI,

Thank you for the update.

Q1) You can specify a custom template for the tooltip and access the category value as follows:

.Tooltip(tooltip => tooltip
      ...
      .Template("#=kendo.toString(category, 'dd/mm/yyyy HH:mm') # : #:value#")
)

 

Q2) To position the categories and their labels on the major ticks, enable the Justify() property:

    .CategoryAxis(axis => axis
        .Categories( m => m.ReadTime)
        .Type(ChartCategoryAxisType.Date)
        .BaseUnit(ChartAxisBaseUnit.Seconds)
        .BaseUnitStep(10)
        .Justify(true)
        .Labels(labels => labels.Rotation(-90))
        .Crosshair(c => c.Visible(true))
        .MajorGridLines(c => c.Visible(false))
        .MajorTicks(mt => mt.Visible(true))
    )

Here is the updated REPL sample: 

https://netcorerepl.telerik.com/ccbbOjPF19CfU2jt05

[CHIHPEI]

Hi Mihaela,

Thanks for helping!

It works like a charm!