Google Combo Chart example with database in ASP.NET

最新推荐文章于 2024-06-15 21:40:09 发布

apple443322

最新推荐文章于 2024-06-15 21:40:09 发布

阅读量103

点赞数

文章标签：数据库 xhtml c#

原文链接：http://www.cnblogs.com/happy-Chen/p/3695871.html

版权

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:

· 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">

<head>

<title>Google Combo chart</title>

</head>

<body>

<div>

<asp:Literal ID="lt" runat="server" ></asp:Literal>

</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>

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("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

转载于:https://www.cnblogs.com/happy-Chen/p/3695871.html

apple443322

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Google Combo Chart example with database in ASP.NET

Hide demoDownloadIn this article I’m going to explain how to create Google combo chart example with database in ASP.NET. Google charts allows you to...
复制链接

扫一扫