How to create multi-series line chart

Question

I am writing to seek help, in how do can I create multi-series line chart from [name] column below. Currently, I am plotting the chart using [date] and [tag] points. However, I would like to show multi-series line chart for each names. Is this plausible or does this task require manual functions to be created to link in with the API.

Please advice.

 function drawVisualization() {
        // Prepare the data
        var data = google.visualization.arrayToDataTable([
          ['Name', 'Tag', 'Date'],
          ['ACCA', 45, 'May 14'],
          ['ABBA', 85, 'May 14'],
          ['ANNA', 100, 'May 14'],
          ['AMMA', 100.5, 'May 14'],
          ['ACCA', 99.5, 'May 15'],
          ['ABBA', 85.5, 'May 15'],
          ['ACCA', 99.6, 'May 15'],
          ['BACM', 94, 'May 15'],
          ['MMBS', 96, 'May 15']
        ]);

        // Define category pickers for 'Name',
        var countryPicker = new google.visualization.ControlWrapper({
            'controlType': 'CategoryFilter',
            'containerId': 'control1',
            'options': {
                'filterColumnLabel': 'Name',
                'ui': {
                    'labelStacking': 'vertical',
                    'allowTyping': false,
                    'allowMultiple': false
                }
            }
        });

        var barChart = new google.visualization.ChartWrapper({
            'chartType': 'LineChart',
            'containerId': 'chart1',
            'options': {
                'width': 400,
                'height': 300,
                'chartArea': { top: 0, right: 0, bottom: 0 }
            },
            // Configure the Linechart to use columns 2 (Date) and 1 (Tag)
            'view': { 'columns': [2, 1] }
        });

        // Define a table.
        var table = new google.visualization.ChartWrapper({
            'chartType': 'Table',
            'containerId': 'chart2',
            'options': {
                'width': '300px'
            }
        });

        new google.visualization.Dashboard(document.getElementById('dashboard')).bind([countryPicker], [barChart, table]).draw(data);
        }

Edit:

Thanks.

Answer 1

To make this work, I would suggest removing the LineChart from your Dashboard, and using the Table's "ready" event to get the filtered data, create appropriate settings for the chart's view.columns parameter, and then drawing the chart with the filtered data:

google.visualization.events.addListener(table, 'ready', function () {
    var filteredData = table.getDataTable();
    // get a list of all the labels in column 0
    var group = filteredData.getDistinctValues(0);

    // build the columns for the view
    var columns = [0];
    for (var i = 0; i < group.length; i++) {
        var label = group[i];
        // set the columns to use in the chart's view
        // calculated columns put data belonging to each country in the proper column
        columns.push({
            type: 'number',
            label: label,
            calc: (function (name) {
                return function (dt, row) {
                    return (dt.getValue(row, 0) == name) ? dt.getValue(row, 1) : null;
                }
            })(label)
        });
    }
    var view = barChart.getView() || {};
    view.columns = columns;
    barChart.setView(view);
    barChart.setDataTable(filteredData);
    barChart.draw();
});
new google.visualization.Dashboard(document.getElementById('dashboard')).bind([countryPicker], [table]).draw(data);