Pie Chart

Member Of	Wijmo Collection Control
Base Control	wijpiechart
Description	Creates a customizable pie chart where each data series is represented as a slice.
Usage	Apply to a collection with at least two entity properties. The first property is interpreted as the set of data points (pie slices) to be listed in the chart legend. The second property provides the numeric values that determine the relative sizes of the pie slices.

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.value.oncollectionchange = function (args) { if (args.detail.action !== "refresh") return; if (div.children().length) { div.wijpiechart("destroy"); } var chart = c1ls.getPieChartContent(contentItem); var color = "#999999"; 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: chart.Series, click: chart.OnClick, hint: chart.Hint }); }; c1ls.renderControl(contentItem); };

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.value.oncollectionchange = function (args) {
        if (args.detail.action !== "refresh") return;

        if (div.children().length) {
            div.wijpiechart("destroy");
        }

        var chart = c1ls.getPieChartContent(contentItem);
        var color = "#999999";

        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: chart.Series,
            click: chart.OnClick,
            hint: chart.Hint
        });
    };

    c1ls.renderControl(contentItem);
};

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.

This widget will not render until the screen collection to which it is bound is loaded (that is, when the oncollectionchange event fires). If the underlying query is re-executed with different sort or filter criteria, then the widget will re-render accordingly. The final line of code calls the c1ls.renderControl method to ensure proper rendering in tabs and popups, and to handle collections that have already been loaded.

The utility method c1ls.getPieChartContent parses the child properties defined in the screen designer and returns an object used to initialize the wijpiechart control. This object has the following properties:

Series, an array of data series objects derived from the control’s contentItem and used to initialize the widget’s seriesList option.
OnClick, a function that invokes the Tap handler associated with the control’s Columns Layout element, if any. This property is used to initialize the widget’s click option.
Hint, an object that defines the tooltip to use for the pie chart slices. This property is used to initialize the widget’s hint option.

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.