Hi rani,
Since the annotation role is not supported for column charts yet, value on top of each column cannot be done with a multi-column chart.
Only hover on the column you can see the value in tooltip.
Check this example. Now please take its reference and correct your code.
Database
For this example I have used of Northwind database that you can download using the link given below.
Download Northwind Database
Namespaces
using System.Collections.Generic;
using System.Configuration;
using System.Data;
using System.Data.SqlClient;
using System.Linq;
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
return View();
}
[HttpPost]
public JsonResult AjaxMethod()
{
//Fetch the Statistical data from database.
string query = "SELECT ShipCountry, DATEPART(Year, OrderDate) [Year], COUNT(OrderId) [Total]";
query += " FROM Orders WHERE ShipCountry IN ('USA', 'France', 'Brazil', 'Canada')";
query += " GROUP BY ShipCountry, DATEPART(Year, OrderDate)";
DataTable dt = GetData(query);
List<string> countryList = (from p in dt.AsEnumerable()
select p.Field<string>("ShipCountry")).Distinct().ToList();
//Get the DISTINCT Countries.
List<object> chartData = new List<object>();
List<string> countries = (from p in dt.AsEnumerable()
select p.Field<string>("ShipCountry")).Distinct().ToList();
//Insert Label for Country in First position.
countries.Insert(0, "Country");
//Add the Countries Array to the Chart Array.
chartData.Add(countries.ToArray());
//Get the DISTINCT Years.
List<int> years = (from p in dt.AsEnumerable()
select p.Field<int>("Year")).Distinct().ToList();
//Loop through the Years.
foreach (int year in years)
{
List<object> totals = new List<object>();
foreach (string country in countryList)
{
//Get the Total of Orders for each Country for the Year.
var total = (from p in dt.AsEnumerable()
where p.Field<int>("Year") == year && p.Field<string>("ShipCountry") == country
select p.Field<int>("Total")).Cast<object>().FirstOrDefault();
totals.Add(total == null ? 0 : total);
}
//Insert the Year value as Label in First position.
totals.Insert(0, year.ToString());
//Add the Years Array to the Chart Array.
chartData.Add(totals.ToArray());
}
return Json(chartData);
}
private static DataTable GetData(string query)
{
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlDataAdapter sda = new SqlDataAdapter(query, con))
{
DataTable dt = new DataTable();
sda.Fill(dt);
return dt;
}
}
}
}
View
<div ng-app="MyApp" ng-controller="MyController">
<div id="chart" style="width: 500px; height: 400px;">
</div>
</div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.0/angular.js"></script>
<script type="text/javascript">
var app = angular.module('MyApp', [])
app.controller('MyController', function ($scope, $http, $window) {
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(function () {
$http.post("Home/AjaxMethod", { headers: { 'Content-Type': 'application/json'} })
.then(function (r) {
var options = {
title: 'Country wise Order Distribution',
width: 600,
height: 400,
legend: { position: 'top', maxLines: 3 },
bar: { groupWidth: '75%' },
isStacked: false
};
var data = google.visualization.arrayToDataTable(r.data);
var chart = new google.visualization.BarChart(document.getElementById('chart'));
chart.draw(data, options);
}, function (response) {
$window.alert(response.responseText);
});
});
});
</script>
Screenshot