merix says:
for (var i = 0; i < response.d.length; i++) {
var asset = response.d[i][0].toString();
var stock = response.d[i][1].toString();
dataTable.push([asset, parseInt(stock)]);
}
Change the above line with below.
for (var i = 0; i < response.length; i++) {
var asset = response[i][0].toString();
var stock = response[i][1].toString();
dataTable.push([asset, parseInt(stock)]);
}
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.Configuration;
using System.Data;
using System.Data.SqlClient;
Controller
public class HomeController : Controller
{
// GET: /Home/
public ActionResult Index()
{
return View();
}
[HttpPost]
public JsonResult Indexgraph()
{
string query = "SELECT ShipCity COMUNE_NAME, (COUNT(orderid)*4) Percentage FROM Orders WHERE ShipCountry = 'USA' GROUP BY ShipCity";
string constr = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
List<object> chartData = new List<object>();
chartData.Add(new object[] { "COMUNE_NAME", "Percentage" });
using (SqlConnection con = new SqlConnection(constr))
{
using (SqlCommand cmd = new SqlCommand(query))
{
cmd.CommandType = CommandType.Text;
cmd.Connection = con;
con.Open();
using (SqlDataReader sdr = cmd.ExecuteReader())
{
while (sdr.Read())
{
chartData.Add(new object[] { sdr["COMUNE_NAME"], sdr["Percentage"] });
}
}
con.Close();
return Json(chartData);
}
}
}
}
View
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.load("visualization", "1", { packages: ["corechart"] });
google.setOnLoadCallback(drawChart);
function drawChart() {
$.ajax({
type: "POST",
url: "/Home/Indexgraph",
data: {},
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
var dataTable = [['COMUNE_NAME', 'Percentage']];
for (var i = 0; i < response.length; i++) {
var asset = response[i][0].toString();
var stock = response[i][1].toString();
dataTable.push([asset, parseInt(stock)]);
}
var data = google.visualization.arrayToDataTable(dataTable);
var view = new google.visualization.DataView(data);
view.setColumns([0, 1, {
calc: function (dt, row) {
if ((dt.getValue(row, 1) >= 0) && (dt.getValue(row, 1) <= 64)) {
return 'red';
} else if ((dt.getValue(row, 1) > 64) && (dt.getValue(row, 1) <= 74)) {
return 'yellow';
} else {
return 'green';
}
},
type: 'string',
role: 'style'
}, {
calc: 'stringify',
sourceColumn: 1,
type: 'string',
role: 'annotation'
}]);
var options = {
title: '',
titleTextStyle: { fontSize: 16, bold: true },
backgroundColor: 'transparent',
chartArea: {
left: 80, top: 30, bottom: 60, right: 10
},
legend: {
textStyle: { fontSize: 11 }
},
vAxis: {
title: 'Commune',
textStyle: { fontName: 'Arial', fontSize: 10 },
titleTextStyle: { fontSize: 12, italic: false, bold: true }
},
hAxis: {
title: 'Percentage Rate',
gridlines: { count: 22 },
textStyle: { fontName: 'Arial', fontSize: 11 },
titleTextStyle: { fontSize: 12, italic: false, bold: true }
},
pointSize: 3,
pointShape: 'circle',
annotations: {
alwaysOutside: true,
textStyle: { fontName: 'Arial', fontSize: 9, color: '#000000', opacity: 1 }
}
};
var chartDiv = document.getElementById('chart_div');
var chart = new google.visualization.BarChart(chartDiv);
chart.draw(view, options);
}, error: function (response) {
alert(response.responseText);
}
});
}
</script>
<div id="chart_div" style="width: 500px; height: 400px;">
</div>
Screenshot
