| Hide demo | Download |
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:
<!--[if !supportLists]-->· <!--[endif]-->line,
<!--[if !supportLists]-->· <!--[endif]-->area,
<!--[if !supportLists]-->· <!--[endif]-->bars,
<!--[if !supportLists]-->· <!--[endif]-->candlesticks
<!--[if !supportLists]-->· <!--[endif]-->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=" 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
| View demo | Download |
- See more at: http://www.dotnetfox.com/articles/google-combo-chart-example-with-database-in-Asp-Net-1099.aspx#sthash.l7cMEOek.dpuf