This is a migrated thread and some comments may be shown as answers.

Data binding from URL and new Date()s

9 Answers 99 Views
Charts
This is a migrated thread and some comments may be shown as answers.
URIEL
Top achievements
Rank 1
URIEL asked on 07 Jun 2017, 05:10 PM

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?

9 Answers, 1 is accepted

Sort by
0
Daniel
Telerik team
answered on 09 Jun 2017, 05:11 AM
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
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.
0
URIEL
Top achievements
Rank 1
answered on 12 Jun 2017, 04:40 PM

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

0
URIEL
Top achievements
Rank 1
answered on 12 Jun 2017, 09:54 PM
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.
0
Accepted
Daniel
Telerik team
answered on 13 Jun 2017, 06:52 AM
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
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.
0
URIEL
Top achievements
Rank 1
answered on 21 Jun 2017, 02:54 PM

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!

 

0
Daniel
Telerik team
answered on 23 Jun 2017, 05:38 AM
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
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.
0
URIEL
Top achievements
Rank 1
answered on 26 Jun 2017, 11:28 PM
On IE11 actually (using Windows 7). That's why I thought it was weird.
0
Daniel
Telerik team
answered on 28 Jun 2017, 11:48 AM
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
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.
0
URIEL
Top achievements
Rank 1
answered on 10 Jul 2017, 11:44 PM

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

Thanks a lot.

Tags
Charts
Asked by
URIEL
Top achievements
Rank 1
Answers by
Daniel
Telerik team
URIEL
Top achievements
Rank 1
Share this question
or