I was able to create a file called chart.html. I created all the JS and Styles folders. I'm able to use Chrome to view the pie chart in the browser, but when I put the html, JS, and CSS in Icenium, it does not work. I know the reference to those paths are correct.
Is there a trick to getting it to work in iDevice?
3 Answers, 1 is accepted
There is no special 'trick' to get a Pie Chart working on iDevice. By default, Icenium includes only kendo.mobile.min.js combined script which does not contain KendoUI DataViz widgets. For more information about KendoUI JavaScript dependencies please check this topic.
If you would like to show chart inside KendoUI Mobile application, it is best to include kendo.all.min.js or to use a custom script (download builder). Also it is recommended to initialize the Chart at the init event of its parent View.
In case the aforementioned guidelines does not help, please share your code so I can examine the current implementation and advice you further.
Kind regards,
Alexander Valchev
the Telerik team
Rank 1
<!DOCTYPE html>
<html>
<head>
<title>Approval Request</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge" >
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="kendo/js/console.js"></script>
<script src="kendo/js/kendo.dataviz.min.js"></script>
<script src="kendo/js/kendo.core.min.js"></script>
<script src="kendo/js/kendo.userevents.min.js"></script>
<script src="kendo/js/kendo.dataviz.core.min.js"></script>
<script src="kendo/js/kendo.dataviz.svg.min.js"></script>
<script src="kendo/js/kendo.datavix.chart.min.js"></script>
<link href="kendo/styles/examples-offline.css" rel="stylesheet" />
<link href="kendo/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="kendo/styles/kendo.common.min.css" rel="stylesheet" />
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
</head>
<body>
<div id="example" class="k-content">
<div class="chart-wrapper">
<div id="chart"></div>
</div>
<script>
function createChart() {
$("#chart").kendoChart({
theme: $(document).data("kendoSkin") || "default",
title: {
text: "Break-up of Spain Electricity Production for 2008"
},
legend: {
position: "bottom",
labels: {
template: "#= text # (#= value #%)"
}
},
seriesDefaults: {
labels: {
visible: true,
format: "{0}%"
}
},
series: [{
type: "pie",
data: [ {
category: "Hydro",
value: 22
}, {
category: "Solar",
value: 2
}, {
category: "Nuclear",
value: 49
}, {
category: "Wind",
value: 27
} ]
}],
tooltip: {
visible: true,
format: "{0}%"
}
});
}
createChart();
</script>
</div>
<script>
window.kendoMobileApplication = new kendo.mobile.Application(document.body);
</script>
</body>
</html>
This code will definitely cause the browser to throw a JavaScript error:
Your kendo mobile application element does not contain any direct child elements with data-role="view" attribute set. Make sure that you instantiate the mobile application using the correct container.
Did you checked the console in Icenium? As the error says, when you build KendoUI Mobile application, there must be at least one element with data-role="view", direct child of the application container (usually that is the body).
Also, as suggested in my previous reply, it is recommended to initialize the Chart at the init event of its View.
Script references are incorrect too - it would be easier to use kendo.all.min.js which contains all the required dependencies. This example demonstrates the correct configuration:
In order to test it in PhoneGap, you can copy-paste the code into the index.html page of your Icenium project.
Kind regards,
Alexander Valchev
the Telerik team