Google chart percentage slider

Question

<script type="text/javascript">
        function drawVisualization1(dataValues, chartTitle, columnNames, categoryCaption) {
            if (dataValues.length < 1)
                return;
            var data = new google.visualization.DataTable();
            data.addColumn('string', columnNames.split(',')[0]);
            data.addColumn('string', columnNames.split(',')[1]);
            data.addColumn('string', columnNames.split(',')[2]);
            data.addColumn('string', columnNames.split(',')[3]);
            data.addColumn('string', columnNames.split(',')[4]);
            data.addColumn('string', columnNames.split(',')[5]);
            data.addColumn('number', columnNames.split(',')[6]);
            data.addColumn('number', columnNames.split(',')[7]);

            for (var i = 0; i < dataValues.length; i++) {
                data.addRow([dataValues[i].Value1, dataValues[i].Value2, dataValues[i].Value3, dataValues[i].Value4, dataValues[i].Value5, dataValues[i].Value6,( dataValues[i].Value7)/100, (dataValues[i].Value8)/100]);
            }
            var formatter = new google.visualization.NumberFormat({ pattern: '####%' });
            formatter.format(data, 6);
            var formatter = new google.visualization.NumberFormat({ pattern: '####%' });
            formatter.format(data, 7);

            var categoryPicker1 = new google.visualization.ControlWrapper({
                'controlType': 'CategoryFilter',
                'containerId': 'Container',
                'options': {
                    'filterColumnLabel': columnNames.split(',')[2],
                    'ui': {
                        'labelStacking': 'horizontal',
                        'allowTyping': false,
                        'allowMultiple': false,
                        'caption': categoryCaption,
                        'label': columnNames.split(',')[2]
                    }
                }
            });

            var slider1 = new google.visualization.ControlWrapper({
                'controlType': 'NumberRangeFilter',
                'containerId': 'Slider',
                'options': {
                    'filterColumnLabel': columnNames.split(',')[6],
                    'ui': { 'labelStacking': 'horizontal' },
                   'ui.format': { 'pattern':'####%' }
                }
            });

            var table1 = new google.visualization.ChartWrapper({
                'chartType': 'Table',
                'containerId': 'TableContainer1',

                'options': {
                    'width': '895px',
                    'page': 'enable',
                    'pageSize': 5

                }
            });



            new google.visualization.Dashboard(document.getElementById('PieChartExample')).bind([categoryPicker1, slider1], [table1]).draw(data);
        }

     </script>

Script code to generate google chart my problem is i am not able to show the slider for percentage values;i am converting that table values into percentage and i want to show in the slider value.can anyone help me to resolve.

Answer 1

var slider1 = new google.visualization.ControlWrapper({
                'controlType': 'NumberRangeFilter',
                'containerId': 'Slider',
                'options': {
                    'filterColumnLabel': columnNames.split(',')[6],
                    'ui': { 'labelStacking': 'horizontal',
                            'format': { 'pattern':'####%' } }
                }
            });