In this article I’m going to explain how to create
Google combo chart example with database in ASP.NET.
Google charts allows you to create a chart that lets you render each series as a different
marker type from the following list:
·
line,
·
area,
·
bars,
·
candlesticks
·
stepped area.
To assign a default marker type for series, specify the seriesType property. Use the series property to specify properties of
each series individually.
Following
screen shots are demonstrate various marker type used to create different combo
charts.
1. seriesType: line – series: area
2. seriesType: area – series: line
3. seriesType: bars – series: area
Sample
data:
|
id
|
Month
|
Bolivia
|
Ecuador
|
Madagascar
|
Average
|
|
1
|
2004/05
|
165
|
938
|
522
|
614.6
|
|
2
|
2005/06
|
135
|
1120
|
599
|
682
|
|
3
|
2006/07
|
157
|
1167
|
587
|
623
|
|
4
|
2007/08
|
139
|
1110
|
615
|
609.4
|
|
5
|
2008/09
|
136
|
691
|
629
|
569.6
|
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>
<title>Google
Combo chart</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 id="chart_div" style="width: 660px; height: 400px;"></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;
public partial class _Default :
System.Web.UI.Page
{
SqlConnection
conn = new SqlConnection("Data source=localhost; Initial catalog=Demo;
Integrated security=true");
protected void Page_Load(object
sender, EventArgs e)
{
BindChart();
}
private DataTable GetData()
{
DataTable
dt = new DataTable();
string
cmd = "select * from Production";
SqlDataAdapter
adp = new SqlDataAdapter(cmd,
conn);
adp.Fill(dt);
return
dt;
}
private void BindChart()
{
DataTable
dt = new DataTable();
StringBuilder
str = new StringBuilder();
try
{
dt = GetData();
str.Append(@"
<script type='text/javascript'>
google.load('visualization', '1', {packages: ['corechart']});
</script>
<script type='text/javascript'>
function drawVisualization() {
var
data = google.visualization.arrayToDataTable([
['Month', 'Bolivia', 'Ecuador', 'Madagascar', 'Average'],");
int
count=dt.Rows.Count - 1;
for
(int i = 0; i <= count; i++)
{
if
(count == i)
{
str.Append("['" + dt.Rows[i]["Month"].ToString() + "'," + dt.Rows[i]["Bolivia"].ToString() + "," + dt.Rows[i]["Ecuador"].ToString() + ","
+ dt.Rows[i]["Madagascar"].ToString()
+ "," + dt.Rows[i]["Average"].ToString() + "]]);");
}
else
{
str.Append("['" + dt.Rows[i]["Month"].ToString() + "'," + dt.Rows[i]["Bolivia"].ToString() + "," + dt.Rows[i]["Ecuador"].ToString() + ","
+ dt.Rows[i]["Madagascar"].ToString()
+ "," + dt.Rows[i]["Average"].ToString() + "],");
}
}
str.Append("var
options = { title : 'Monthly Coffee Production by Country', vAxis: {title:
'Cups'}, hAxis: {title: 'Month'},
seriesType: 'bars', series: {3: {type: 'area'}} };");
str.Append("
var chart = new google.visualization.ComboChart(document.getElementById('chart_div')); chart.draw(data, options); }
google.setOnLoadCallback(drawVisualization);");
str.Append("
</script>");
lt.Text = str.ToString();
}
catch (Exception ex)
{ }
}
}
Please refer this link for further reference
https://developers.google.com/chart/interactive/docs/gallery/combochart