Donut chart for Boolean value

2 posts, 0 answers
  1. Austin
    Austin avatar
    19 posts
    Member since:
    Jun 2015

    Posted 25 May Link to this post

    I would like to use a Donut chart to display a boolean value. However, I'm not sure that it works this way right out of the box.

    My DataSource is receiving multiple Json objects that look like this:

    {"PolicyGroupId":2,"PolicyGroupName":"Communication","AtRisk":true},{"next object here"},{"and so on..."}

     

    Now my question is, how do I display a donut chart that shows the correct percentage for the total number of "True" and "False" for the field "AtRisk"? Is this possible at all?

    I'm thinking that I'm going to need to aggregate them somehow on the server first and then return Json but I'm not sure what exactly it needs to look like.

  2. Austin
    Austin avatar
    19 posts
    Member since:
    Jun 2015

    Posted 25 May in reply to Austin Link to this post

    I was able to solve this myself.

    I aggregated the data on the server and am returning one Json Object that looks like this:

    {"chartData":[{"title":"At Risk","value:13},{"title":"Not at Risk","value":0}]}

    And then I have the following javascript for the chart:

    $("#chart").kendoChart({
        title: {
            test: "Risk Assessment"
        },
        seriesDefaults: {
            type: "donut"
        },
        dataSource: {
            transport: {
                read: {
                    url: "/dashboard/getall",
                    dataType: "json",
                    type: "GET"
                }
            },
            schema: {
                data: "chartData"
            },
            group: {
                field: "title"
            }
        },
        series: [
            {
                field: "value",
                categoryField: "title"
            }
        ]
    });

  3. Kendo UI is VS 2017 Ready
Back to Top