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.
<%@ 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>
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
{ }
}
}
Any assistance or help would be very much appreciated.