Google Charts, hide the display of the column but keep the underlying 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 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.

Answer 1

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

Answer 2

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.