Hello,
I'm using the kendoui.2013.1.319
I'm trying to create a pie chart inside a kendo window control.
I want the chart to dynamically create when I open the window,
(in the real application it preforms as drill down chart that changes according to parent bar chart click),
but when I try do so , the labels of the chart are not shown.
I attached a short demo.
can you please tell me if there is a problem with my implementation?
Thanks
Eran
<div id="example" class="k-content">
<div id="window">
<div class="chart-wrapper">
<div id="chart"></div>
</div>
</div>
<span id="undo" style="xdisplay:none" class="k-button">Click here to open the window.</span>
<script>
var data = [
{
"source": "Hydro",
"percentage": 22,
"explode": true
},
{
"source": "Solar",
"percentage": 2
},
{
"source": "Nuclear",
"percentage": 49
},
{
"source": "Wind",
"percentage": 27
}
];
function createChart() {
$("#chart").kendoChart({
title: {
text: "Break-up of Spain Electricity Production for 2008"
},
legend: {
position: "bottom"
},
dataSource: {
data: data
},
series: [{
type: "pie",
field: "percentage",
categoryField: "source",
explodeField: "explode"
}],
seriesColors: ["#42a7ff", "#666666", "#999999", "#cccccc"],
tooltip: {
visible: true,
template: "${ category } - ${ value }%"
},
seriesDefaults: {
labels: {
visible: true,
background: "transparent",
template: "#= category #: #= value#%"
}
}
});
}
//$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
$(document).ready(function() {
var window = $("#window"),
undo = $("#undo")
.bind("click", function() {
window.data("kendoWindow").open();
createChart();
undo.hide();
});
var onClose = function() {
undo.show();
}
if (!window.data("kendoWindow")) {
window.kendoWindow({
width: "500px",
title: "About Alvar Aalto",
actions: [
"Pin",
"Minimize",
"Maximize",
"Close"
],
close: onClose,
visible: false
});
}
});
</script>
<style scoped>
#example
{
min-height:500px;
}
#undo {
text-align: center;
position: absolute;
white-space: nowrap;
padding: 1em;
cursor: pointer;
}
.armchair {
float: left;
margin: 30px 30px 120px 30px;
text-align: center;
}
.armchair img {
display: block;
margin-bottom: 10px;
}
</style>
</div>
I'm using the kendoui.2013.1.319
I'm trying to create a pie chart inside a kendo window control.
I want the chart to dynamically create when I open the window,
(in the real application it preforms as drill down chart that changes according to parent bar chart click),
but when I try do so , the labels of the chart are not shown.
I attached a short demo.
can you please tell me if there is a problem with my implementation?
Thanks
Eran
<div id="example" class="k-content">
<div id="window">
<div class="chart-wrapper">
<div id="chart"></div>
</div>
</div>
<span id="undo" style="xdisplay:none" class="k-button">Click here to open the window.</span>
<script>
var data = [
{
"source": "Hydro",
"percentage": 22,
"explode": true
},
{
"source": "Solar",
"percentage": 2
},
{
"source": "Nuclear",
"percentage": 49
},
{
"source": "Wind",
"percentage": 27
}
];
function createChart() {
$("#chart").kendoChart({
title: {
text: "Break-up of Spain Electricity Production for 2008"
},
legend: {
position: "bottom"
},
dataSource: {
data: data
},
series: [{
type: "pie",
field: "percentage",
categoryField: "source",
explodeField: "explode"
}],
seriesColors: ["#42a7ff", "#666666", "#999999", "#cccccc"],
tooltip: {
visible: true,
template: "${ category } - ${ value }%"
},
seriesDefaults: {
labels: {
visible: true,
background: "transparent",
template: "#= category #: #= value#%"
}
}
});
}
//$(document).ready(createChart);
$(document).bind("kendo:skinChange", createChart);
$(document).ready(function() {
var window = $("#window"),
undo = $("#undo")
.bind("click", function() {
window.data("kendoWindow").open();
createChart();
undo.hide();
});
var onClose = function() {
undo.show();
}
if (!window.data("kendoWindow")) {
window.kendoWindow({
width: "500px",
title: "About Alvar Aalto",
actions: [
"Pin",
"Minimize",
"Maximize",
"Close"
],
close: onClose,
visible: false
});
}
});
</script>
<style scoped>
#example
{
min-height:500px;
}
#undo {
text-align: center;
position: absolute;
white-space: nowrap;
padding: 1em;
cursor: pointer;
}
.armchair {
float: left;
margin: 30px 30px 120px 30px;
text-align: center;
}
.armchair img {
display: block;
margin-bottom: 10px;
}
</style>
</div>