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.

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

            public ActionResult Column()
            {
                return View();
            }
        

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

               <script>
                    $(document).ready(function () {
                        //Load Data Here
                        var chartData = null;
                        $.ajax({
                            url: '/GoogleChart/GetSalesData',
                            type: 'GET',
                            dataType: 'json',
                            data: '',
                            success: function (d) {
                                chartData = d;
                            },
                            error: function () {
                                alert('Error!');
                            }
                        }).done(function () {
                            drawChart(chartData);
                        });
                    });

                    function drawChart(d) {
                        var chartData = d;
                        var data = null;
                        data = google.visualization.arrayToDataTable(chartData);

                        var view = new google.visualization.DataView(data);
                        view.setColumns([0, {
                            type: 'number',
                            label: data.getColumnLabel(0),
                            calc: function () { return 0; }
                        }, {
                            type: 'number',
                            label: data.getColumnLabel(1),
                            calc: function () { return 0; }
                        }, {
                            type: 'number',
                            label: data.getColumnLabel(2),
                            calc: function () { return 0; }
                        }, {
                            type: 'number',
                            label: data.getColumnLabel(3),
                            calc: function () { return 0; }
                        }]);

                        var chart = new google.visualization.ColumnChart(document.getElementById('visualization'));
                        var options = {
                            title: 'Sales Report',
                            legend: 'bottom',
                            hAxis: {
                                title: 'Year',
                                format: '#'
                            },
                            vAxis: {
                                minValue: 0,
                                maxValue: 1000000,
                                title: 'Sales Amount'
                            },
                            chartArea: {
                                left:100, top: 50, width:'70%', height: '50%'
                            },
                            animation: {
                                duration: 1000
                            }
                        };

                        var runFirstTime = google.visualization.events.addListener(chart, 'ready', function () {
                            google.visualization.events.removeListener(runFirstTime);
                            chart.draw(data, options);
                        });

                        chart.draw(view, options);
                    }
                    google.load('visualization', '1', { packages: ['corechart'] });
                </script>
            

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

            public JsonResult GetSalesData()
            {
                List<SalesData> sd = new List<SalesData>();
                using (MyDatabaseEntities dc = new MyDatabaseEntities())
                {
                    sd = dc.SalesDatas.OrderBy(a => a.Year).ToList();
                }

                var chartData = new object[sd.Count + 1];
                chartData[0] = new object[]{
                    "Year",
                    "Electronics",
                    "Book And Media",
                    "Home And Kitchen"
                };
                int j = 0;
                foreach (var i in sd)
                {
                    j++;
                    chartData[j] = new object[] {i.Year, i.Electronics, i.BookAndMedia, i.HomeAndKitchen };
                }

                return new JsonResult {Data = chartData, JsonRequestBehavior = JsonRequestBehavior.AllowGet };
            }
        

Complete View

            @{
                ViewBag.Title = "Column";
            }

            <h2>Column Chart With Animation</h2>

            <br /> 
            <div id="visualization" style="width:600px; height:300px">

            </div>

            <script type="text/javascript" src="https://www.google.com/jsapi"></script>
            @section Scripts{
                <script>
                    $(document).ready(function () {
                        //Load Data Here
                        var chartData = null;
                        $.ajax({
                            url: '/GoogleChart/GetSalesData',
                            type: 'GET',
                            dataType: 'json',
                            data: '',
                            success: function (d) {
                                chartData = d;
                            },
                            error: function () {
                                alert('Error!');
                            }
                        }).done(function () {
                            drawChart(chartData);
                        });
                    });

                    function drawChart(d) {
                        var chartData = d;
                        var data = null;
                        data = google.visualization.arrayToDataTable(chartData);

                        var view = new google.visualization.DataView(data);
                        view.setColumns([0, {
                            type: 'number',
                            label: data.getColumnLabel(0),
                            calc: function () { return 0; }
                        }, {
                            type: 'number',
                            label: data.getColumnLabel(1),
                            calc: function () { return 0; }
                        }, {
                            type: 'number',
                            label: data.getColumnLabel(2),
                            calc: function () { return 0; }
                        }, {
                            type: 'number',
                            label: data.getColumnLabel(3),
                            calc: function () { return 0; }
                        }]);

                        var chart = new google.visualization.ColumnChart(document.getElementById('visualization'));
                        var options = {
                            title: 'Sales Report',
                            legend: 'bottom',
                            hAxis: {
                                title: 'Year',
                                format: '#'
                            },
                            vAxis: {
                                minValue: 0,
                                maxValue: 1000000,
                                title: 'Sales Amount'
                            },
                            chartArea: {
                                left:100, top: 50, width:'70%', height: '50%'
                            },
                            animation: {
                                duration: 1000
                            }
                        };

                        var runFirstTime = google.visualization.events.addListener(chart, 'ready', function () {
                            google.visualization.events.removeListener(runFirstTime);
                            chart.draw(data, options);
                        });

                        chart.draw(view, options);
                    }
                    google.load('visualization', '1', { packages: ['corechart'] });
                </script>
            }
        

Step-10: Run Application.