Binding line chart data to web services?

6 posts, 0 answers
  1. Blake
    Blake avatar
    5 posts
    Member since:
    Sep 2016

    Posted 20 Sep Link to this post

    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}]
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 22 Sep Link to this post

    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.
     
  3. Kendo UI is VS 2017 Ready
  4. Blake
    Blake avatar
    5 posts
    Member since:
    Sep 2016

    Posted 22 Sep in reply to Iliana Nikolova Link to this post

    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

  5. Blake
    Blake avatar
    5 posts
    Member since:
    Sep 2016

    Posted 22 Sep in reply to Iliana Nikolova Link to this post

    Sorry, you can ignore my last reply. I found my answer in the demos.
  6. Blake
    Blake avatar
    5 posts
    Member since:
    Sep 2016

    Posted 22 Sep in reply to Iliana Nikolova Link to this post

    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

  7. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 26 Sep Link to this post

    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.
     
Back to Top
Kendo UI is VS 2017 Ready