Hi,

Using below article i have created the example.

Google Column Chart example with database in ASP.Net using C# and VB.Net

HTML

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
    google.charts.load('current', { 'packages': ['corechart'] });
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
        $.ajax({
            type: "POST",
            url: "Default.aspx/GetChartData",
            data: '{}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: function (r) {
                var data = new google.visualization.DataTable();
                for (var i = 0; i < r.d[0].length; i++) {
                    data.addColumn('number', r.d[0][i]);
                }
                data.addColumn({ type: 'string', role: 'style' });
                data.addRows(r.d.length - 1);
                for (var i = 1; i < r.d.length; i++) {
                    for (var j = 0; j < r.d[0].length; j++) {
                        data.setCell(i - 1, j, r.d[i][j])
                    }
                    if (r.d[i][2] < 200) {
                        data.setCell(i - 1, r.d[0].length, 'color: red');
                    }
                    else if (r.d[i][2] > 200 && r.d[i][2] < 300) {
                        data.setCell(i - 1, r.d[0].length, 'color: green');
                    }
                    else {
                        data.setCell(i - 1, r.d[0].length, 'color: yellow');
                    }
                }
                var chart = new google.visualization.ColumnChart($("#chart")[0]);
                var options = {
                    title: 'Order Distribution',
                    width: 600,
                    height: 400,
                    bar: { groupWidth: "50%" },
                    legend: { position: "none" },
                    isStacked: false
                };
                chart.draw(data, options);
            },
            failure: function (r) {
                alert(r.d);
            },
            error: function (r) {
                alert(r.d);
            }
        });
    }
</script>
<div id="chart" style="width: 900px; height: 500px;">
</div>

Namespaces

C#

using System.Data;
using System.Web.Services;
using System.Configuration;
using System.Data.SqlClient;

Code

C#

[WebMethod]
public static List<object> GetChartData()
{
    string query = "SELECT DISTINCT CONVERT(VARCHAR(50),DATEPART(Year, OrderDate)) [Year],COUNT(OrderId) [TotalOrders],SUM(Freight/100) [Freight] FROM Orders GROUP BY DATEPART(Year, OrderDate)";
    string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    List<object> chartData = new List<object>();
    chartData.Add(new object[]
    {
            "Year","TotalOrders","Freight"//,"{type: 'string', role: 'style'}"
    });
    using (SqlConnection con = new SqlConnection(constr))
    {
        using (SqlCommand cmd = new SqlCommand(query))
        {
            cmd.CommandType = CommandType.Text;
            cmd.Connection = con;
            con.Open();
            using (SqlDataReader sdr = cmd.ExecuteReader())
            {
                while (sdr.Read())
                {
                    chartData.Add(new object[]
                    {
                        sdr["Year"], sdr["TotalOrders"], sdr["Freight"]//,"Red"
                    });
                }
            }
            con.Close();
            return chartData;
        }
    }
}

Screenshot