DataViz Widgets ?

5 posts, 0 answers
  1. hayden
    hayden avatar
    16 posts
    Member since:
    Jul 2006

    Posted 13 Sep 2012 Link to this post

    Can we use DataViz widgets within an ICENIUM Kendo app ?

    I had a go at adding the sample provided here : http://docs.kendoui.com/howto/add-charts-and-graphs-to-an-application
    into the default kendo app, but it seemed to break the mobile css.

    If it is possible, perhaps you could provide some sample code.

    Thanks
  2. sdobrev
    sdobrev avatar
    54 posts
    Member since:
    Sep 2012

    Posted 14 Sep 2012 Link to this post

    Hi hayden,

    Can you share the source code of your application so that we can investigate it and see where exactly it breaks? Kendo Mobile and DataViz should work out of the box without any problem.
  3. hayden
    hayden avatar
    16 posts
    Member since:
    Jul 2006

    Posted 14 Sep 2012 Link to this post

    I don't seem able to add attachments, everytime I try the post is lost.

    index.html
    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
            <meta charset="utf-8" />
            <script src="cordova.js"></script>
            <script src="kendo/js/jquery.min.js"></script>
            <script src="kendo/js/kendo.mobile.min.js"></script>
            <script src="kendo/js/kendo.dataviz.min.js"></script>
            <script src="scripts/index.js"></script>

            <link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
            <link href="styles/main.css" rel="stylesheet" />
            <link href="styles/kendo.dataviz.min.css" rel="stylesheet" />
            
     

        </head>
        <body>
            <style> 
            .km-uq { 
                    -webkit-mask-box-image: url("images/UQ.png"); 
            } 
            .km-student { 
                    -webkit-mask-box-image: url("images/Student9.png"); 
            } 
            </style>
            <div data-role="view" id="tabstrip-home" data-title="UQ Statistics">
                <h1>2011</h1>

                <div class="chart-wrapper">
                    <div id="chart"></div>
                </div>
            </div>

            <div data-role="view" id="tabstrip-student" data-title="Student">
                <h1>Say Hello!</h1>


            </div>


            <div data-role="layout" data-id="mobile-tabstrip">
                <header data-role="header">
                    <div data-role="navbar">
                        <span data-role="view-title"></span>
                    </div>
                </header>

                <div data-role="footer">
                    <div data-role="tabstrip">
                        <a href="#tabstrip-home" data-icon="uq">Home</a>
                        <a href="#tabstrip-student" data-icon="student">Student</a>
                    </div>
                </div>
            </div>

            <script>
                var app = new kendo.mobile.Application(document.body, { transition: "slide", layout: "mobile-tabstrip" });
            </script>
        </body>
    </html>

    index.js
    // JavaScript Document

    // Wait for PhoneGap to load
    document.addEventListener("deviceready", onDeviceReady, false);

    // PhoneGap is ready
    function onDeviceReady() {
        createChart();
    }

                   var internetUsers = [ {
                            "country": "United States",
                            "year": "2005",
                            "value": 67.96
                        }, {
                            "country": "United States",
                            "year": "2006",
                            "value": 68.93
                        }, {
                            "country": "United States",
                            "year": "2007",
                            "value": 75
                        }, {
                            "country": "United States",
                            "year": "2008",
                            "value": 74,
                            "userColor": "#aaa"
                        }, {
                            "country": "United States",
                            "year": "2009",
                            "value": 78
                        } ];

                    function createChart() {
                        $("#chart").kendoChart({
                            theme: $(document).data("kendoSkin") || "default",
                            dataSource: {
                                data: internetUsers
                            },
                            title: {
                                text: "Internet Users"
                            },
                            legend: {
                                position: "bottom"
                            },
                            seriesDefaults: {
                                type: "column",
                                labels: {
                                    visible: true,
                                    format: "{0}%"
                                }
                            },
                            series: [{
                                field: "value",
                                name: "United States",
                                colorField: "userColor"
                            }],
                            valueAxis: {
                                labels: {
                                    format: "{0}%"
                                }
                            },
                            categoryAxis: {
                                field: "year"
                            }
                        });
                    }
  4. sdobrev
    sdobrev avatar
    54 posts
    Member since:
    Sep 2012

    Posted 18 Sep 2012 Link to this post

    Hi hayden,

    I have created a JSBin with your source code and it is working as expected. Can you look at the code here and even modify it to illustrate your issue?
  5. hayden
    hayden avatar
    16 posts
    Member since:
    Jul 2006

    Posted 18 Sep 2012 Link to this post

    First problem ... I was using the equivalent of

    <script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.dataviz.min.js">

    not

    <script src="http://cdn.kendostatic.com/2012.2.710/js/kendo.all.min.js">

    I download this file from Telerik - kendoui.aspnetmvc.2012.2.913.commercial.zip

    All good now - thanks !
Back to Top