How to Create Charts with the Google chart API in asp.net c#

Introduction: Hello Friends ,in this article i will explain that how to Create Charts with the google chart API in asp.net c# , a pie chart . This very helpfull actual for software developer .

this is a chart which is showing number of male or female as per given age.

Now Create a new website From file menu:

Create Empty Website:

Now Add New .aspx page:

Now Type given Code in source :

Default.aspx(Source):

<%@ 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">

google.load('visualization', '1.1', { packages: ['controls'] });

</script>

function drawVisualization(dataValues, chartTitle, columnNames, categoryCaption) {

if (dataValues.length < 1)

return;

var data = new google.visualization.DataTable();

data.addColumn('string', columnNames.split(',')[0]);

data.addColumn('number', columnNames.split(',')[1]);

data.addColumn('string', columnNames.split(',')[2]);

data.addColumn('number', columnNames.split(',')[3]);

for (var i = 0; i < dataValues.length; i++) {

data.addRow([dataValues[i].ColumnName, dataValues[i].Value1, dataValues[i].Value2, dataValues[i].Value3]);

}

var categoryPicker = new google.visualization.ControlWrapper({

'controlType': 'CategoryFilter',

'containerId': 'CategoryPickerContainer',

'options': {

'filterColumnLabel': columnNames.split(',')[2],

'ui': {

'labelStacking': 'horizontal',

'allowTyping': false,

'allowMultiple': false,

'caption': categoryCaption,

'label': columnNames.split(',')[2]

}

});

var pie = new google.visualization.ChartWrapper({

'chartType': 'PieChart',

'containerId': 'PieChartContainer',

'options': {

'width': 600,

'height': 350,

'legend': 'right',

'title': chartTitle,

'chartArea': { 'left': 50, 'top': 15, 'right': 0, 'bottom': 0 },

'pieSliceText': 'label',

'tooltip': { 'text': 'percentage' }

'view': { 'columns': [0, 1] }

});

var table = new google.visualization.ChartWrapper({

'chartType': 'Table',

'containerId': 'TableContainer',

'options': {

'width': '300px'

}

});

var slider = new google.visualization.ControlWrapper({

'controlType': 'NumberRangeFilter',

'containerId': 'SliderContainer',

'options': {

'filterColumnLabel': columnNames.split(',')[3],

'ui': { 'labelStacking': 'horizontal' }

}

});

new oogle.visualization.Dashboard(document.getElementById
('PieChartExample')).bind([categoryPicker, slider], [pie, table]).draw(data);

}

</script>

</head>

<body>

<div>

<div style="font-size:50px;" align="center">Google-pi chart Example</div></br></br></br>

<table>

<td>

</div></br>

</div>

</td>

</tr>

<tr>

<td>

</div>

</div>

</td>

</tr>

</table>

</div>

</form>

</body>

</html>

Default.aspx.cs:

using System;

using System.Collections.Generic;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.Script.Serialization;

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (!IsPostBack)

{

List<Items> dataList = new List<Items>();

dataList.Add(new Items("Column 1", 100, "Male", 25));

dataList.Add(new Items("Column 2", 150, "Male", 37));

dataList.Add(new Items("Column 3", 250, "Female", 25));

dataList.Add(new Items("Column 4", 400, "Female", 35));

dataList.Add(new Items("Column 5", 450, "Male", 35));

dataList.Add(new Items("Column 6", 460, "Female", 26));

dataList.Add(new Items("Column 7", 470, "Female", 30));

dataList.Add(new Items("Column 8", 500, "Male", 31));

dataList.Add(new Items("Column 9", 550, "Male", 30));

dataList.Add(new Items("Column 10", 600, "Female", 33));

JavaScriptSerializer jss = new JavaScriptSerializer();

ClientScript.RegisterStartupScript(this.GetType(), "TestInitPageScript",

string.Format("<script type=\"text/javascript\">drawVisualization({0},'{1}','{2}','{3}');</script>",

jss.Serialize(dataList),

"Text Example",

"Name,Value,Gender,Age",

"--Select--"));

}

public class Items

{

#region Internal Members

private string _ColumnName = "";

private double _Value1 = 0;

private string _Value2 = null;

private int _Value3 = 0;

#endregion

#region Public Properties

public string ColumnName

{

get { return _ColumnName; }

set { _ColumnName = value; }

}

public double Value1

{

get { return _Value1; }

set { _Value1 = value; }

}

public string Value2

{

get { return _Value2; }

set { _Value2 = value; }

}

public int Value3

{

get { return _Value3; }

set { _Value3 = value; }

}

#endregion

#region Constructors

public Items(string columnName, double value1, string value2, int value3)

{

_ColumnName = columnName;

_Value1 = value1;

_Value2 = value2;

_Value3 = value3;

}

#endregion

}

Now run this program:

You will see like this

Select Option from Dropdownlist:

Change Age using slider :

Notes :

" I hope you have created your Google chart API in asp.net application successfully and If you like my work you can appreciate by leaving your comments and updates ".