Google Chart - DataTable.addRow()

Question

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.

Nilesh Shah · 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?

Rajkiran Swain · Answer

https://stackoverflow.com/questions/12415689/how-to-dynamically-add-rows-columns-to-a-google-column-chart

Nilesh Shah · Answer

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

Nilesh Shah · Answer

Learn Avid that's great! Please mark my answer as "Accepted" if it helped you and close this question!

L A · Answer

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.

L A · Answer

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 A · Answer

Thank you, Nilesh Shah for your su ggestion. 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.