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. 

Copyright (c) GrapeCity, inc. All rights reserved.