Dynamically updated chart. How to show always 10 points?

[Jose Mejia]

Hi.

I have line chart with following configuration:

1)Angular html part

<div style="padding: 20px"
      id="{{generateChartId(stn)}}"
      kendo-chart
      k-legend="{ position: 'top' }"
      k-series-defaults="{ type: 'line' }"
      k-series="setupSeries(stn)"
     k-category-axis="getCategoryAxisData(stn)"
  </div>

2)controller main  functions:

$scope.setupSeries = function ()
        {
            return [
                { field: 'X', name: 'X', categoryField: 'epoch'},
                { field: 'Y', name: 'Y', categoryField: 'epoch' },
                { field: 'Z', name: 'Z', categoryField: 'epoch' }

            ];
        };

$scope.getCategoryAxisData = function (stn)
        {
           return  {

                    majorGridLines: {
                        visible: false
                    },
                    minorGridLines: {
                        visible: false
                    },
                    majorTicks: {
                        visible: false,

                    },
                    minorTicks: {
                        visible: false
                    },
                    maxDateGroups: 10,
                    baseUnitStep: "auto",

                    /*autoBaseUnitSteps: {
                     minutes: [monitorInterval],
                     hours: [],
                     days: [],
                     weeks: [],
                     months: [],
                     years: []
                     },*/
                    labels: {
                        dateFormats: {
                            hours: "HH mm"
                        },
                        //rotation: 45
                    }
                };
        };

Suppose that data updated  within five minutes (time interval is  5 minutes) via websockect and function like that:

this.addOnePoint = function (pos)
           {
               //lastCoordTime = new Date(time);

               if (chartData.length > 10)
               {
                   chartData.shift();
                   chartData.push(formData(pos));
               }
               else
               {
                   chartData.push(formData(pos));
               }


               if (!chart)
               {
                   chart = $("#chart" + stationId).data("kendoChart");
               }

               var dataSource = new kendo.data.DataSource({
                   data: chartData
               });

               chart.setDataSource(dataSource);
               //chart.refresh();
           };

I used similiar code with your benchmark sample because I have the same situation but chart updated not so fast (minutes or even hours).
After there are 10 points on chart (actually 3 points for each time) after the next point it became a chart with with 4 points with time interval equal to 15 minutes.
I suppose that this is because of  baseUnitStep: "auto".

If I remove baseUnit or baseUnitStep ("fit" or "auto") then it seems to work as expceted  but there are transient time values on category axis.
Suppose point on 17:20, then there would be 17:21, 17:22, 17:23, 17:24 time values between next valuable time point on 17:25. If there are 10 points then
category (time) axis is a total mess, and it is impossible to identify time value. It is possible to use rotation (90 grad), but it is ugly. I just want to have simple solution that I have only points with valuable time on time axis without transiesnt time values.

How can I do that? It seems to me so obvious scenario and behaviour, but your charts api is overcomplicated...

Thanks in advance.

[T. Tsonev]

Hi,

Have you considered using a regular, non-date axis? Your data is likely already sorted in chronological order. It's also likely that you don't need to aggregate/summarize multiple data points.
The dates will appear as they come from the data source:
categoryAxis: {
  type: "category",
    labels: {
      format: "HH:mm"
    }
  }
}

-- Live demo --

We agree that the date axis is hard to work with. We're considering our options to improve its default behavior and reduce the need for configuration.

Note that you can add/remove data items without replacing the data source.

Regards,
T. Tsonev
Telerik