Mohamed Soliman

Mohamed Soliman

  • 1.6k
  • 114
  • 826

display error message with google chart

Mar 28 2022 12:54 PM

Dears ,

i create google chart with dropdownlist  menu to select records from SQL DB and display to the chart depend on years , and its working fine no issue for that but when i am select year that dosnt have record it give me this error on chart 

'Data column(s) for axis #0 cannot be of type string×'

i need to display error message that (Unable to load chart as there is no record found for selected years ).

here is my code:-

<script type="text/javascript">
    google.load("visualization", "1", { packages: ["corechart"] });
    google.setOnLoadCallback(function () {
        // Draw Chart on DropDownList change.
        $("[id*=Drpyear1]").on("change", function () {
            drawChart3();
        });
        // Draw Chart on Button click.
        $("[id*=Drpyear1]").on("click", function () {
            drawChart3();
            return false;
        });
       });
    function drawChart3() {
        var years = $("[id*=Drpyear1] option:selected").val();
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetChartDataqntdv",
            data: "{years: '" + years + "'}",
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                var data = google.visualization.arrayToDataTable(r.d);  
                var chart = new google.visualization.ColumnChart($("#chart2")[0]);
                var options =
                {
                    title: years + ' Qanawat Development Montly Cost',
                    titlePosition: 'center',
                    titleTextStyle: { color: '39568e' },                   
                    //curveType: 'function',
                    bar: { groupWidth: "75%" },
                    legend: { position: 'none' },
                    colors: ['#b3891f'],
                    hAxis: {
              title: 'Months',
              titleTextStyle: {color: '#333'}
            },
          vAxis: {
            minValue: 0,
            title: "Cost",
            format: 'currency',
            explorer: {
              actions: ['dragToZoom', 'rightClickToReset'],
              keepInBounds: true,
              maxZoomIn: 1.0}
            },
                     isStacked: true
                };
                chart.draw(data, options);
            },
            failure: function (r) {
                alert(r.d);
            },
            error: function (r) {
                alert(r.d);
            }
        });
    }
</script>

C# code:

[WebMethod]
public static List<object> GetChartDatatest()
{
    string query = "select month , TMC as [Cost]";
    query += "From Months "
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    List<object> chartData = new List<object>();
    chartData.Add(new object[]
    {
    "month", "Cost"
    });
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand(query))
        {
            cmd.CommandType = CommandType.Text;
            cmd.Connection = con;
            //cmd.Parameters.AddWithValue("@Country", country);
            con.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    chartData.Add(new object[]
                {
                sdr["month"], sdr["Cost"]
                });
                }
            }
            con.Close();
            return chartData;
        }
    }
}

 


Attachment: snapshoot.rar

Answers (1)