如何显示谷歌条形图，而不是数据表

这是asp.net编码网站页面编码页面在这里我插入JavaScript并通过ID检索数据我只设置高度和重量

<h1 class="style2"> Channeling Paid and UnPaid Monthly</h1>
   <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>  
    <asp:GridView ID="Ch_Data_Monthly" runat="server" BackColor="White" 
    BorderColor="#3366CC" BorderStyle="None" BorderWidth="1px" CellPadding="4">
    </asp:GridView>
    <asp:Literal ID="ltScriptsDataMonthly" runat="server"></asp:Literal>  
    <div id="Ch_BarChart_Monthly" style="width: 900px; height: 300px;" /> 

这是c#代码。我正在使用SQL Server R2存储过程获取数据。

我有连接我的数据库通过web配置称为"connectionString"

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data.SqlClient;
using System.Configuration;
using System.Text;
using System.Data;
using System.Web.Security;
public partial class _Default : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        {
            // Monthly Bind Gridview  
            Bind_Ch_Data_Monthly();
            // Monthly Bind Charts  
            BindChart_Monthly();
        }
    }
    //Monthly Channeling Paid and UnPaid 
    private void Bind_Ch_Data_Monthly()
    {
        Ch_Data_Monthly.DataSource = GetChartDataMonthly();
        Ch_Data_Monthly.DataBind();
    }

    private void BindChart_Monthly()
    {
        DataTable dsChartDataMonthly = new DataTable();
        StringBuilder strScriptDataMonthly = new StringBuilder();
        try
        {
            dsChartDataMonthly = GetChartDataMonthly();
            strScriptDataMonthly.Append(@"<script type='text/javascript'>  
                     google.charts.load('visualization', '1', {packages: ['bar']});
                       google.charts.setOnLoadCallback(drawChart);</script>  
                    <script type='text/javascript'>  
                    function drawChart() {   
                    var data = google.visualization.arrayToDataTable([  
                    ['Months', 'Paid', 'UnPaid'],");
            foreach (DataRow row in dsChartDataMonthly.Rows)
            {
                strScriptDataMonthly.Append("['" + row["Months"] + "'," + row["Paid"] + "," + row["UnPaid"] + "],");
            }
            strScriptDataMonthly.Remove(strScriptDataMonthly.Length - 1, 1);
            strScriptDataMonthly.Append("]);");
            strScriptDataMonthly.Append("var options = {chart: {title: 'Company Performance',subtitle: 'Sales, Expenses, and Profit: 2014-2017',}};");
            strScriptDataMonthly.Append("var chart = new google.charts.Bar(document.getElementById(document.getElementById('Ch_BarChart_Monthly'));  chart.draw(data, options); } google.setOnLoadCallback(drawChart)");
            strScriptDataMonthly.Append(" </script>");
            ltScriptsDataMonthly.Text = strScriptDataMonthly.ToString();
        }
        catch
        {
        }
        finally
        {
            dsChartDataMonthly.Dispose();
            strScriptDataMonthly.Clear();
        }
    }
    /// <summary>  
    /// fetch data from mdf file saved in app_data  
    /// </summary>  
    /// <returns>DataTable</returns>  
    private DataTable GetChartDataMonthly()
    {
        DataSet dsData = new DataSet();
        try
        {
            SqlConnection sqlCon = new SqlConnection(ConfigurationManager.ConnectionStrings["connectionString"].ConnectionString);
            SqlDataAdapter sqlCmd = new SqlDataAdapter("DSB_Ch_MonthWise_Paid&UnPaid", sqlCon);
            sqlCmd.SelectCommand.CommandType = CommandType.StoredProcedure;
            sqlCon.Open();
            sqlCmd.Fill(dsData);
            sqlCon.Close();
        }
        catch
        {
            throw;
        }
        return dsData.Tables[0];
    }
}