using StringFilter to show multi-series chart

Vote count:

0

I am writing to seek help, if it is possible to user [StringFilter] control, to search multiple names values [column 0] and stack the names values below, to create a multi-series on my line chart.

I have seen an example using [CategoryFilter], such as one below:

http://ift.tt/RL8Dho

This what I currently have and its throwing errors on the client-end such as [control state must be object]. I am little stuck in creating [function setChartView()].

  function drawVisualization(dataValues, chartTitle, columnNames, categoryCaption) {
        if (dataValues.length < 1)
            return;

        var data = new google.visualization.DataTable();
        data.addColumn('string', columnNames.split(',')[0]);
        data.addColumn('number', columnNames.split(',')[1]);
        data.addColumn('string', columnNames.split(',')[2]);
        data.addColumn('datetime', columnNames.split(',')[3]);

        var initState = { Values: [] };

        for (var i = 0; i < dataValues.length; i++) {

            var date = new Date(parseInt(dataValues[i].Date.substr(6), 10));

            data.addRow([dataValues[i].ColumnName, dataValues[i].Value, dataValues[i].Type, date]);
        }

        // Define a StringFilter control for the 'Name' column
        var stringFilter = new google.visualization.ControlWrapper({
            'controlType': 'StringFilter',
            'containerId': 'control1',
            'options': {
                'filterColumnLabel': columnNames.split(',')[0],
                'ui': {
                    'allowTyping': false,
                    'allowMultiple': true,
                    'allowNone': false,
                    'selectedValuesLayout': 'belowStacked'
                }
            },

            'state': 'initState'
        });
        var dateFormatter = new google.visualization.DateFormat({ pattern: 'dd MM yyyy' });
        var line = new google.visualization.ChartWrapper({
            'chartType': 'AreaChart',
            'containerId': 'PieChartContainer',
            'options': {
                'width': 1200,
                'height': 450,
                'legend': 'none',
                'hAxis': {
                    'format': "dd-MM-yyyy",
                    'hAxis.maxValue': 'viewWindow.max',
                    'maxValue': new Date(2014, 05, 30), 'minValue': new Date(2014, 04, 05),
                    'viewWindow': { 'max': new Date(2014, 05, 30) },
                },
                'chartArea': { 'left': 80, 'top': 100, 'right': 0, 'bottom': 100 },
                'tooltip': { isHtml: true }
            },
            'view': {
                'columns': [{

                    type: 'string',
                    label: data.getColumnLabel(3),
                    calc: function (dt, row) {
                        var date = dt.getValue(row, 3);
                        return dateFormatter.formatValue(date);
                    }
                }, 1, {
                    type: 'string',
                    role: 'tooltip',
                    calc: function (dt, row) {
                        return 'Name: ' + dt.getValue(row, 0) + ', Price: ' + +dt.getValue(row, 1) + ', Date: ' + +dt.getFormattedValue(row, 3);
                    }
                }]
            }
        });


        var table = new google.visualization.ChartWrapper({
            'chartType': 'Table',
            'containerId': 'TableContainer',
            'options': {
                'width': '900px'
            }
        });

        function setChartView() {
            var state = stringFilter.getState();
            var row;
            var view = {
                columns: [0]
            };
            for (var i = 0; i < state.Values.length; i++) {
                row = data.getFilteredRows([{ column: 0, value: state.Values[i] }])[0];//confused here
                view.columns.push(data.getValue(row, 0));
            }

            chart.setView(view);
            chart.draw();
        }


        google.visualization.events.addListener(stringFilter, 'statechange', setChartView);


        var dashboard = new google.visualization.Dashboard(document.getElementById('PieChartExample'));

        dashboard.bind([stringFilter], [table]);
        // Draw the dashboard
        dashboard.draw(data);

    }

Please advice, if this is the approach and what I may be missing, which is causing the error on the client-end. Many thanks.

asked 59 secs ago

user3070072

91