Go to Comments





Create a pie chart in mvc 4 using razor


Created: 23/01/2016 10:58:47 a.m.






Create a pie chart in mvc 4 using razor
(Using google pie chart)


In this tutorial i will create a simple pie chart using mvc 4 with razor views and google chart, you can find this chart library in this url: https://developers.google.com/chart/interactive/docs/quick_start

They give you a complete example on google page of how to use it in yours.

1) First of all create the master page/layout and add the RenderSection with name "JavaScript", this will allow us to add javascript to the page header in the views which implements this master page.



2) In the next step create a controller for the home folder, where index.cshtml is created, and add some simple DataTable with two columns, one for the name and the other for the quantity of that items, then add some rows, in this case i create just a static rows but you can use data base to select the data.



3) Go to google website where they show you how to use their chart:

I will put here the code from google website:

<html>
 
<head>
   
<!--Load the AJAX API-->
   
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
   
<script type="text/javascript">

     
// Load the Visualization API and the piechart package.
      google
.load('visualization', '1.0', {'packages':['corechart']});

     
// Set a callback to run when the Google Visualization API is loaded.
      google
.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([
         
['Mushrooms', 3],
         
['Onions', 1],
         
['Olives', 1],
         
['Zucchini', 1],
         
['Pepperoni', 2]
       
]);

       
// Set chart options
       
var options = {'title':'How Much Pizza I Ate Last Night',
                       
'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>

 
<body>
   
<!--Div that will hold the pie chart-->
   
<div id="chart_div"></div>
 
</body>
</html>

You can see that i put the googls script inside the Section that we created in the masterpage "JavaScript" this will add the script  to the header of the website from my view.

Execute the project to see if all works us we expect.



4) Finally replace the googls sample data with one we created in the controller.



5) Execute and see the result.



You can download the project here: Download




Comments: