This is a migrated thread and some comments may be shown as answers.

DataViz Widgets ?

4 Answers 93 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
hayden
Top achievements
Rank 1
hayden asked on 14 Sep 2012, 12:12 AM
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

4 Answers, 1 is accepted

Sort by
0
sdobrev
Top achievements
Rank 1
answered on 14 Sep 2012, 03:22 PM
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.
0
hayden
Top achievements
Rank 1
answered on 14 Sep 2012, 11:39 PM
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"
                        }
                    });
                }
0
sdobrev
Top achievements
Rank 1
answered on 18 Sep 2012, 07:30 AM
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?
0
hayden
Top achievements
Rank 1
answered on 18 Sep 2012, 11:40 PM
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 !
Tags
General Discussions
Asked by
hayden
Top achievements
Rank 1
Answers by
sdobrev
Top achievements
Rank 1
hayden
Top achievements
Rank 1
Share this question
or