How to use Chart?

[Sultan]

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: http://demos.telerik.com/kendo-ui/pie-charts/pie-labels

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

    <!-- Pie Chart View -->
    <div id="tabstrip-pie-chart"
        data-role="view"
        data-title="Pie Chart"
        data-show="app.pieChart.createPieChart"
        data-hide="app.pieChart.unbindResizeEvent"
        data-stretch="true">

        <div id="pie-chart"></div>
    </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

[Tina Stancheva]

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 () {
    navigator.splashscreen.hide();
     createChart();
}, false);

Then you can replace the default tabstrip-pie-chart div with this one:

<div id="chart"
   data-role="view"
   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.

Regards,
Tina Stancheva
Telerik