Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Kendo Chart - no data message

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"
            }
        });
    }
like image 842
Andy E Avatar asked Apr 16 '26 10:04

Andy E


1 Answers

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

like image 198
CuriousSuperhero Avatar answered Apr 19 '26 18:04

CuriousSuperhero



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!