I'm trying to do a bit of charting and came across this weird error message. Here is an example of what works:
$.ajax({
type: "GET",
dataType: "json",
url: "/data/active_projects_per_phase",
success: function (result) {
$.plot($("#active_per_phase"), result, {
series: {
pie: {
show: true,
label: {
show: true,
radius: 3 / 4,
formatter: function (label, series) {
return label + ': ' + series.data[0][1] + ' (' + Math.round(series.percent) + '%)';
},
background: {
opacity: 0.5
}
}
}
},
legend: {
show: false
}
});
}
});
The url returns the following data:
[
{
"data": 24,
"label": "\u0411\u0438\u0437\u043d\u0435\u0441-\u0438\u0434\u0435\u044f"
},
{
"data": 31,
"label": "\u041f\u043b\u0430\u043d\u0438\u0440\u043e\u0432\u0430\u043d\u0438\u0435"
},
{
"data": 26,
"label": "\u0418\u0441\u043f\u043e\u043b\u043d\u0435\u043d\u0438\u0435"
},
{
"data": 1,
"label": "\u0417\u0430\u043a\u0440\u044b\u0442\u0438\u0435"
}
]
Yet it will not work with this data and display "Could not draw pie with labels contained inside canvas" error:
[
{
"data": 6,
"label": "\u0417\u0430\u043a\u0440\u044b\u0442"
},
{
"data": 11,
"label": "\u041e\u0442\u043c\u0435\u043d\u0435\u043d"
},
{
"data": 1,
"label": "\u041e\u0441\u0442\u0430\u043d\u043e\u0432\u043b\u0435\u043d"
},
{
"data": 5,
"label": "\u041f\u0435\u0440\u0435\u043d\u0435\u0441\u0435\u043d \u0432 \u0434\u0440\u0443\u0433\u043e\u0439 \u043f\u0440\u043e\u0435\u043a\u0442"
},
{
"data": 4,
"label": "\u041f\u0435\u0440\u0435\u043d\u0435\u0441\u0435\u043d \u0432 \u043f\u043e\u0434\u0434\u0435\u0440\u0436\u043a\u0443"
}
]
What is it that I'm missing in chart setup to overcome this?
The pie functionality of flot has restrictions on the legend and labels. The code makes sure that the legend/labels stays within the boundaries of the canvas, and if it doesn't it fails as you have seen. Your options are:
legend.container
option to specify an outside div