Bar Chart

Member Of	Wijmo Collection Control
Base Control	wijbarchart
Description	Creates a customizable bar chart for comparing the values of items across categories.
Usage	Apply to a collection with at least two visible entity properties. The first visible property determines the data points to be plotted along the X-axis. The remaining visible properties represent one or more data series containing numeric values to be plotted along the Y-axis. Non-visible properties are ignored.

Generated Code	Copy Code
myapp.ScreenName.EntityName_render = function (element, contentItem) { var div = $("<div/>"); div.appendTo($(element)); div.attr("style", "height: 400px"); contentItem.value.oncollectionchange = function (args) { if (args.detail.action !== "refresh") return; if (div.children().length) { div.wijbarchart("destroy"); } var chart = c1ls.getChartContent(contentItem); var color = "#999999"; div.wijbarchart({ textStyle: { "font-family": c1ls.fontFamily }, header: { visible: false, text: "Chart Header", textStyle: { fill: color } }, legend: { visible: true, style: { stroke: color }, textStyle: { fill: color, "font-size": 10, "font-weight": "bold" } }, axis: { x: { labels: { style: { fill: color }}}, y: { autoMin: false, min: 0, labels: { style: { fill: color }, textAlign: "near" }} }, horizontal: false, stacked: false, 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", "height: 400px");

    contentItem.value.oncollectionchange = function (args) {
        if (args.detail.action !== "refresh") return;

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

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

        div.wijbarchart({
            textStyle: {
                "font-family": c1ls.fontFamily
            },
            header: {
                visible: false,
                text: "Chart Header",
                textStyle: { fill: color }
            },
            legend: {
                visible: true,
                style: { stroke: color },
                textStyle: { fill: color, "font-size": 10, "font-weight": "bold" }
            },
            axis: {
                x: { labels: { style: { fill: color }}},
                y: { autoMin: false, min: 0, labels: { style: { fill: color }, textAlign: "near" }}
            },
horizontal: false,
            stacked: false,
            showChartLabels: false,
            seriesList: chart.Series,
            click: chart.OnClick,
            hint: chart.Hint
        });
    };

    c1ls.renderControl(contentItem);
};

Remarks

This widget requires an absolute height value in order to render. If desired, change the default 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.getChartContent parses the child properties defined in the screen designer and returns an object used to initialize the wijbarchart 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.
GroupBy, a function that accepts the name of an entity property used to derive data series objects based on distinct values. The return value from this function provides an alternate way 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 chart’s bars. This property is used to initialize the widget’s hint option.
By default, one data series is generated for each visible numeric entity property in the control’s layout tree. Alternatively, you can use the GroupBy function to generate a separate data series for each distinct value of a specific entity property (which need not be present in the control’s layout tree). For example, if you replace the line:

seriesList: chart.Series,

with:

seriesList: chart.GroupBy("Region"),

Then the legend will contain one entry for each distinct value of the Region property. The first two visible properties still determine the values plotted along the X and Y axes, respectively. When you use the GroupBy function, any visible properties after the first two are ignored.

The default color value was chosen to be readable in both light and dark themes.

The generated code provides default implementations of the header, legend, and axis elements. See the Wijmo documentation for more information.