DataViz not working in Icenium

4 posts, 0 answers
  1. Jack
    Jack avatar
    2 posts
    Member since:
    Nov 2012

    Posted 03 Mar 2013 Link to this post

    Is there a trick to making this work in Icenium?

    I was able to create a file called chart.html. I created all the JS and Styles folders.  I'm able to use Chrome to view the pie chart in the browser, but when I put the html, JS, and CSS in Icenium, it does not work.  I know the reference to those paths are correct.

    Is there a trick to getting it to work in iDevice?

  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2891 posts

    Posted 06 Mar 2013 Link to this post

    Hello Jack,

    There is no special 'trick' to get a Pie Chart working on iDevice. By default, Icenium includes only kendo.mobile.min.js combined script which does not contain KendoUI DataViz widgets. For more information about KendoUI JavaScript dependencies please check this topic.

    If you would like to show chart inside KendoUI Mobile application, it is best to include kendo.all.min.js or to use a custom script (download builder). Also it is recommended to initialize the Chart at the init event of its parent View.

    In case the aforementioned guidelines does not help, please share your code so I can examine the current implementation and advice you further.

    Kind regards,
    Alexander Valchev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Jack
    Jack avatar
    2 posts
    Member since:
    Nov 2012

    Posted 06 Mar 2013 Link to this post

    The files are all correct and is in Icenium.  What am I missing?

    <!DOCTYPE html>
    <html>
    <head>
        <title>Approval Request</title>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" >
        <script src="kendo/js/kendo.mobile.min.js"></script>
        <script src="kendo/js/console.js"></script>
        <script src="kendo/js/kendo.dataviz.min.js"></script>
        <script src="kendo/js/kendo.core.min.js"></script>
        <script src="kendo/js/kendo.userevents.min.js"></script>
        <script src="kendo/js/kendo.dataviz.core.min.js"></script>
        <script src="kendo/js/kendo.dataviz.svg.min.js"></script>
        <script src="kendo/js/kendo.datavix.chart.min.js"></script>
       
       
       
        <link href="kendo/styles/examples-offline.css" rel="stylesheet" />
        <link href="kendo/styles/kendo.dataviz.min.css" rel="stylesheet" />
        <link href="kendo/styles/kendo.common.min.css" rel="stylesheet" />
        <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
    </head>
    <body>

     
     <div id="example" class="k-content">
                <div class="chart-wrapper">
                    <div id="chart"></div>
                </div>
                <script>
                    function createChart() {
                        $("#chart").kendoChart({
                            theme: $(document).data("kendoSkin") || "default",
                            title: {
                                text: "Break-up of Spain Electricity Production for 2008"
                            },
                            legend: {
                                position: "bottom",
                                labels: {
                                    template: "#= text # (#= value #%)"
                                }
                            },
                            seriesDefaults: {
                                labels: {
                                    visible: true,
                                    format: "{0}%"
                                }
                            },
                            series: [{
                                type: "pie",
                                data: [ {
                                    category: "Hydro",
                                    value: 22
                                }, {
                                    category: "Solar",
                                    value: 2
                                }, {
                                    category: "Nuclear",
                                    value: 49
                                }, {
                                    category: "Wind",
                                    value: 27
                                } ]
                            }],
                            tooltip: {
                                visible: true,
                                format: "{0}%"
                            }
                        });
                    }

                    createChart();
                </script>
            </div>

        <script>
            window.kendoMobileApplication = new kendo.mobile.Application(document.body);
        </script>
    </body>
    </html>

  4. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2891 posts

    Posted 07 Mar 2013 Link to this post

    Hello Jack,

    This code will definitely cause the browser to throw a JavaScript error:

    Your kendo mobile application element does not contain any direct child elements with data-role="view" attribute set. Make sure that you instantiate the mobile application using the correct container.

    Did you checked the console in Icenium? As the error says, when you build KendoUI Mobile application, there must be at least one element with data-role="view", direct child of the application container (usually that is the body).

    Also, as suggested in my previous reply, it is recommended to initialize the Chart at the init event of its View.

    Script references are incorrect too - it would be easier to use kendo.all.min.js which contains all the required dependencies. This example demonstrates the correct configuration:

    In order to test it in PhoneGap, you can copy-paste the code into the index.html page of your Icenium project.

    Kind regards,
    Alexander Valchev
    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