connectseekers.com

Saturday, 5 July 2014

How To Create Dynamic Google Column Chart In an Asp.Net MVC Using C# and Javascript

7/05/2014 - By Pranav Singh 10


In this article I will show you how you can create dynamic Google column chart in an asp.net MVC application using c#. In this I will show you how you can pass dynamic data to a google chart and how you can prepare data for google chart in JavaScript. This article you can use in your MVC2MVC3MVC4MVC5 application.
 So for this article first we will create a new mvc application. In this first we will create a new model class.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;

namespace ChartInMvcApplication.Models
{
    public class ProductModel
    {
        public string YearTitle { getset; }
        public string SaleTitle { getset; }
        public string PurchaseTitle { getset; }
        public Product ProductData { getset; }
    }
    public class Product
    {
        public string Year { getset; }
        public string Purchase { getset; }
        public string Sale { getset; }
    }
}

Now we will create controller in our application. And add the below code in our controller.

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
using ChartInMvcApplication.Models;

namespace ChartInMvcApplication.Controllers
{
    public class HomeController : Controller
    {
        //
        // GET: /Home/

        public ActionResult Index()
        {
            ProductModel objProductModel = new ProductModel();
            objProductModel.ProductData = new Product();
            objProductModel.ProductData = GetChartData();
            objProductModel.YearTitle = "Year";
            objProductModel.SaleTitle = "Sale";
            objProductModel.PurchaseTitle = "Purchase";
            return View(objProductModel);

        }
        /// <summary>
        /// Code to get the data which we will pass to chart
        /// </summary>
        /// <returns></returns>
        public Product GetChartData()
        {
            Product objproduct = new Product();
            /*Get the data from databse and prepare the chart record data in string form.*/
            objproduct.Year = "2009,2010,2011,2012,2013,2014";
            objproduct.Sale = "2000,1000,3000,1500,2300,500";
            objproduct.Purchase = "2100,1400,2900,2400,2300,1500";
            return objproduct;
        }
    }
}

Please check the below code which we have used for preparing the data for chart control.

        /// <summary>
        /// Code to get the data which we will pass to chart
        /// </summary>
        /// <returns></returns>
        public Product GetChartData()
        {
            Product objproduct = new Product();
            /*Get the data from databse and prepare the chart record data in string form.*/
            objproduct.Year = "2009,2010,2011,2012,2013,2014";
            objproduct.Sale = "2000,1000,3000,1500,2300,500";
            objproduct.Purchase = "2100,1400,2900,2400,2300,1500";
            return objproduct;
        }

For chart we will prepare data in string form. And pass it to view. Now we will prepare view. In our view we will add the below code.

@model ChartInMvcApplication.Models.ProductModel
@{
    ViewBag.Title = "How To Create Dynamic Google Column Chart In an Asp.Net MVC Using C# and Javascript";
  
}
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">

    google.load("visualization""1", { packages: ["corechart"] });
    google.setOnLoadCallback(drawChart);

    function drawChart() {
        // Create and populate the data table.
        var years = [@Model.ProductData.Year];
        var sales = [@Model.ProductData.Sale];
        var Purchase = [@Model.ProductData.Purchase];
     
        var data = new google.visualization.DataTable();
        data.addColumn('string''@Model.YearTitle');
        data.addColumn('number''@Model.SaleTitle');
        data.addColumn('number''@Model.PurchaseTitle');
        for (i = 0; i < years.length; i++) {
            data.addRow([years[i].toString(), sales[i], Purchase[i]]);
        }
        var options = {
            title: 'Sale and Purchase Compare',
            hAxis: { title: '@Model.YearTitle', titleTextStyle: { color: 'red'} }
        };

        var chart = newgoogle.visualization.ColumnChart(document.getElementById('chartdiv'));
        chart.draw(data, options);
    }
</script>
<div id="chartdiv" style="width: 500px; height: 300px;">
</div>

In our JavaScript code we will assign the model value to the JavaScript function. Now we have done we will run the page to view output.



About the Author

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Get Updates

Subscribe to our e-mail newsletter to receive updates.

Share This Post

10 comments:

  1. hii....very helpful post thanks

    ReplyDelete
  2. Excellent tip on combining the powerful Javascript base Google Charts with C#!

    ReplyDelete
    Replies
    1. Thanks for your valuable comment. Happy coding :)

      Delete
  3. Ok .. Not Too Good..

    ReplyDelete
  4. i follow everything, still its showing blank page :(
    i'm placing the graph on my modal. any suggestion?

    ReplyDelete
    Replies
    1. Please download the demo and then try it. If demo works on that case please compare bot the code.

      Delete
    2. Give a space between new and google.visualization.ColumnChart in the view. I guess that should solve the issue.

      Delete
  5. How to add print and export option

    ReplyDelete

Please let me know your view

Free Ebooks


About Us

We are the group of people who are expertise in different Microsoft technology like Asp.Net,MVC,C#.Net,VB.Net,Windows Application,WPF,jQuery,Javascript,HTML. This blog is designed to share the knowledge.

Contact Us

For writing article in this website please send request by your

GMAIL ID: dotnetpools@gmail.com
Email Id : contact@aspdotnet-pools.com

Bugs and Suggestions

As we all know that this website is for sharing knowledge and providing proper solution. So while reading the article is you find any bug or if you have any suggestion please mail us at contact@aspdotnet-pools.com.

Partners


Top jQuery Plugins

Global Classified : Connectseekers.com
© 2014
back to top