Display message(there is no data available) or empty graph for google pie chart if data is zero using asp.net web form

Question

Display message(there is no data available) or empty graph for google pie chart if data is zero using asp.net web form

Below is my script

<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('current', { packages: ['corechart'] });
</script>

<script type="text/javascript">

    $(document).ready(function () {

        // Load the Visualization API and the corechart package.
        google.charts.load('current', { 'packages': ['corechart'] });
        // Set a callback to run when the Google Visualization API is loaded.
        google.charts.setOnLoadCallback(drawChart);
        // Callback that creates and populates a data table,
        // instantiates the pie chart, passes in the data and
        // draws it.
        function drawChart() {
            // Create the data table.
            $.ajax({
                type: "POST",
                url: "add_claim.aspx/Fillgraph",
                data: '{}',
                contentType: "application/json; charset=utf-8",
                dataType: "json",
                success: function (r) {


                    if (r.d === null) {
                        document.getElementById('piechart').innerHTML = 'No data found.';
                        return;
                    }

                    var chartdata = new google.visualization.DataTable();
                    chartdata.addColumn('string', 'Topping');
                    chartdata.addColumn('number', 'Slices');

                    chartdata.addRows(r.d);


                    // Set chart options
                    var options = {
                        pieHole: 0.6,
                        legend: { position: 'bottom' },
                        width: '100%',
                        height: '100%',
                        pieSliceText: 'percentage',
                        colors: ['#1e93c6', '#d6563c', '#c79f49', '#ff9a00'],

                        chartArea: {
                            left: "3%",
                            top: "5%%",
                            height: "95%",
                            width: "94%"
                        }
                    };


                    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
                    chart.draw(chartdata, options);


                },


                failure: function (r) {
                   // alert(r.d);
                },
                error: function (r) {
                  //  alert(r.d);
                }
            });
        }

    })
</script>

Below is my code behind c#

[WebMethod]
public static List<object> Fillgraph()
{
    BusinessLogic bl = new BusinessLogic();
    BusinessObject bo = new BusinessObject();
    List<object> chartData = new List<object>();

    bo.Para1 = "1";//@ParaValues

    bo.Para2 = System.Web.HttpContext.Current.Session["UserId"].ToString();//@username
    bo.Para3 = System.Web.HttpContext.Current.Session["UniqueID"].ToString();//@username

    DataTable dt = bl.ACS_Get_Graphs(bo);

    if (dt.Rows.Count > 0)
    {
        if (dt.Rows[0]["Food"].ToString() != "")
        {
            chartData.Add(new object[] { "Food", Convert.ToInt32(dt.Rows[0]["Food"].ToString()) });
        }
        else
        {
            chartData.Add(new object[] { "Food", 0 });
        }
        if (dt.Rows[0]["LocalConveyance"].ToString() != "")
        {
            chartData.Add(new object[] { "Local conveyance", Convert.ToInt32(dt.Rows[0]["LocalConveyance"].ToString()) });
        }
        else
        {
            chartData.Add(new object[] { "Local conveyance", 0 });
        }
        if (dt.Rows[0]["Lodging"].ToString() != "")
        {
            chartData.Add(new object[] { "Lodging", Convert.ToInt32(dt.Rows[0]["Lodging"].ToString()) });
        }
        else
        {
            chartData.Add(new object[] { "Lodging", 0 });
        }
        if (dt.Rows[0]["MisExpences"].ToString() != "")
        {
            chartData.Add(new object[] { "Misc. Expences", Convert.ToInt32(dt.Rows[0]["MisExpences"].ToString()) });
        }
        else
        {
            chartData.Add(new object[] { "Misc. Expences", 0 });
        }

        if (dt.Rows[0]["Travelling"].ToString() != "")
        {
            chartData.Add(new object[] { "Travelling", Convert.ToInt32(dt.Rows[0]["Travelling"].ToString()) });
        }
        else
        {
            chartData.Add(new object[] { "Travelling", 0 });
        }

     return chartData;
    }
    else
    {
          return null;
    }


}

if Local conveyance=0 , Lodging=0 , Misc. Expences=0 and Travelling=0 then message should display there is no data availabe or show empty pie graph

I tried below example but not able to getting

How to display "No Data" message in the middle of chart area in column chart

Google Charts - No data available - Able to display a blank chart?

JavaScript Debugger Image

Answer 1

You could return null from the WebMethod if there was no data

if (dt.Rows.Count > 0)
{
    //rest of code
}
else
{
    return null;
}

Then check for null in the drawChart function at the top of success: function (r)

function drawChart() {
    $.ajax({
        type: "POST",
        url: "add_claim.aspx/Fillgraph",
        data: '{}',
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (r) {

            if (r.d === null) {
                document.getElementById('piechart').innerHTML = 'No data found.';
                return;
            }

            var chartdata = new google.visualization.DataTable();
            chartdata.addColumn('string', 'Topping');
            chartdata.addColumn('number', 'Slices');       

            //rest of javascript code

Answer 2

The answers you have placed correspond to a LineChart, in your example you are using a PieChart, try replacing this:

JS Code:

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('piechart'));
chart.draw(chartdata, options);

for this:

JS Code:

if (chartdata.getNumberOfRows() == 0) {

    var d = document.getElementById("piechart");

    d.innerHTML = "<p>Sorry, not info available</p>";

    // Custom style
    d.style.position = "relative";
    d.style.fontSize = "25px";

    d.style.right = "50%";
    d.style.left = "50%";

}
else {

    // Instantiate and draw our chart, passing in some options.
    var chart = new google.visualization.PieChart(document.getElementById('piechart'));
    chart.draw(chartdata, options);

}

References: how to change the text 'no data' in google pie chart