This is a migrated thread and some comments may be shown as answers.

No Data message Pie chart

10 Answers 930 Views

Chart (HTML5)

This is a migrated thread and some comments may be shown as answers.

10 Answers, 1 is accepted

answered on 26 Apr 2013, 08:10 AM

Hide-Chart.zip

Hello Ramaka,

As the main idea of the RadHtmlChart is to do a data visualization, there is no need to show the chart without any series items. What you can do in case there is no data to be displayed, is to set the Visible="false" property, which will hide the chart:

BarSeries bar = new BarSeries();

Chart.PlotArea.Series.Add(bar);

if (bar.Items.Count == 0)

{

Chart.Visible = false;

}

In order to show an image or a text when the RadHtmlChart doesn't have any data, you can use a <asp:Panel> and add an Image or a Label to it. The following code snippet demonstrates this approach:

panelImage.Visible = true;

panelImage.BackImageUrl = "telerik.jpg";

//add text

Label label = new Label();

label.Text = "Welcome to our site";

label.BackColor = Color.White;

panelImage.Controls.Add(label);

I attach a sample page, which shows the methods for displaying an image - either adding it as an Image object or setting the BackImageUrl property of the <asp:Panel>. You could have a look at it for further clarification.

Regards,
Stamo Gochev
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.

answered on 19 Jun 2013, 08:03 PM

I have similar question but for ASP.Net MVC pie chart and column chart. If there isn't any data than instead of displaying blank chart I would like to display message like "no data available".

Following is the way I tried by calling databound method which get called after the data is bound. But how can I check whether the data is passed? or all values are zeros etc.

    .DataBinding(dataBinding => dataBinding
                .Ajax().Select("_GetPieChartData", "Dashboard")
        )

        .ClientEvents(events => events
                         .OnDataBound("onDataBound")
           )

    function onDataBound(e) {
// how can I check whether data is there or not.
    }

Or is there any other way out to set "no data" message for chart without any data or zero values.

thanks,

answered on 24 Jun 2013, 10:48 AM

Hello,

You can have a look at the following example which demonstrates how you can check if you have an empty datasource. You need to do 2 things in the OnDataBound:

//get the chart

var chart = $("#chart").data("kendoChart");

//check if the datasource is empty

if(chart.dataSource.data().length == 0) {

//do something

}

The example also demonstrates how you can set a message when you do not have any data in the Chart - just append a div with the text you like:

$('<div class="custom-overlay"><p id="message">Some Message Here</p></div>').appendTo("#chart");

Regards,
Stamo Gochev
Telerik