Home > ASP.Net > Create Chart from Database using Google API

Create Chart from Database using Google API


Hi all,

try this example to Create Chart from Database using Google API

1) Open SQL Server and create a new database called “ChartsDB”

2) Add new Table called “tblChart” with the following colomns

tblChart

 

3) Open VS 208 and create a new Website and add new Page, so your page will be like this


<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title></title>
 <script type="text/javascript" src="https://www.google.com/jsapi"></script>
</head>
<body>
 <form id="form1" runat="server">
 <div>
 <asp:Literal ID="lt" runat="server"></asp:Literal>
 </div>
 <div id="divLineChart"></div>
 </form>
</body>
</html>

and In code behind add the following :


SqlConnection Conn = new SqlConnection(System.Configuration.ConfigurationManager.ConnectionStrings["conn"].ConnectionString);
 StringBuilder str = new StringBuilder();
 protected void Page_Load(object sender, EventArgs e)
 {
 Conn.Open();
 if (!IsPostBack)
 {
 bindChart();
 }
 }
 private void bindChart()
 {
 SqlDataAdapter da = new SqlDataAdapter("select * from tblChart", Conn);
 DataTable dt = new DataTable();
 try
 {
 da.Fill(dt);
 // This data is coming from the sql server
 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', 'Year');
 data.addColumn('number', 'Sales');
 data.addColumn('number', 'Expenses');
 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]["year"].ToString() + "');");
 str.Append("data.setValue(" + i + "," + 1 + "," + dt.Rows[i]["sales"].ToString() + ") ;");
 str.Append(" data.setValue(" + i + "," + 2 + "," + dt.Rows[i]["expences"].ToString() + ");");
 }
 str.Append("var chart = new google.visualization.LineChart(document.getElementById('divLineChart'));");
 str.Append("chart.draw(data, {width: 650, height: 300, legend: 'bottom',is3D: false,title: 'Performance',");
 str.Append("vAxis: {title: 'Year', titleTextStyle: {color: 'green'}}");
 str.Append("}); }");
 str.Append("</script>");

lt.Text = str.ToString().TrimEnd(',').Replace('*', '"');
 Conn.Close();
 }
 catch
 { }
 finally
 { Conn.Close(); }
 }

Don’t forget to use the following Namespace

using System.Data;

using System.Data.SqlClient;
using System.Text;

Hope this helps

Good Luck

 

 

Advertisements
Categories: ASP.Net
  1. No comments yet.
  1. No trackbacks yet.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: