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

Binding line chart data to web services?

5 Answers 123 Views
Charts
This is a migrated thread and some comments may be shown as answers.
Blake
Top achievements
Rank 1
Blake asked on 20 Sep 2016, 06:51 PM

Hello,

I'm trying to use the Kendo UI Angular chart directive. My situation is that I have web services that return line data (x/y coordinates) in JSON, and I'm trying to figure out a way to bind that data to the chart. I haven't found very much clear documentation on this and was wondering if there is an example or tutorial that I could follow to get set up. I have Angular services that make calls to my API and are currently grabbing the data - I just need a way of binding that to the chart. A sample of the response for one of the lines is pasted below. Thank you in advanced.

[{"xValue":0.0,"yValue":12274.36},
{"xValue":50.0,"yValue":12352.83},
{"xValue":100.0,"yValue":12373.48},
{"xValue":150.0,"yValue":12344.57},
{"xValue":200.0,"yValue":12249.58}]

5 Answers, 1 is accepted

Sort by
0
Iliana Dyankova
Telerik team
answered on 22 Sep 2016, 09:30 AM
Hi Blake,

You could follow this example - it demonstrates how to bind Kendo UI Scatter Chart to a dataSource when Angular is used. For your convenience I prepared a dojo with your data:

http://dojo.telerik.com/@Iliana/ogAse


More details about binding data to Kendo UI Chart can be found in the following documentation topic: 

http://docs.telerik.com/kendo-ui/controls/charts/data-binding

Regards,
Iliana Nikolova
Telerik by Progress
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
0
Blake
Top achievements
Rank 1
answered on 22 Sep 2016, 03:19 PM

Hi Iliana,

 

Thanks for your reply. That definitely got me on the right track. Is there a way to smooth out the line from a Scatter chart? I created a scatter line chart, and I have it configured closely to how I need it, but the line is a lot more 'choppy' that a normal line chart. Is there any way to change that so that it looks more like a line chart? Here is the dojo I'm working on:

http://dojo.telerik.com/oLAYA

0
Blake
Top achievements
Rank 1
answered on 22 Sep 2016, 03:31 PM
Sorry, you can ignore my last reply. I found my answer in the demos.
0
Blake
Top achievements
Rank 1
answered on 22 Sep 2016, 06:02 PM

Hi Iliana,

I'm looking through the documentation on binding to remote datasources, but it looks like that only works for a single data source. In my case, I have 3 separate services that are called. When these services are called, I want to populate the data for each series individually. I can't use a single datasource to achieve this. I've attached my dojo example that simulates an async call via the Angular timeout service. I have 2 separate date series in this case that should be populated when the call returns. However, in my dojo example, it's not working. Is this something that is supported?

 

http://dojo.telerik.com/oLAYA

0
Iliana Dyankova
Telerik team
answered on 26 Sep 2016, 12:31 PM
Hi Blake,

Binding Kendo UI Chart to multiple dataSources is not supported. What you could try for the current scenario is using the series.data option (updated dojo).

Regards,
Iliana Nikolova
Telerik by Progress
 
Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
 
Tags
Charts
Asked by
Blake
Top achievements
Rank 1
Answers by
Iliana Dyankova
Telerik team
Blake
Top achievements
Rank 1
Share this question
or