首页 > 代码库 > Google Combo Chart example with database in ASP.NET

Google Combo Chart example with database in ASP.NET

2024-07-01 23:03:49   223人阅读

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

 

  1. 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 = http://www.mamicode.com/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


联系
我们