CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
Hitesh
Hitesh

Reputation: 3498

Dynamically change view column names in Google Charts

My data is as below 

var data = google.visualization.arrayToDataTable([
  ['Date', 'A|36~Batman', 'A|37~Superman', 'A|38~Aquaman'],
  ['01/08/2018', 950, 654, 123],
  ['02/08/2018', 760, 786, 423],
  ['03/08/2018', 1121, 856, 632],
  ['04/08/2018', 842,  475, 257],
  ['05/08/2018', 948,  658, 324]
]);

While plotting this chart in the graph, I want to show the label values split after the '~' sign i.e. (Batman, Superman, Aquaman). I need the values before the tilde during the OnClick event of my chart so I need those values in the data as my onclick code is as below

var col = chart.getSelection()[0]['column'];
var Id = data.getColumnLabel(col).substr(0, data.getColumnLabel(col).indexOf("~"));

So to fetch data, I need the Id values as well. I was able to loop the columns and modify the column label values, but I don't know the code to set the column label as new values. My code to loop is as below

var view = new google.visualization.DataView(data);
for (var i = 0; i < view.getNumberOfColumns(); i++) {
    var ColumnName = view.getColumnLabel(i);
    var NewColumnName = ColumnName.substring(ColumnName.lastIndexOf('~'), ColumnName.length)
    // set new column name in the view
}

How to replace the old column name with the new column name?

Upvotes: 1

Views: 1676

Answers (1)

WhiteHat
WhiteHat

Reputation: 61275

use method --> setColumnLabel

however, this method does not exist on the view,
so you'll have to change the column label on the data table

since the view is based on the data table,
the view pick up the new label as well... 

var view = new google.visualization.DataView(data);
for (var i = 0; i < view.getNumberOfColumns(); i++) {
    var ColumnName = view.getColumnLabel(i);
    var NewColumnName = ColumnName.substring(ColumnName.lastIndexOf('~'), ColumnName.length)
    data.setColumnLabel(i, NewColumnName);
}

EDIT

instead of using the label to store two values,
take advantage of the properties available on the column. 

var data = google.visualization.arrayToDataTable([
  ['Date', {id: 'A|36', label: 'Batman'}, {id: 'A|37', label: 'Superman'}, {id: 'A|38', label: 'Aquaman'}],
  ['01/08/2018', 950, 654, 123],
  ['02/08/2018', 760, 786, 423],
  ['03/08/2018', 1121, 856, 632],
  ['04/08/2018', 842,  475, 257],
  ['05/08/2018', 948,  658, 324]
]);

then you can use methods --> getColumnId() & getColumnLabel()

if that isn't enough, you can provide your own custom properties... 

var data = google.visualization.arrayToDataTable([
  ['Date', {id: '36', label: 'Batman', p: {category: 'A'}}, {id: '37', label: 'Superman', p: {category: 'A'}}, {id: '38', label: 'Aquaman', p: {category: 'A'}}],
  ['01/08/2018', 950, 654, 123],
  ['02/08/2018', 760, 786, 423],
  ['03/08/2018', 1121, 856, 632],
  ['04/08/2018', 842,  475, 257],
  ['05/08/2018', 948,  658, 324]
]);

then use method --> getColumnProperty(1, 'category')

Upvotes: 1

Related Questions