Google Column Chart

Question

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