how to integrate chart with mobile ui

2 posts, 0 answers
  1. Priyank
    Priyank avatar
    1 posts
    Member since:
    Apr 2010

    Posted 30 Nov 2012 Link to this post

    Hi we are trying to develop an mobile app using kendo ui. we need to integrate the chart controls in project.
    The below code does the same but in chrome (on desktop) and opera(on android device). we need an .apk file so we tried to run this code in icenium simulator for android it doesn't work.

    Plz help us with a solution.
    <!DOCTYPE html >
    <html  >
    <head>
        <title></title>
     
        <script src="js/jquery.min.js" type="text/javascript"></script>
        <script src="js/kendo.all.min.js" type="text/javascript"></script>
     
        <link href="styles/kendo.mobile.all.min.css" rel="stylesheet" type="text/css" />
    <style>
    html,body
    {
        width:100%;
    }   
    </style
    </head>
    <body>
     
     
     
     <div data-role="view" id="main"  data-layout="mobile-view" data-stretch="true"
     <div style="background-image:url('images/Green Stripy Wallpapers.jpg');">
        <a data-role="button" style="width:100%;">Button</a>
         
     
          <div id="example" class="k-content" style="width:100%; background:white;">
                <div>
                    <div id="chart"  style="width:100%;"></div>
                </div>
            </div>
          </div>
        </div>
     
     
    <script type="text/javascript">
        function createChart() {
            $("#chart").kendoChart({
                theme: $(document).data("kendoSkin") || "default",
                title: {
                    text: "Internet Users"
                },
                legend: {
                    position: "bottom"
                },
                chartArea: {
                    background: ""
                },
                seriesDefaults: {
                    type: "bar"
                },
                series: [{
                    name: "World",
                    data: [15.7, 16.7, 20, 23.5, 26.6]
                }, {
                    name: "United States",
                    data: [67.96, 68.93, 75, 74, 78]
    }],
                    valueAxis: {
                        labels: {
                            format: "{0}%"
                        }
                    },
                    categoryAxis: {
                        categories: [2005, 2006, 2007, 2008, 2009]
                    },
                    tooltip: {
                        visible: true,
                        format: "{0}%"
                    }
                });
            }
     
            $(document).ready(function() {
            var app = new kendo.mobile.Application();
                setTimeout(function() {
                    // Initialize the chart with a delay to make sure
                    // the initial animation is visible
                    createChart();
     
                    $("#example").bind("kendo:skinChange", function(e) {
                        createChart();
                    });
                }, 400);
            });
    </script>
     
    </body>
    </html>
  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2622 posts

    Posted 04 Dec 2012 Link to this post

    Hello Priyank,

    I tested the provided code in Icenium simulator for android and everything works as expected on my side (please take a look at this short screencast capture). Could you please provide more detailed information about the exact problems do you observe? This way I would be able to advice you further and provide concrete recommendations. Also, could you please specify the Android version you use? Note that Kendo UI DataViz supports Android 3 and above. For more detailed information on the subject follow this link.

    As a general information, the main logic is executed at the document.ready event. When building a Kendo UI Mobile application it is not recommended to use that event. Instead take a look at the init event of the view component. For example:
    //....
    <div data-role="view" id="main"  data-layout="mobile-view" data-stretch="true" data-init="createChart">
    //....
    function createChart() {
      $("#chart").kendoChart({
        //....
      });
    }
     
    window.kendoMobileApplication = new kendo.mobile.Application(document.body);
    //....

    I hope this information will help. 

    Kind regards,
    Iliana Nikolova
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top