This article will show you how to create a dynamic Histogram
Google Chart in asp.net MVC using C#.net, JavaScript. In this I will show you
country population in the Google Histogram chart using C#.net and JavaScript.
Some of my previous articles are as follows: Point
Chart in Asp.Net Using C#.Net and VB.Net, Pie
Chart in Asp.Net Using C#.Net and VB.Net, Dynamic
Google Scatter Chart In an Asp.Net MVC Using C# and Javascript, Line
Chart in Asp.Net Using C#.Net and VB.Net, Column
3D Chart in Asp.Net Using C#.Net and VB.Net, Point
Chart in Asp.Net Using C#.Net and VB.Net.
So for this article first we will create a new asp.net mvc
application and create model class file into your model folder. After adding
model class add the below code into your class file.
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
namespace ChartInMvcApplication.Models
{
public class CountryModel
{
public
string CountryTitle { get; set; }
public
string PopulationTitle { get; set; }
public
Country CountrytData { get; set; }
}
public class Country
{
public
string CountryName { get;
set; }
public
string Population { get;
set; }
}
}
|
Now in add a controller file into your controller folder.
After adding controller add the below code into your controller file.
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()
{
CountryModel
objProductModel = new CountryModel();
objProductModel.CountrytData = new Country();
objProductModel.CountrytData =
GetChartData();
objProductModel.CountryTitle = "Country";
objProductModel.PopulationTitle =
"Population";
return
View(objProductModel);
}
///
/// Code to get the data which we will pass to chart
///
public Country GetChartData()
{
Country objproduct = new Country();
/*Get the data from databse and prepare the chart record data in string form.*/
objproduct.CountryName = "India,America,SriLanka,Rushia,Japan,Pakistan";
objproduct.Population = "125000,30000,4500,80000,16000,90000";
return objproduct;
}
}
}
|
In above code in data section I have passed the string as
value. if you want data from DB on that case just pull data from DB and prepare
a string as shown format.
Now create a view for controller action and add the blow
code into it.
@model ChartInMvcApplication.Models.CountryModel
@{
ViewBag.Title = "Dynamic Histogram Google Chart in asp.net MVC using C#.net, JavaScript";
}
<script type="text/javascript"
src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization",
"1", {packages:["corechart"]});
google.setOnLoadCallback(drawRegionsMap);
function
drawRegionsMap() {
//
Create and populate the data table.
var
country = '@Model.CountrytData.CountryName';
//Pereparing
string into array
var
countryarray=country.split(',');
var
population = [@Model.CountrytData.Population];
var
data = new google.visualization.DataTable();
data.addColumn('string', '@Model.CountryTitle');
data.addColumn('number', '@Model.PopulationTitle');
for
(i = 0; i < countryarray.length; i++) {
data.addRow([countryarray[i].toString(), population[i]]);
}
var
options = {
title: 'Population
of country',
legend: { position: 'none' },
};
var
chart = new
google.visualization.Histogram(document.getElementById('regions_div'));
chart.draw(data, options);
}
</script>
<div id="regions_div"
style="width: 400px; height: 300px;">
</div>
|
Now here you see I have prepared an array collection for providing
data to the Google chart. In this I have split the name of the country to
prepare an string array in JavaScript.
For detail please visit the below mention link :
https://google-developers.appspot.com/chart/interactive/docs/gallery/histogram
https://google-developers.appspot.com/chart/interactive/docs/gallery/histogram
Now we have done run the application and check the output.
About the Author
0 comments:
Please let me know your view