Simple example of a Google Pie Chart
Hello everyone welcome ,
If you want to create a Google PIE Chart then watch my video and follow my blogs ...
 |
| Google Pei Chart |
-----------------------------------------------------------------------------------------------------------------------
Watch my Latest Video on Youtube for creating Pie Chart
Watch my Latest Video on Youtube for creating Pie Chart
Steps involve creating Pie Chart in ASP.NET:
Steps-1:
Open Visual Studio 2010 or Latest Version, Create a website project ...
Step-2:
Add one webform and give form name as "piechart.aspx"
 |
| Add website name as PieChart.aspx |
Step-3:
In Head section write following code....
<head runat="server">
<title> Google PieChart </title>
<!--Load the AJAX API--->
<!--Load the AJAX API-->
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script>
<script type="text/javascript">
// Load the Visualization API and the corechart package.
google.charts.load('current', { 'packages': ['corechart'] });
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['India', 4],
['America', 1],
['Zapan', 1],
['Russia', 2],
['SriLanka', 1],
['Canada', 1]
]);
// Set chart options
var options = { 'title': 'How many Viewers watching my videos',
'width': 400,
'height': 300
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
Step-4:
in Body section write Div tag.
<body>
<form id="form1" runat="server">
<!---Add DIV that will load pie chart--->
<div id="chart_div">
</div>
</form>
</body>
Step-5:
Connect Your PC or Laptop with Internet so its can store the API file in browser buffer.And Run "PieChart.aspx" webform in browser
---------------------------------------------------------------------------
OUTPUT:-
_____________________________________________
<title> Google PieChart </title>
<!--Load the AJAX API--->
<!--Load the AJAX API-->
<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script>
<script type="text/javascript">
// Load the Visualization API and the corechart package.
google.charts.load('current', { 'packages': ['corechart'] });
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(drawChart);
// Callback that creates and populates a data table,
// instantiates the pie chart, passes in the data and
// draws it.
function drawChart() {
// Create the data table.
var data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['India', 4],
['America', 1],
['Zapan', 1],
['Russia', 2],
['SriLanka', 1],
['Canada', 1]
]);
// Set chart options
var options = { 'title': 'How many Viewers watching my videos',
'width': 400,
'height': 300
};
// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
Step-4:
in Body section write Div tag.
<body>
<form id="form1" runat="server">
<!---Add DIV that will load pie chart--->
<div id="chart_div">
</div>
</form>
</body>
Step-5:
Connect Your PC or Laptop with Internet so its can store the API file in browser buffer.And Run "PieChart.aspx" webform in browser
---------------------------------------------------------------------------
OUTPUT:-
_____________________________________________
 |
| Google pei chart |
No comments:
Post a Comment