A pie
chart that is rendered within the browser using SVG or VML. Displays
tooltips when hovering over slices.
Making a 3D Pie Chart
If you set the is3D
option to true, your pie chart will be drawn as though it has three dimensions:
is3D is false by default, so here we
explicitly set it to true:
Making a Donut Chart
A donut chart is a pie
chart with a hole in the center. You can create donut charts with the pieHole
option:
The pieHole option should be set to
a number between 0 and 1, corresponding to the ratio of radii between the hole
and the chart. Numbers between 0.4 and 0.6 will look best on most charts.
Values equal to or greater than 1 will be ignored, and a value of 0 will
completely shut your piehole.
You can't combine the pieHole and is3D
options; if you do, pieHole
will be ignored.
Note that Google Charts tries to
place the label as close to the center of the slice as possible. If you have a
donut chart with just one slice, the center of the slice may fall into the
donut hole. In that case, change the color of the label:
Rotating a Pie Chart
By default, pie charts begin with
the left edge of the first slice pointing straight up. You can change that with
the pieStartAngle
option:
Here, we
rotate the chart clockwise 100 degrees with an option of pieStartAngle: 100. (So chosen
because that particular angle happens to make the "Italian" label fit
inside the slice.)
Exploding a Slice
You can separate pie slices from
the rest of the chart with the offset property of the slices option:
To
separate a slice, create a slices
object and assign the appropriate slice number an offset
between 0 and 1. Below, we assign progressively larger offsets to slices 4
(Gujarati), 12 (Marathi), 14 (Oriya), and 15 (Punjabi):
Removing Slices
To omit a slice, change the color
to 'transparent':
We also
used the pieStartAngle to
rotate the chart 135 degrees, pieSliceText
to remove the text from the slices, and tooltip.trigger
to disable tooltips:
Slice Visibility
Threshold
You can set a value as the threshold for a pie
slice to render individually. This value corresponds to a fraction of the chart
(with the whole chart being of value 1). To set this threshold as a percentage
of the whole, divide the percentage desired by 100 (for a 20% threshold, the
value would be 0.2).
sliceVisibilityThreshold:
5/8 // This is equivalent to 0.625 or 62.5% of the chart.
Any slices smaller than this threshold will be
combined into a single "Other" slice, and will have the combined
value of all slices below the threshold.
Loading:-
The google.charts.load package
name is "corechart".
google.charts.load("current",{packages:["corechart"]});
The visualization's class name is google.visualization.PieChart.
var visualization = newgoogle.visualization.PieChart(container);
Create Table:-
CREATETABLE [dbo].[Suppliers](
[ID] [int] NOTNULL,
[CompanyName] [nvarchar](50)NOTNULL,
[Total Suppliers] [nvarchar](50)NOTNULL,
[Country] [nvarchar](50)NOTNULL,
[Popularity] [int] NULL
)ON [PRIMARY]
GO
Default.aspx:-
<!DOCTYPEhtmlPUBLIC"-//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 runat="server">
<title>Pie CHart</title>
<script src="JS/jquery.min.js" type="text/javascript"></script>
<script src="JS/jsapi.js" type="text/javascript"></script>
<script type="text/javascript">
google.load('visualization', '1', { packages: ['corechart'] });
</script>
<script type="text/javascript">
$(document).ready(function () {
$.ajax({
type: 'POST',
dataType: 'json',
contentType: 'application/json',
url: 'Chart.aspx/GetData',
data: '{}',
success:
function (response) {
drawVisualization(response.d);
}
});
})
function drawVisualization(dataValues) {
var data = newgoogle.visualization.DataTable();
data.addColumn('string', 'Column Name');
data.addColumn('number', 'Column Value');
for (vari = 0; i<dataValues.length; i++) {
data.addRow([dataValues[i].ColumnName, dataValues[i].Value]);
}
new google.visualization.PieChart(document.getElementById('visualization')).
draw(data, { title: "Totals Suppliers Chart" });
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="visualization" style="width: 600px; height: 350px;"></div>
</div>
</form>
</body>
</html>
Default.aspx.cs:-
[WebMethod]
public static List<Data>GetData()
{
SqlConnection conn = new SqlConnection("ConnectionString");
DataSet ds = new DataSet();
DataTable dt = newDataTable();
conn.Open();
string cmdstr = "select top 5 Country, COUNT(CompanyName) [Total Suppliers] from [Suppliers] group by Country";
SqlCommand cmd = new SqlCommand(cmdstr, conn);
SqlDataAdapter adp = new SqlDataAdapter(cmd);
adp.Fill(ds);
dt = ds.Tables[0];
List<Data> dataList = new List<Data>();
string cat = "";
int val = 0;
foreach (DataRow dr in dt.Rows)
{
cat = dr[0].ToString();
val = Convert.ToInt32(dr[1]);
dataList.Add(newData(cat, val));
}
return dataList;
}
public class Data
{
public string ColumnName = "";
public int Value = 0;
public Data(string columnName, int value)
{
ColumnName = columnName;
Value = value;
}
}
NameSpaces:-
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.Web.Services;
