Binding line chart data to web services?

[Blake]

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}]

[Iliana Dyankova]

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

 

 

[Blake]

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

[Blake]

Sorry, you can ignore my last reply. I found my answer in the demos.

[Blake]

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

[Iliana Dyankova]

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