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
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
0
sdobrev
Top achievements
Rank 1
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.
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
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
index.js
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
0
hayden
Top achievements
Rank 1
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 !
<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 !