Thursday, 21 February 2019

How to create Google Pie Chart in ASP.NET?

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 ...
Pie Chart
Google Pei 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:-
_____________________________________________

Google pei chart


Thanks for watching My videos , hit like , subscribe our channel & don't forget to share with your friends









No comments:

Post a comment

Popular Posts