In this article I’m going
to explain how to create Google motion chart with database in ASP.NET.
Google motion chart is an
interactive and highly featured chart which is used to visualize data with
animation. It’s used to explore several indicators over time. Motion chart is a
combinations of Bubble chart, Column chart and Line chart. We can choose custom
colors after chart rendered on browser.
Here I’ll explain how to
create Google motion chart with database. First we have to create table and
enter some valid data.
Table
design:
|
Column
|
Datatype
|
|
Id
|
int
|
|
product
|
varchar(50)
|
|
date
|
varchar(10)
|
|
sales
|
int
|
|
expenses
|
Int
|
|
location
|
varchar(50)
|
Sample
data:
|
id
|
product
|
date
|
sales
|
expenses
|
location
|
|
1
|
Apples
|
1988,0,1
|
1000
|
300
|
East
|
|
2
|
Oranges
|
1988,0,1
|
1150
|
200
|
West
|
|
3
|
Bananas
|
1988,0,1
|
300
|
250
|
West
|
|
4
|
Apples
|
1989,6,1
|
1200
|
400
|
East
|
|
5
|
Bananas
|
1989,6,1
|
788
|
617
|
West
|
|
6
|
Oranges
|
1989,6,1
|
750
|
150
|
West
|
Data Format:
The first column must be of type 'string' and contain
the entity names (e.g., "Apples", "Oranges",
"Bananas" in the example above).
The second column must contain time values. Time
can be expressed in any of the following formats:
Year - Column type: 'number'. Example: 2008.
Month, day and year - Column type: 'date'; values
should be javascript Date instances.
Week number- Column type: 'string'; values should use the pattern
YYYYWww, which conforms to ISO 8601. Example: '2008W03'.
Quarter - Column type: 'string'; the values should have the
pattern YYYYQq, which conforms to ISO
8601. Example: '2008Q3'.
Subsequent columns can be of type 'number' or
'string'. Number columns will show up in the dropdown menus for X, Y, Color and
Size axes. String columns will only appear in the dropdown menu for Color. See
the example above.
Designer
source code:
<%@ 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 id="Head1" runat="server">
<title>Google motion chart using Google Visualization</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="chart_div"></div>
</form>
</body>
</html>
C#
code:
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 _Default :
System.Web.UI.Page
{
StringBuilder
str = new StringBuilder();
//Get connection
string from web.config
SqlConnection
conn = new SqlConnection("Data source=localhost; Initial catalog=Demo;
Integrated Security=True");
protected void Page_Load(object
sender, EventArgs e)
{
if
(Page.IsPostBack == false)
{
BindChart();
}
}
private DataTable GetData()
{
DataTable
dt = new DataTable();
string
cmd = "select * from Product";
SqlDataAdapter
adp = new SqlDataAdapter(cmd,
conn);
adp.Fill(dt);
return
dt;
}
private void BindChart()
{
DataTable
dt = new DataTable();
try
{
dt = GetData();
str.Append(@"<script
type='text/javascript'> google.load('visualization', '1', {'packages':['motionchart']});
google.setOnLoadCallback(drawChart); function drawChart() { var data =
new google.visualization.DataTable();
data.addColumn('string', 'product');
data.addColumn('date', 'date');
data.addColumn('number', 'sales');
data.addColumn('number', 'expenses');
data.addColumn('string', 'location');
data.addRows([");
int
count = dt.Rows.Count - 1;
for
(int i = 0; i <= count; i++)
{
if
(i == count)
{
str.Append("['" + dt.Rows[i]["product"].ToString() + "', new Date (" + dt.Rows[i]["date"].ToString() + "), " + dt.Rows[i]["sales"].ToString() + ", " + dt.Rows[i]["expenses"].ToString() + ", '" + dt.Rows[i]["location"].ToString() + "']");
}
else
{
str.Append("['" + dt.Rows[i]["product"].ToString() + "', new Date (" + dt.Rows[i]["date"].ToString() + "), " + dt.Rows[i]["sales"].ToString() + ", " + dt.Rows[i]["expenses"].ToString() + ", '" + dt.Rows[i]["location"].ToString() + "'],");
}
}
str.Append("
]);");
str.Append(" var chart = new
google.visualization.MotionChart(document.getElementById('chart_div'));");
str.Append("
chart.draw(data, {width: 600, height:300}); }");
str.Append("</script>");
lt.Text = str.ToString();
}
catch(Exception ex)
{
}
}
}
For more details about google motion chart please
follow this link
https://developers.google.com/chart/interactive/docs/gallery/motionchart