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