TypeError: Cannot read property 'getTime' of undefined

[Rich]

In my chart I am binding two series. On create of my component I build the series and bind to the kendo ui chart component. The series look like [{Price:xxxx, DateTime:xxxx}, {Price:xxxx, DateTime:xxxx}, {Price:xxxx, DateTime:xxxx} .... etc] . I set the series data by setting the chartSeries.data property. The chart displays correctly but I get this error:

TypeError: Cannot read property 'getTime' of undefined

 

[Dimitar]

Hello Rich,

In general, categorical series such as Bar, Line, Area and other Kendo UI Charts, have built-in support for displaying dates that include:

• Automatic selection of granularity/base unit (minutes, hours, days, etc.).
  
  
• Label formatting matched to the granularity.
  
  
• Grouping of categories into base units and series aggregates.

Refer to the following Chart Demo, where working with dates is demonstrated:

• Vue Chart Date Axis Demo.

I would suggest to use similar approach for configuring the Chart component. With it, no JavaScript error is being thrown in the browser console and the component is being successfully rendered.

Regards,
Dimitar
Progress Telerik

[Rich]

Hi Dimitar, thanks for the response.

I am trying to avoid additional data transformation wherever possible. From what I can tell from the documentation what I am doing should be working without error. I don't see an example doing exactly what I am doing but unfortunately there is no example of binding multiple series without passing a category array of value to the categoryaxis prop.

In my case each point in the series hold both the value and the data. [{Price:xxxx, DateTime:xxxx}, {Price:xxxx, DateTime:xxxx}, {Price:xxxx, DateTime:xxxx} .... etc] I am not setting the dates in the category axis. I have a computed property that is bound to the :series prop of the chart:

series() {
      let chartSeries = [];
      this.itemPrices.forEach(commodSeriesData => {
        chartSeries.push({
          type: "line",
          data: commodSeriesData,
          field: "Price",
          categoryField: "DateTime",
          categoryAxis: "DateTime",
          style: "normal",
          markers: { visible: false },
          labels: { visible: false }
        });
      });
      return chartSeries;
    }

[Ivan Danchev]

Hi Rich,

Could you post a stackblitz example that demonstrates the chart configuration, the date it is populated with and the exception you are getting?

Regards,
Ivan Danchev
Progress Telerik

[Rich]

Hi Ivan, the issue was caused by an oversight on my part. I was originally binding to the :data-source prop and switched to the :series prop binding. I had accidentally left the :data-source prop bound in the template. It appears as though the series was binding first and then the kendo exception would fire as it tried to bind the data-source. Once I realized the data-source prop was still in the template I removed it and everything is working as it should.  Thanks for your help!

[Lee]

The link above goes to a 404 page.

[Ivan Danchev]

Hello,

Here's a valid link: Date Axes.

Regards,
Ivan Danchev
Progress Telerik