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); }); };

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);
    });
};

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.