| Custom Controls > Widget Reference > Pie Chart ( Details) |
| Member Of | Wijmo Details Control |
| Base Control | wijpiechart |
| 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 |
Copy Code
|
|---|---|
myapp.ScreenName.EntityName_render = function (element, contentItem) {
var div = $("<div/>");
div.appendTo($(element));
div.attr("style", "width: 400px; height: 400px");
contentItem.dataBind("value", function (newValue) {
if (div.children().length) {
div.wijpiechart("destroy");
}
setTimeout(function () {
if (newValue !== null) {
var color = "#999999";
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
}
}
});
}
}, 500);
});
};
|
|
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.