Clever Geek Handbook

Add extra data to google chartTable

I am using google scatterchart to show where the defects are on the surface. All defects have an ID, when I click on the point at which I want the event to fire, from where I can get that ID and do other things with it.

In google chart it is possible to hook up a select handler from where I can get what is selected, but how can I add an id (or any other data) to the dataTable at a point without displaying it?

For example:

    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn('number', 'Width');
    dataTable.addColumn('number', 'Yellow');
    dataTable.addColumn({ type: 'string', role: 'tooltip', 'p': { 'html': true } });
    dataTable.addColumn('number', 'Red');
    dataTable.addColumn({ type: 'string', role: 'tooltip', 'p': { 'html': true } });
    dataTable.addColumn('number', 'Id'); <-- this doesn't work

In the last column, I want to add the defect id and get it via selectHandler.

dataTable.addRow([123, 123, 'some tooltip', null, null, 999]);

Here I have added ID 999 to the table. But I don't want the chart to display it. How do I add additional (hidden) data to a point?

+3


source to share


2 answers


You can add additional columns containing any information you need and then hide them using the DataView:

var dataTable = new google.visualization.DataTable();
dataTable.addColumn('number', 'Width');
dataTable.addColumn('number', 'Yellow');
dataTable.addColumn({ type: 'string', role: 'tooltip', 'p': { 'html': true } });
dataTable.addColumn('number', 'Red');
dataTable.addColumn({ type: 'string', role: 'tooltip', 'p': { 'html': true } });
dataTable.addColumn('number', 'Id');

// populate dataTable

var view = new google.visualization.DataView(dataTable);
// exclude column 5 (Id)
view.setColumns([0, 1, 2, 3, 4]);


Then draw the chart using DataView instead of DataTable.

+3


source


setRowProperties(rowIndex, properties)

will work in this case, remove the Id column and add dataTable.setRowProperties(0,{'id':'999'});



You can get the property of a string using getRowProperties(rowIndex);

+1


source






More articles:


All Articles