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

DataViz Widgets ?

4 Answers 45 Views

General Discussions

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

4 Answers, 1 is accepted

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"
                        }
                    });
                }