Question

I'm using a Kendo Pie Chart and I want to configure this to display a message if there is no data to display. I am configuring the pie chart with the following js function - with the variable "JsPieChartDataSet" being a set of JSON formatted data.

Is there a property that can be set to display a message when no data exists?

function pieType() {
        /*Pie chart render*/
        $("#piechart").kendoChart
        ({
            theme: $(document).data("kendoSkin") || "metro",
            title: { visible: true, color: "black", margin: 0, text: JsBreakdownPieTitle },
            legend: { position: "bottom", margin: 0 },             
            seriesDefaults:
            {
                labels: {
                    template: "#= kendo.format('{0:P}', percentage)#",
                    font: "8pt Arial, Helvetica, sans-serif",
                    visible: true,
                    distance: 10
                },
                type: "pie"
            },
            series: JsPieChartDataSet,
            tooltip: {
                visible: true,
                format: "{0:N2} tCO2e",
                font: "10px Arial, Helvetica, sans-serif"
            }
        });
    }
Was it helpful?

Solution

Kendo Pie Chart does not have any build-in mechanism to display a message if there is no data.

You can hide the chart and display the message by yourself, if there is no data available. See example below.

HTML:

<div id="noDataNotification" style="display: none;">No data exists.</div>

JS:

if (JsPieChartDataSet.Items.Count == 0)
{
    yourPie.Visible = false;
    $("#noDataNotification").show();
}

PS. Similar question is discussed in Telerik forum: http://www.telerik.com/forums/no-data-message-pie-chart

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top