1
Answer

binding google charts with database

missy a

missy a

10y
1.9k
1
hello all, 

I am novice developer who is trying to implement google charts to read of the sql database.  I can not get the charts to render on the page, at the moment.  

aspx

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

<%@ Register Assembly="System.Web.DataVisualization, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI.DataVisualization.Charting" TagPrefix="asp" %>

<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>

cs. class

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=MISBAH\\SQLEXPRESS;Initial Catalog=Test;Persist Security Info=True;User ID=ma;Password=misbah");

    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 + "," + 1 + "," + 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]["sales"].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:
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 or help would be very much appreciated.  



Answers (1)