Google charts, hide the display of the column, but save the basic data for use

Question

In the following JSON:

var data = new google.visualization.DataTable( { cols: [{id: 'Option1', label: 'Manufacturer', type: 'string'}, {id: 'Option2', label: 'Region', type: 'string'}, {id: 'Option3', label: 'Option3', type: 'number'}, {id: 'Option4', label: 'Option4', type: 'number'}, {id: 'Option5', label: 'Option5', type: 'number'}, {id: 'Option6', label: 'Option6', type: 'number'}, {id: 'Option7', label: 'Option7', type: 'number'}, {id: 'Option8', label: 'Option8', type: 'number'}], rows: [{c:[{v: 'Ford'}, {v: 'South East'}, {v: 2}, {v: 3}, {v: 4}, {v: 5}, {v: 6}, {v: 7}]}, {c:[{v: 'Ford'}, {v: 'South East'}, {v: 2}, {v: 3}, {v: 4}, {v: 5}, {v: 6}, {v: 7}]}, {c:[{v: 'Ford'}, {v: 'South East'}, {v: 2}, {v: 3}, {v: 4}, {v: 5}, {v: 6}, {v: 7}]}, {c:[{v: 'BMW'}, {v: 'South East'}, {v: 2}, {v: 3}, {v: 4}, {v: 5}, {v: 6}, {v: 7}]}, {c:[{v: 'BMW'}, {v: 'North'}, {v: 2}, {v: 3}, {v: 4}, {v: 5}, {v: 6}, {v: 7}]}, {c:[{v: 'BMW'}, {v: 'North'}, {v: 2}, {v: 3}, {v: 4}, {v: 5}, {v: 6}, {v: 7}]}, {c:[{v: 'Citroen'}, {v: 'North'}, {v: 2}, {v: 3}, {v: 4}, {v: 5}, {v: 6}, {v: 7}]}, {c:[{v: 'Citroen'}, {v: 'South East'}, {v: 2}, {v: 3}, {v: 4}, {v: 5}, {v: 6}, {v: 7}]} ] }, 0.6 ) 

my graph will display manufacturers as rows with 7 data bars for each.

I want to be able to filter data using a dependent control to see only rows in each region (column 1).

This graph is not currently drawn because the column in the region is not an integer and therefore cannot be displayed.

Therefore, I want to “hide” the region column so that it does not appear as a panel, but is available for use with the dependent control.

Can someone help with this as I cannot find a way to do this? I do not think that the hideColumns method will work because it removes the column from the data object there too, because the dependent control does not see it.

Answer 1

The solution to this was to use a "view."

  // Create a bar chart, passing some options barChart = new google.visualization.ChartWrapper({ 'chartType': 'BarChart', 'containerId': 'chart_div', 'options': { 'width': '100%', 'height': '120%', 'vAxis': {title: "Branch"}, 'hAxis': {title: "Cups"}, 'fontSize': 14, 'showRowNumber' : true, }, 'view': {'columns': [0,2,3,4,5,6,7]} }); 

Hope this helps other people with the same problem.

Answer 2

You can also use dataView directly by following these steps with the code above.

  function hideColumns (chart, data, options, colToHide) { dataview = new google.visualization.DataView(data); dataview.hideColumns(colToHide); // you can also use dataview.setColumns([1,2]) to show only selected columns and hide the rest chart.draw(dataview, options) };