I'm using Kendo Pie Chart to render a pie chart in the DOM.Below is the code that has been used..
function showOnPie(data) {
var total = [];
var count = 0;
for (var i = 0, tot = data.roundGraph.length; i < tot; i++) {
count += data.roundGraph[i].total;
}
for (var j = 0, totem = data.roundGraph.length; j < totem; j++) {
total.push([data.roundGraph[j].name, (data.roundGraph[j].total / count) * 100, data.roundGraph[j].id])
}
$scope.pieChartOptions = {
title: {
position: "bottom",
text: "Share of Internet Population Growth, 2007 - 2012"
},
legend: {
visible: false
},
chartArea: {
background: ""
},
seriesDefaults: {
labels: {
visible: true,
background: "transparent",
template: "#= category #: \n #= value#%"
}
},
series: [
{
type: "pie",
startAngle: 150,
data: [
{
category: "Asia",
value: 53.8,
color: "#9de219"
}, {
category: "Europe",
value: 16.1,
color: "#90cc38"
}, {
category: "Latin America",
value: 11.3,
color: "#068c35"
}, {
category: "Africa",
value: 9.6,
color: "#006634"
}, {
category: "Middle East",
value: 5.2,
color: "#004d38"
}, {
category: "North America",
value: 3.6,
color: "#033939"
}
]
}
],
tooltip: {
visible: true,
format: "{0}%"
}
};
}
The chart is loading fine but is not responsive in different browser window.
As a solution I tried to refresh the chart on change in window size by doing
$(window).resize(function () {
showOnPie($scope.chartdATA);
});
but didn't find a perfect solution for the responsiveness.
Same goes for the bar chart where the x and y axis are hidden when the browser is minimized.Can anybody sufggest a fix for this issue.All the code has been done in AngularJs.