Populate Google Charts from Database in ASP.Net using jQuery AJAX

Dear all,

I am trying to implement google charts using sql database. I can not get the code to display charts on the client-side, as its currently blank page.

I tried changing the str.append string but I still can not get the data to display on the client-side.

<%@ Page Title="" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true" CodeFile="Charts_07.aspx.cs" Inherits="Charts_07" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" Runat="Server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" Runat="Server">
<title>Multi series Line chart using Google Visualization</title>
     <script type="text/javascript" src="https://www.google.com/jsapi"></script>


    
  <div>
        <asp:Literal ID="lt" runat="server"></asp:Literal>
    </div>
    <div id="chart_div"></div>

</asp:Content>

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Data;
using System.Data.SqlClient;
using System.Text;
using System.Configuration;

public partial class Charts_07 : System.Web.UI.Page
{
    StringBuilder str = new StringBuilder();
    //Get connection string from web.config
    SqlConnection conn = new SqlConnection("Data Source=###\\SQLEXPRESS;Initial Catalog=Test;Persist Security Info=True;User ID=##;Password=####");

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            chart_bind();
        }
    }

    private DataTable GetData()
    {
        DataTable dt = new DataTable();
        conn.Open();
        string cmd = "select * from data";
        SqlDataAdapter adp = new SqlDataAdapter(cmd, conn);
        adp.Fill(dt);
        conn.Close();
        return dt;
    }

    private void chart_bind()
    {
        DataTable dt = new DataTable();
        try
        {
            dt = GetData();

            str.Append(@"<script type=text/javascript> google.load( *visualization*, *1*, {packages:[*corechart*]});
            google.setOnLoadCallback(drawChart);
            function drawChart() {
            var data = new google.visualization.DataTable();
            data.addColumn('string', 'Id');
            data.addColumn('number', 'cover');
        
            
 
            data.addRows(" + dt.Rows.Count + ");");

            Int32 i;

            for (i = 0; i <= dt.Rows.Count - 1; i++)
            {
                //str.Append("data.setValue( " + i + "," + 0 + "," + "'" + dt.Rows[i]["id"].ToString() + "');");
                //str.Append("data.setValue(" + i + "," + 3 + "," + dt.Rows[i]["cover"].ToString() + ") ;");
                //str.Append("data.setValue(" + i + "," + 2 + "," + dt.Rows[i]["talk"].ToString() + ") ;");
                //str.Append("data.setValue(" + i + "," + 3 + "," + dt.Rows[i]["expences"].ToString() + ");");

                str.Append("data.setValue(" + i + "," + 0 + "," + dt.Rows[i]["Id"].ToString() + ");");
               str.Append("data.setValue(" + i + "," + 1 + ",'" + dt.Rows[i]["cover"].ToString() + "');");
                //str.Append("data.setValue(" + i + "," + 2 + ",'" + dt.Rows[i]["sales"].ToString() + "');");

            }

            str.Append("   var chart = new google.visualization.LineChart(document.getElementById('chart_div'));");
            str.Append(" chart.draw(data, {width: 660, height: 300, title: 'Company Performance',");
            str.Append("hAxis: {title: 'Year', titleTextStyle: {color: 'green'}}");
            str.Append("}); }");
            str.Append("</script>");
            lt.Text = str.ToString().TrimEnd(',').Replace('*', '"');
        }
        catch
        { }
    }

}

database schema, I am using for this task.:

there are null cells in column cover and talks. -- could this be the reason why the chart rendering is falling?

INSERT INTO [dbo].[data]
           ([Id]
           ,[name]
           ,[data]
           ,[cover]
           ,[talk]
           ,[date])
     VALUES
           (<Id, int,>
           ,<name, varchar(50),>
           ,<data, varchar(50),>
           ,<cover, varchar(50),>
           ,<talk, varchar(50),>
           ,<date, varchar(50),>)
GO

Any assistance would be very much appreciated.

Many thanks for your time and help.