Piechart using javascript and jquery from database in asp.net

Piechart using javascript and jquery from database in asp.net

3:30:00 PM

Description:-

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.

 Download Files:- Jquery.min.js, jsapi.js
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;
Umesh Patel

Related Posts

Next
« Prev Post
Previous
Next Post »

1 comments:

comments

Thanks for comments.....