Google Charts, hide the display of the column but keep the underlying data for use

[uerec]

Hi everyone,

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 the manufacturers as rows with 7 bars of data
against each.

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

At the current time this graph does not draw because the region column
is not a integer and so it cannot be displayed.

Therefore I want to 'hide' the region column so that it is not
displayed as a bar, but is available for use with the dependent
control.

Can anyone help with this as I cannot find any way to do it? I don't
think that the hideColumns method will work because that removes the
column from the data object and there3fore the dependent control
cannot see it.

[asgallant]

Try building a data view:

var view = new google.visualization.DataView(data);

view.setColumns([0,2,3,4,5,6,7]); // <-- exclude column 1

draw your chart using view instead of data, and use data for your control.

[Riccardo Govoni]

That won't really work. If i understand correctly, he is trying to assemble a dashboard where the controls use some columns (manufacturer,region) while the charts require some other (region should be exclude), but the controls and chart should still be bound together so that playing with the controls updates the chart.

In which case, there's a 'view' setting for the ChartWrapper specification that lets you choose which columns should the chart receive, out of a possibly wider set of columns powering the entire dashboard.

Something like:

var manuControl = new google.visualization.ControlWrapper({

  controlType: 'CategoryFilter',

  options: {

    filterColumnLabel: 'Manufacturer',

    ...

});

var regionControl = new google.visualization.ControlWrapper({

  controlType: 'CategoryFilter',

  options: {

    filterColumnLabel: 'Region',

    ...

});

var chart = new google.visualization.ChartWrapper({

  chartType: 'BarChart',

  options: {

    ... // whatever

  },

  // skips column 1 "Region". Ensures the chart only gets the chosen columns out of the entire datatable

  view: {columns: [0, 2, 3, 4]}  

});

new google.visualization.Dashboard(...).bind([manuControl, regionControl], chart).draw(data);

The dashboard gets the entire table. The controls pick their column each. The chart picks only the columns it needs to display properly.

Would that work?

The documentation for the 'view' parameter is not in the chart documentation at the moment ( I thought it was there a few days ago), I'm looking into this.

[uerec]

Thank you very much indeed, that was the solution I needed.

> *  // skips column 1 "Region". Ensures the chart only gets the chosen
> columns out of the entire datatable*
> *  view: {columns: [0, 2, 3, 4]}  *

[Mr LobaLoba]

Hi,

I can't get this to work even if I take a simple barchart example on from code playground. Dispite adding view: {columns: [0,2,4]} all table columns are shown.

Any ideas?

function drawVisualization() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Year', 'Austria', 'Belgium', 'Czech Republic', 'Finland', 'France', 'Germany'],
    ['2003',  1336060,   3817614,       974066,       1104797,   6651824,  15727003],
    ['2004',  1538156,   3968305,       928875,       1151983,   5940129,  17356071],
    ['2005',  1576579,   4063225,       1063414,      1156441,   5714009,  16716049],
    ['2006',  1600652,   4604684,       940478,       1167979,   6190532,  18542843],
    ['2007',  1968113,   4013653,       1037079,      1207029,   6420270,  19564053],
    ['2008',  1901067,   6792087,       1037327,      1284795,   6240921,  19830493]
  ]);

  // Create and draw the visualization.
  new google.visualization.ColumnChart(document.getElementById('visualization')).
      draw(data,
           {title:"Yearly Coffee Consumption by Country",
            width:600, height:400,
            view: {columns: [0,2,4]},
            hAxis: {title: "Year"}}
      );

[asgallant]

The "view" parameter is for use with a ChartWrapper, which the playground example doesn't use.  You can refer to my post above for code that will work with that example, or you can use the ChartWrapper playground example.