How to use Chart?

Thread is closed for posting
2 posts, 0 answers
  1. Sultan
    Sultan avatar
    1 posts
    Member since:
    Apr 2014

    Posted 01 Jul 2014 Link to this post

    Hi guys,

    I just started using UI for PhoneGap.
    I'm using the Telerik Platform Windows Client

    I'm having a problem understanding how charts (Data Visualization) work. I couldn't find any document explaining what are the options or the APIs for the charts.
    The one thing I can find is the sample projects.

    Whenever I try to go to the charts docs of the UI phonegap it redirects me to this for example.
    Which is not working on the UI PhoneGap:

    Where could I know about how to include a chart in my page like this:

        <!-- Pie Chart View -->
        <div id="tabstrip-pie-chart"
            data-title="Pie Chart"

            <div id="pie-chart"></div>

    I hope there is a place to explain all the options and the APIs of the charts in UI PhoneGap.

    Thanks in advance,
    Sultan Alajmi

  2. Tina Stancheva
    Tina Stancheva avatar
    3299 posts

    Posted 04 Jul 2014 Link to this post

    Hi Sultan,

    In AppBuilder you can easily create a sample app developed with the latest supported version of Kendo UI Professional. The Kendo UI mobile app with data visualization template shows you how to use the  Kendo UI DataViz widgets like pie chart, stock chart, gauge, and a QR code generator. This is why you can start with that template and then customize the charts and the views to better fit your requirements and get you started with data visualization in an AppBuilder project.

    You can even use the code from the demo solution you mentioned, as long as you make sure that the grid representing the pie chart is part of a mobile view and that the chart is created after the deviceready method is invoked. For instance, if you create a new Kendo UI mobile app with data vizualizaiton in AppBuilder, you can go ahead and add the createChart() method definition in the app.js file and invoke it in the deviceready event listener:
    document.addEventListener("deviceready", function () {
    }, false);
    Then you can replace the default tabstrip-pie-chart div with this one:
    <div id="chart"
       data-title="Pie Chart"></div>

    You can find more information about the Kendo UI pie charts in their documentation and you can also browse through the charts' API reference. I hope this information will help ypu get started but please don't hesitate to let us know if we can further assist you.

    Tina Stancheva

    Share what you think about AppBuilder and Telerik Platform with us in our feedback portal, so we can become even better!

Back to Top