JSON Chart

Member Of	Wijmo Custom Control
Base Control	wijbarchart
Description	Creates a bar chart for displaying tabular JSON-encoded data.
Usage	Apply to screen content. First add a new custom control bound to the screen, then change its type to Wijmo Custom Control.

Generated Code	Copy Code
myapp.ScreenName.ScreenContent_render = function (element, contentItem) { var div = $("<div/>"); div.appendTo($(element)); // Replace with the URL for your Web API var url = "../Folder/Controller/"; msls.showProgress(msls.promiseOperation(function (operation) { $.getJSON(url, function (data) { operation.complete(data); }).error(function (args) { operation.error(args); }); }).then(function (result) { var color = "#999999"; var json = c1ls.getJsonData(result); 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: true, stacked: true, showChartLabels: false, seriesList: json.Series, hint: json.Hint }); }, function (args) { if (args.responseText.charAt(0) === "{") { var ex = $.parseJSON(args.responseText); msls.showMessageBox(ex.ExceptionMessage, { title: ex.Message }); } else { msls.showMessageBox(args.statusText, { title: "HTTP Error " + args.status }); } })); };

Generated Code

Copy Code

myapp.ScreenName.ScreenContent_render = function (element, contentItem) {

    var div = $("<div/>");
    div.appendTo($(element));

    // Replace with the URL for your Web API
    var url = "../Folder/Controller/";

    msls.showProgress(msls.promiseOperation(function (operation) {
        $.getJSON(url, function (data) {
            operation.complete(data);
        }).error(function (args) {
            operation.error(args);
        });
    }).then(function (result) {
        var color = "#999999";
        var json = c1ls.getJsonData(result);
        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: true,
            stacked: true,
            showChartLabels: false,
            seriesList: json.Series,
            hint: json.Hint
        });
    }, function (args) {
        if (args.responseText.charAt(0) === "{") {
            var ex = $.parseJSON(args.responseText);
            msls.showMessageBox(ex.ExceptionMessage, { title: ex.Message });
        }
        else {
            msls.showMessageBox(args.statusText, { title: "HTTP Error " + args.status });
        }
    }));
};

Remarks

This widget will not render unless the getJSON method returns a valid response. You should replace the string constant with the appropriate URL for your Web API Controller. The msls.showProgress wrapper displays the intrinsic LightSwitch progress animation while the Web API is executing, and ensures that the control will not be rendered until this operation completes successfully.

Unlike the Bar Chart widget and others that bind to screen collections, the JSON Chart widget does not contain any entity properties in the screen designer. The shape of the result set is determined by the Web API Controller.

The utility method c1ls.getJsonData parses the data returned by the Web API Controller 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 result set and used to initialize the widget’s seriesList option.
Hint, an object that defines the tooltip to use for the chart. This property is used to initialize the widget’s hint option.
Columns, an array of column descriptor objects optionally used to initialize the columns option of a separate JSON Grid widget.
Rows, an array of data rows optionally used to initialize the data option of a separate JSON Grid widget.

The return value from c1ls.getJsonData can also be used to initialize a JSON Grid widget on the same screen. This is how the Wijmo OLAP Screen template implements its Grid View tab.