Piechart positioning
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/canvasjs/1.7.0/canvasjs.min.js"></script>
<div id="charts">
</div>
CSS
#charts > div {
width: 100%;
height: 300px;
margin-top: 10px;
}
#charts > div:first-child {
margin-top: 0px;
}
JavaScript
// Credits to http://stackoverflow.com/a/1349426/3867423 for makeRandomLabel()
function makeRandomLabel(length)
{
var text = [];
var possible = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
for( var i = 0; i < length; i++ )
text.push(possible.charAt(Math.floor(Math.random() * possible.length)));
return text.join('');
}
// Credits to https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random for getRandomIntInclusive(min, max)
function getRandomIntInclusive(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function makeRandomDataPoint() {
var labelLength = getRandomIntInclusive(5, 20);
var value = getRandomIntInclusive(0, 500);
var label = makeRandomLabel(labelLength);
return {
label: label,
legendText: label,
y: value
}
}
function range(length) {
var range = [];
for (var i = 0; i < length; i++) {
range.push(i);
}
return range;
}
var legend = {
verticalAlign: "center",
horizontalAlign: "right",
fontFamily: "Arial",
fontSize: 12,
markerMargin: 5,
maxWidth: 400
};
var type = "pie";
var showInLegend = true;
var charts = [
{
legend: legend,
data: [{
type: type,
showInLegend: showInLegend,
dataPoints: range(100).map(makeRandomDataPoint)
}]
},
{
legend: legend,
data: [{
type: type,
showInLegend: showInLegend,
dataPoints: range(10).map(makeRandomDataPoint)
}]
},
{
legend: legend,
data: [{
type: type,
showInLegend: showInLegend,
dataPoints: range(1).map(makeRandomDataPoint)
}]
}
];
var chartRoot = document.getElementById('charts');
console.log(charts);
charts.forEach(function(chartOptions, index) {
var chartContainer = document.createElement('div');
chartRoot.appendChild(chartContainer);
var chart = new CanvasJS.Chart(chartContainer, chartOptions);
chart.render();
});