How to pass the Json array result in google chart code ?

Karthik K

Hi All ,

We have a taks to pass the json array value in the google chart . when we were trying to bind the database , how to assign the json array to that google chart. If anyone knows this guide us with sample .

Sample code :

$(function () {
$.ajax({
type: "POST",
url: "InteractiveDashboard.aspx/Web_GetTotalSaleslist",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response)
{
//alert(response.d);
alert("Error..1");

},
error: function (response)
{

alert("Error..2");
alert(response);
}
});
});
function OnSuccess(response) {
// var jsonResult = JSON.stringify(response.d)
// alert(jsonResult);
var jsonResult = JSON.parse(response.d);
var jsonCount = jsonResult.length;

for (var n = 0; n < jsonCount; n++)
{
var _Month = jsonResult[n].Month;
var _TotalsalesAmt = jsonResult[n].TotalsalesAmt;

}
sessionStorage.setItem("JsonResult", JSON.stringify(jsonResult));
// loop the jsonresult Here
drawBasic();

};

Thanks in advance ,

K.Karthik.K

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Jayraj Chhaya2y ago

Accepted answer

To pass a JSON array to a Google Chart in Dot Net, you need to ensure that the JSON data retrieved from the server is properly formatted and then bind it to the Google Chart. In the provided code snippet, after successfully fetching the JSON data using AJAX, you can parse the JSON response and extract the necessary data for the chart.

To assign the JSON array to the Google Chart, you can utilize the Google Charts API.

// Assuming you have the JSON data stored in a variable named 'jsonResult'
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Month');
    data.addColumn('number', 'Total Sales Amount');

    // Loop through the JSON array and add data rows
    jsonResult.forEach(function (item) {
        data.addRow([item.Month, item.TotalsalesAmt]);
    });

    var options = {
        title: 'Total Sales by Month',
        // Add more chart options as needed
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
    chart.draw(data, options);
}

Jayraj Chhaya2y ago
Thanks Karthik K,

I am happy to share my knowledge and hope it was helpful to you and other members.

Thank you for accepting my answer.
Karthik K2y ago
@ Jayraj Chhaya ,

Your code works exactly what i expect. Thank you much .