Data binding from URL and new Date()s

[URIEL]

I'm trying to use the kendoChart with remote data, which looks like this (other settings omitted for brevity):

01.$('#chart-uno').kendoChart({
02.  dataSource: {
03.    transport: {
04.      read: {
05.        url: ' http://urltokendoobject',
06.        dataType: 'jsonp'
07.      }
08.    }
09.  }
10.})

 

What I've got in a local setup is an object like this (plenty of data omitted as well):

01.var data = [{},{
02.  'name': 'First Serie',
03.  'type': 'line',
04.  'style': 'smooth',
05.  'data': [{
06.    'value': 48,'date': new Date("2017-01-31T00:00")
07.  },{
08.    'value': 120,'date': new Date("2017-02-28T00:00")
09.  },{
10.    'value': 187,'date': new Date("2017-03-31T00:00")
11.  }]
12.},{
13.  'name': 'Second Serie',
14.  'type': 'area',
15.  'line': {'style': 'smooth'},
16.  'stack': true,
17.  'data': [{
18.    'value': 47,'date': new Date("2017-01-30T00:00")
19.  },{
20.    'value': 58,'date': new Date("2017-02-01T00:00")
21.  },{
22.    'value': 163,'date': new Date("2017-03-30T00:00")
23.  }]
24.}]

The URL returns the same object (starting from the first bracket []). The first empty curly brace is due to a configuration we're using to build the data.

 

But I'm not able to actually make it work when consuming it from the remote. Still, I'm not sure what I could be doing wrong. Any pointers to the right solution?

[Daniel]

Hello,

Data binding to dataSource requires returning data objects and specifying the series fields. If you wish to return the series configuration from the server then you could either init the chart or set its options after the data is returned from the server - example.

Regards,
Daniel
Progress Telerik

[URIEL]

Thanks, Daniel!

Sorry for the late reply, I was testing the new setup you showed me regarding the set the options after the data is returned.

So far, I've been able to work it out using local data and that works great (example), however, I have not been able to set it right when it comes to using the remote URL. I'm not sure if I should leave the function(options) there or just use the normal transport configuration (I've tried it on both ways unsuccessfully though). So I'm thinking that probably I've got something wrong.

Something else I've been thinking is to instead of using the remote data source to do an AJAX call, what would be the best practice for this kind of configuration?

 

Thanks again

[URIEL]

I've made some progress regarding this, when I place a completely valid JSON on the data source, it renders. However, if I keep the 'new Date()' there (thus not having a valid JSON structure) the chart doesn't render. The issue here is that I can't order them by date if they're just strings.

[Daniel]

Hello again,

I used a function for simplicity. You can use normal transport configuration for remote call to the server.
I am not sure if I understand the issue with the order, but if you wish to use date axis with the "date" field for category then you could return the dates as strings in the JSON format and explicitly set the categoryAxis type to "date". The chart will automatically parse them - example.

Regards,
Daniel
Progress Telerik

[URIEL]

Thanks for the explanation Daniel!

Indeed the function confused us a bit. But it all now works as it should.

 

On Internet Explorer (surprising isn't it?!) we're getting this error:

SCRIPT438: Object doesn't support property or method 'isArray'
File: kendo.all.min.js, Line: 94, Column: 32344

Not sure if it's due our configuration on the chart or something else (we've tried it with one that uses the  from a local variable, and we get the same result).

The chart config looks like this right now )it is inside a function that builds the DOM element that the chart will use, hence the '+selector' part):

dataSource.fetch(function() {
    $('#chart-'+selector).kendoChart({
      renderAs: 'canvas',
      seriesColors: ["red", "#112234"],
      legend: {
        position: 'bottom'
      },
      seriesDefaults: {
        missingValues: 'interpolate',
        field: 'value',
        categoryField: 'date',
        overlay: {
          gradient: null
        }
      },
      chartArea: {
        background: 'transparent'
      },
      categoryAxis: {
        type: 'date',
        majorGridLines: {
          visible: false
        },
        baseUnit: 'days',
        labels: {
          step: 20,
          rotation: 'auto',
          dateFormats:
          {
            minutes: 'HH:mm',
            hours: 'HH:mm',
            days: 'dd MMM \'yy',
            months: 'MMM \'yy',
            years: 'yyyy'
          }
        },
        maxDateGroups: 5
      },
      tooltip: {
        visible: true,
        template: '#= series.name #: $#= kendo.toString(value, "0.00") #M el #= kendo.toString(category, \'dd MMM yy\') #'
      },
      series: this.data().toJSON()
    })
  })

 

Thanks again!

 

[Daniel]

Hi,

Which version of IE? The latest Kendo version supports IE 9+ and the isArray method is not supported in previous versions of Internet Explorer.

Regards,
Daniel
Progress Telerik

[URIEL]

On IE11 actually (using Windows 7). That's why I thought it was weird.

[Daniel]

Hi,

Perhaps the browser is running in compatibility mode. Could you check if setting the meta tag described here resolves the problem?

Regards,
Daniel
Progress Telerik

[URIEL]

Sorry for the late reply Daniel. The meta tag solved the issue.

Thanks a lot.