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

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.

The solution to this was to use '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]}
        });

Hopefully this will help other people with the same problem.

You can use the dataView directly as well by doing the following with your above code

    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)
    };