-->

How to create Google column chart with animation on load using ASP.NET MVC4 & Jquery.

| | | | |


Introduction

In this post, I am going to explain, how to create Google column chart with animation on load using ASP.NET MVC4 & Jquery.

Steps :

Step - 1 : Create New Project.

Go to File > New > Project > Select asp.net MVC4 web application > Entry Application Name > Click OK > Select Internet Application > Select view engine Razor > OK

Step-2: Add a Database.

Go to Solution Explorer > Right Click on App_Data folder > Add > New item > Select SQL Server Database Under Data > Enter Database name > Add.

Step-3: Create table for get data for chart.

Open Database > Right Click on Table > Add New Table > Add Columns > Save > Enter table name > Ok.
In this example, I have used one tables as below


Step-4: Add Entity Data Model.

Go to Solution Explorer > Right Click on Project name form Solution Explorer > Add > New item > Select ADO.net Entity Data Model under data > Enter model name > Add.
A popup window will come (Entity Data Model Wizard) > Select Generate from database > Next >
Chose your data connection > select your database > next > Select tables > enter Model Namespace > Finish.

Step-5: Add a new Controller.

Go to Solution Explorer > Right Click on Controllers folder form Solution Explorer > Add > Controller > Enter Controller name > Select Templete "empty MVC Controller"> Add.

Step-6: Add new action into your controller for Get Method.

Here I have added "Column" Action into "GoogleChart" Controller. Please write this following code

  1.             public ActionResult Column()
  2.             {
  3.                 return View();
  4.             }
  5.

Step-7: Add view for the Action & design.

Right Click on Action Method (here right click on form action) > Add View... > Enter View Name > Select View Engine (Razor) > Check "Create a strong-typed view" > Select your model class > Add.

Step-8: Add jquery code for create google animated Chart.

Jquery Code 
  1.                <script>
  2.                     $(document).ready(function () {
  3.                         //Load Data Here
  4.                         var chartData = null;
  5.                         $.ajax({
  6.                             url: '/GoogleChart/GetSalesData',
  7.                             type: 'GET',
  8.                             dataType: 'json',
  9.                             data: '',
  10.                             success: function (d) {
  11.                                 chartData = d;
  12.                             },
  13.                             error: function () {
  14.                                 alert('Error!');
  15.                             }
  16.                         }).done(function () {
  17.                             drawChart(chartData);
  18.                         });
  19.                     });
  20.  
  21.                     function drawChart(d) {
  22.                         var chartData = d;
  23.                         var data = null;
  24.                         data = google.visualization.arrayToDataTable(chartData);
  25.  
  26.                         var view = new google.visualization.DataView(data);
  27.                         view.setColumns([0, {
  28.                             type: 'number',
  29.                             label: data.getColumnLabel(0),
  30.                             calc: function () { return 0; }
  31.                         }, {
  32.                             type: 'number',
  33.                             label: data.getColumnLabel(1),
  34.                             calc: function () { return 0; }
  35.                         }, {
  36.                             type: 'number',
  37.                             label: data.getColumnLabel(2),
  38.                             calc: function () { return 0; }
  39.                         }, {
  40.                             type: 'number',
  41.                             label: data.getColumnLabel(3),
  42.                             calc: function () { return 0; }
  43.                         }]);
  44.  
  45.                         var chart = new google.visualization.ColumnChart(document.getElementById('visualization'));
  46.                         var options = {
  47.                             title: 'Sales Report',
  48.                             legend: 'bottom',
  49.                             hAxis: {
  50.                                 title: 'Year',
  51.                                 format: '#'
  52.                             },
  53.                             vAxis: {
  54.                                 minValue: 0,
  55.                                 maxValue: 1000000,
  56.                                 title: 'Sales Amount'
  57.                             },
  58.                             chartArea: {
  59.                                 left:100, top: 50, width:'70%', height: '50%'
  60.                             },
  61.                             animation: {
  62.                                 duration: 1000
  63.                             }
  64.                         };
  65.  
  66.                         var runFirstTime = google.visualization.events.addListener(chart, 'ready', function () {
  67.                             google.visualization.events.removeListener(runFirstTime);
  68.                             chart.draw(data, options);
  69.                         });
  70.  
  71.                         chart.draw(view, options);
  72.                     }
  73.                     google.load('visualization', '1', { packages: ['corechart'] });
  74.                 </script>
  75.

Step-9: Add another new action into your controller for fetch json data for Chart.

Here I have added "GetSalesData" Action into "GoogleChart" Controller. Please write this following code

  1.             public JsonResult GetSalesData()
  2.             {
  3.                 List<SalesData> sd = new List<SalesData>();
  4.                 using (MyDatabaseEntities dc = new MyDatabaseEntities())
  5.                 {
  6.                     sd = dc.SalesDatas.OrderBy(a => a.Year).ToList();
  7.                 }
  8.  
  9.                 var chartData = new object[sd.Count + 1];
  10.                 chartData[0] = new object[]{
  11.                     "Year",
  12.                     "Electronics",
  13.                     "Book And Media",
  14.                     "Home And Kitchen"
  15.                 };
  16.                 int j = 0;
  17.                 foreach (var i in sd)
  18.                 {
  19.                     j++;
  20.                     chartData[j] = new object[] {i.Year, i.Electronics, i.BookAndMedia, i.HomeAndKitchen };
  21.                 }
  22.  
  23.                 return new JsonResult {Data = chartData, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
  24.             }
  25.
Complete View 
  1.             @{
  2.                 ViewBag.Title = "Column";
  3.             }
  4.  
  5.             <h2>Column Chart With Animation</h2>
  6.  
  7.             <br /> 
  8.             <div id="visualization" style="width:600px; height:300px">
  9.  
  10.             </div>
  11.  
  12.             <script type="text/javascript" src="https://www.google.com/jsapi"></script>
  13.             @section Scripts{
  14.                 <script>
  15.                     $(document).ready(function () {
  16.                         //Load Data Here
  17.                         var chartData = null;
  18.                         $.ajax({
  19.                             url: '/GoogleChart/GetSalesData',
  20.                             type: 'GET',
  21.                             dataType: 'json',
  22.                             data: '',
  23.                             success: function (d) {
  24.                                 chartData = d;
  25.                             },
  26.                             error: function () {
  27.                                 alert('Error!');
  28.                             }
  29.                         }).done(function () {
  30.                             drawChart(chartData);
  31.                         });
  32.                     });
  33.  
  34.                     function drawChart(d) {
  35.                         var chartData = d;
  36.                         var data = null;
  37.                         data = google.visualization.arrayToDataTable(chartData);
  38.  
  39.                         var view = new google.visualization.DataView(data);
  40.                         view.setColumns([0, {
  41.                             type: 'number',
  42.                             label: data.getColumnLabel(0),
  43.                             calc: function () { return 0; }
  44.                         }, {
  45.                             type: 'number',
  46.                             label: data.getColumnLabel(1),
  47.                             calc: function () { return 0; }
  48.                         }, {
  49.                             type: 'number',
  50.                             label: data.getColumnLabel(2),
  51.                             calc: function () { return 0; }
  52.                         }, {
  53.                             type: 'number',
  54.                             label: data.getColumnLabel(3),
  55.                             calc: function () { return 0; }
  56.                         }]);
  57.  
  58.                         var chart = new google.visualization.ColumnChart(document.getElementById('visualization'));
  59.                         var options = {
  60.                             title: 'Sales Report',
  61.                             legend: 'bottom',
  62.                             hAxis: {
  63.                                 title: 'Year',
  64.                                 format: '#'
  65.                             },
  66.                             vAxis: {
  67.                                 minValue: 0,
  68.                                 maxValue: 1000000,
  69.                                 title: 'Sales Amount'
  70.                             },
  71.                             chartArea: {
  72.                                 left:100, top: 50, width:'70%', height: '50%'
  73.                             },
  74.                             animation: {
  75.                                 duration: 1000
  76.                             }
  77.                         };
  78.  
  79.                         var runFirstTime = google.visualization.events.addListener(chart, 'ready', function () {
  80.                             google.visualization.events.removeListener(runFirstTime);
  81.                             chart.draw(data, options);
  82.                         });
  83.  
  84.                         chart.draw(view, options);
  85.                     }
  86.                     google.load('visualization', '1', { packages: ['corechart'] });
  87.                 </script>
  88.             }
  89.

Step-10: Run Application.


Download Application     Live Demo

How to create Google column chart with animation on load using ASP.NET MVC4 & Jquery.

Related Post:
  1. How to create Intensity Chart using MVC4 & Jquery
  2. How to create Google Combo chart with database data in ASP.NET
  3. How to create Google Column chart with database data in ASP.NET
  4. How to create google Bar chart with database data in ASP.NET
  5. How to create google line chart with database data in ASP.NET
  6. How to create google chart (pie) with database data in ASP.NET

Hello ! My name is Sourav Mondal. I am a software developer working in Microsoft .NET technologies since 2010.

I like to share my working experience, research and knowledge through my site.

I love developing applications in Microsoft Technologies including Asp.Net webforms, mvc, winforms, c#.net, sql server, entity framework, Ajax, Jquery, web api, web service and more.

Related Posts:

Subscribe to Newsletter

Get latest article about asp.net, mvc, jquery, web api, angularjs and much more straight into your INBOX for free. Just Enter your email address, Verify and join our Newsletter!