|
Member Of |
|
|
Base Control |
|
|
Description |
Creates a pie chart where each numeric entity property is represented as a slice. |
|
Usage |
Apply to a single object (not a collection) with at least two numeric entity properties. Each entity property provides the numeric values that determine the relative sizes of the pie slices. Non-numeric properties should be removed from the control’s layout tree. |
Generated Code
myapp.ScreenName.EntityName_render = function (element, contentItem) {
var div = $("<div/>");
div.appendTo($(element));
div.attr("style", "width: 400px; height: 400px");
var color = "#999999";
var gotPie = false;
contentItem.dataBind("value", function (newValue) {
if (gotPie) {
div.wijpiechart("destroy");
gotPie = false;
}
if (newValue !== null) {
var series = contentItem.children.map(function (p) {
return { label: p.displayName, legendEntry: true, data: newValue[p.valueModel.name] };
});
div.wijpiechart({
textStyle: {
"font-family": c1ls.fontFamily
},
footer: {
visible: false,
text: "Chart Footer",
textStyle: { fill: color, "font-size": 18 }
},
legend: {
visible: true,
style: { stroke: color },
textStyle: { fill: color, "font-size": 10, "font-weight": "bold" }
},
showChartLabels: false,
seriesList: series,
hint: {
content: function () {
return this.label + ": " + this.value;
},
contentStyle: {
"font-family": c1ls.fontFamily
}
}
});
gotPie = true;
}
});
};
Remarks
This widget specifies an initial width and height for optimal rendering on tablet or desktop devices. If desired, change the default width (400px) and height (400px) of the generated DOM element.
The dataBind method call ensures that the widget stays in sync by re-creating the control whenever the bound value changes.
The default color value was chosen to be readable in both light and dark themes.
The generated code provides default implementations of the footer and legend elements. See the Wijmo documentation for more information.