CODEWITHSUNDEEP
javascriptjquerygoogle-visualization
polonskyg
polonskyg

Reputation: 4319

Google Line Chart saying Uncaught TypeError: Cannot call method 'getSelection' of null

I'm using Google Chart (Line chart in particular). The chart is displayed correctly. Now I'm trying to add interaction, when the label of the series is clicked then the series should disappear and and appear.

My problem is that the method getSelection() is throwing the error

Cannot call method 'getSelection' of null

This is part of my code:

var jsonData = $.ajax({
url: 'http://localhost:9580/LocalApp/api/Data?Number=16846851',
type: 'GET',
dataType: 'json',
success: function (values) {

// now we need to build the map data, loop over each result

// create columns array
var columns = [{ id: 'datetime', label: 'Date and Time', type: 'datetime' },
           { id: 'x', label: 'X', type: 'number' },
           { id: 'y', label: 'Y', type: 'number' },
           { id: 'z', label: 'Z', type: 'number' },
           { id: 'total', label: 'Total', type: 'number' }];

var chartData = new google.visualization.DataTable(
{
    cols: columns
});

// Add empty rows
chartData.addRows(values.ac.length);

$.each(values.ac, function (indexInArray, ac) {
    chartData.setCell(indexInArray, 0, new Date(acc.dateTime));
    chartData.setCell(indexInArray, 1, ac.x);
    chartData.setCell(indexInArray, 2, ac.y);
    chartData.setCell(indexInArray, 3, ac.z);
    chartData.setCell(indexInArray, 4, ac.total);
});

var options = {
    title: 'Data',
    pointSize:4, 
    legend: { position: 'bottom' },
    series: {
        0: { color: 'blue',   lineWidth: 2 },
        1: { color: 'red',    lineWidth: 2 },
        2: { color: 'green',  lineWidth: 2 },
        3: { color: 'yellow', lineWidth: 2 }
    }
};

function showHideSeries(newChart) {
    var sel = newChart.getSelection(); **--> error**
    // if selection length is 0, we deselected an element
    if (sel.length > 0) {
        // if row is undefined, we clicked on the legend
        if (sel[0].row == null) {
            var col = sel[0].column;
            if (columns[col] == col) {
                // hide the data series
                columns[col] = {
                    label: data.getColumnLabel(col),
                    type: data.getColumnType(col),
                    calc: function () {
                        return null;
                    }
                };
                // grey out the legend entry
                series[col - 1].color = '#CCCCCC';
            }
            else {
                // show the data series
                columns[col] = col;
                series[col - 1].color = null;
            }
            var view = new google.visualization.DataView(chartData);
            view.setColumns(columns);
            newChart.draw(view, options);
        }
    }
}

// Instantiate and draw our chart, passing in some options.
var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
google.visualization.events.addListener(chart, 'select', showHideSeries(chart));
chart.draw(chartData, options);

Any idea why I'm getting that error? Thanks!!! Guillermo.

Upvotes: 1

Views: 1204

Answers (1)

asgallant
asgallant

Reputation: 26340

This line:

google.visualization.events.addListener(chart, 'select', showHideSeries(chart));

is calling the showHideSeries function and passing its return value (null) to the addListener function. You need to pass a function (not a function call! [unless that function also returns a function]) to addListener. This would be valid:

google.visualization.events.addListener(chart, 'select', showHideSeries);

and would give you the error you posted in your question, as the event listener passes an event object as the parameter to the listener, not a chart object, and the event object definitely does not have a getSelection method. Given your code as-is, I don't think you would get the error you posted, but it still wouldn't work anyway.

There are two different ways you could fix this: either use chart instead of newChart inside showHideSeries (which works as long as showHideSeries will only be used by one chart) or you can wrap the showHideSeries(chart); call inside another function. Going the first route should be self-evident, so I will focus on the second here in case you need to use this function with multiple charts:

google.visualization.events.addListener(chart, 'select', function() {
    showHideSeries(chart);
});

When the "select" event fires, the anonymous function is called, which then calls showHideSeries with the chart variable. If you had another chart you needed to use this with, it would be as simple as this:

google.visualization.events.addListener(otherChart, 'select', function() {
    showHideSeries(otherChart);
});

Upvotes: 1

Related Questions