Google Chart - DataTable.addRow()

L A

9y8.5k

Hello,

I`m trying add rows to a DataTable() but my column headers have spacing and special symbols like Meat/Poultry, Dairy Products, etc.,

$.ajax({
url: "@Url.Action("TotalSales", "Chart")",
data: "{}",
dataType: "json",
type: "POST",
contentType: "application/json",
success: function (data) {
var Data = new google.visualization.DataTable();
Data.addColumn('number', 'Confections');
Data.addColumn('number', 'Meat/Poultry');
Data.addColumn('number', 'Condiments');
Data.addColumn('number', 'Dairy Products');
Data.addColumn('number', 'Beverages');
Data.addColumn('number', 'Grains/Cereals');
Data.addColumn('number', 'Seafood');
Data.addColumn('number', 'Produce');
Data.addColumn('number', 'ShippingYear');
for (var i = 0; i < data.length; i++) {
console.log("Im in ComboChart Success");
Data.addRow([data[i].ShippingYear, data[i].Confections,
data[i].Meat/ Poultry, data[i].Condiments, data[i].Dairy Products, data[i].Beverages,
data[i].Grains/ Cereals, data[i].Seafood, data[i].Produce]);
console.log("Inserting data");
}
var options = {
height: 600,
width: 700,
title: 'Total Category Wise Sales 1996_1997',
vAxis: {
title: 'Sales',
format: 'currency'
},
hAxis: {
title: 'ShippingYear'
}
};
var chartspace = new google.visualization.BarChart(document.getElementById('comboChart'));
chartspace.draw(Data, options);
},
error: function () {
alert("Error loading data! Please try again.");
}
});

In the above ajax call, Line # 21, 22 cause error.

I can`t add column names which are different. Please help me to achieve this.

Thanks in advance.

7 Replies

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

Nilesh Shah9y ago
Accepted answer
I see your problem is more about accessing data from JSON result from a server side call than google chart

the lines here like
data[i].Meat/ Poultry
data[i].Grains/ Cereals

means you are passing the values of data array from JSON having property names like "Meat/ Poultry" and "Grains/ Cereals"

Can't you change that to simply "MeatPoultry" or "Meat_Or_Poultry" or like that?
Nilesh Shah9y ago
Learn Avid
that's great!

Please mark my answer as "Accepted" if it helped you and close this question!
L A9y ago
Thank you Nilesh Shah & Rajkiran Swain for your response. As Nilesh Shah suggested i replaced special chars with '_' in AJAX call and that worked.
Below given code is after replacing special chars (Line # 20, 21, 22 referred above).
Data.addRow([data[i].ShippingYear, data[i].Confections, data[i].Meat_Poultry,
data[i].Condiments, data[i].Dairy_Products, data[i].Beverages,
data[i].Grains_Cereals, data[i].Seafood, data[i].Produce]);
Thanks again to everyone for your suggestions/ comments.
Rajkiran Swain9y ago
https://stackoverflow.com/questions/12415689/how-to-dynamically-add-rows-columns-to-a-google-column-chart
L A9y ago
Actually this data is returned from a webservice which is been used at different places of project. However is there a chance to use the same column names instead of changing them.?
L A9y ago
Thank you, Nilesh Shah for your suggestion. But i really cant figure out how to use these ASCII in my AJAX call. Can you please show how to implement them in the code.
Nilesh Shah9y ago
First, I will suggest you to keep the names simple without any "/" or special characters i.e. to completely avoid using it.

If you don't agree to that, then I will suggest you to use the ASCII codes for the special characters as described here
http://www.webtoolhub.com/tn561380-xhtml-characters-list.aspx

Google Chart - DataTable.addRow()

Learn Avid