1
Reply

Google Column Chart

md Ghouse

md Ghouse

May 2 2016 6:47 AM
271
please explain me how to devolope Google column chart from the gridview
alearedy  i did colum chart with the help of This Link               https://www.youtube.com/watch?v=S1znB1LDlK4 
And its my code
 
<script src="Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script>
var chartData; // globar variable for hold chart data
google.load("visualization", "1", { packages: ["corechart"] });
// Here We will fill chartData
$(document).ready(function () {
$.ajax({
url: "GoogleChart.aspx/GetChartData",
data: "",
dataType: "json",
type: "POST",
contentType: "application/json; chartset=utf-8",
success: function (data) {
chartData = data.d;
},
error: function () {
alert("Error loading data! Please try again.");
}
}).done(function () {
// after complete loading data
google.setOnLoadCallback(drawChart);
drawChart();
});
});
/*On sucess*/
function drawChart() {
var data = google.visualization.arrayToDataTable(chartData);
var options = {
title: "Eons Company Revenue",
pointSize: 5
};
/*On Failure..*/
var columnChart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
columnChart.draw(data, options);
}
</script>
 
 
[WebMethod]
[ScriptMethod(ResponseFormat = ResponseFormat.Json)]
public static object[] GetChartData()
{
List<GOOGLECHARTDATA> data = new List<GOOGLECHARTDATA>();
//Here MyDatabaseEntities is our dbContext
using (EonsEntities dc = new EonsEntities())
{
data = dc.GOOGLECHARTDATAs.ToList();
}
var chartData = new object[data.Count + 1];
chartData[0] = new object[]{
"Year",
"Electronics",
"Books & Media",
"Home & Kitchen"
};
int j = 0;
foreach (var i in data)
{
j++;
chartData[j] = new object[] { i.YEAR.ToString(), i.ELECTRONICS, i.BOOKANDMEDIA, i.HOMEANDKITCHEN };
}
return chartData;
}
But I need Generate Bar from Gridview 

Answers (1)
Next Recommended Forum