This question asks about Google charts, but is more general.

Mouseover of the legend in my chart gives this error:

Uncaught TypeError: Cannot read property 'x' of null

I haven't added any 'onmouseover' events, etc., it appears that it's just unhappy with the appearance of null in the series (when you plot two series with different x-values, Google charts says to add empty points as null and plot with interpolateNull : true).

Has anyone else had this problem? Is there a way to disable any mouseover events for the chart legend?

Thanks a lot for any advice you can give.

Update: There is a minimal jsfiddle demonstrating this error here. It seems Google charts doesn't like having two x and y points that have the exact same values.

This question asks about Google charts, but is more general.

Mouseover of the legend in my chart gives this error:

Uncaught TypeError: Cannot read property 'x' of null

I haven't added any 'onmouseover' events, etc., it appears that it's just unhappy with the appearance of null in the series (when you plot two series with different x-values, Google charts says to add empty points as null and plot with interpolateNull : true).

Has anyone else had this problem? Is there a way to disable any mouseover events for the chart legend?

Thanks a lot for any advice you can give.

Update: There is a minimal jsfiddle demonstrating this error here. It seems Google charts doesn't like having two x and y points that have the exact same values.

• javascript
• google-visualization

• If you can provide a (representative/minimal) live demo, we'll probably be able to help you out. Incidentally, post the representative code here too, make the question as self-contained as possible in order to retain its use for future visitors. – David Thomas Commented Feb 10, 2013 at 19:02
• @DavidThomas I wasn't sure how to allow upload my XML data file with JSFiddle, so I just popped it here: colorfulengineering/test.html Note that this version has mouseover events, but even without them, anytime the mouse hovers over the legend, it crashes. – user Commented Feb 10, 2013 at 19:12
• I get no error or crash, Chrome v21 Ubuntu. – dennmat Commented Feb 11, 2013 at 20:32
• @dennmat Did you mouseover the legend of the first figure? If you do that and check the console, I get the error described (I just tried on Chrome 24.0.1312.69 Ubuntu). – user Commented Feb 11, 2013 at 20:39
• @Oliver ahh I see yes, I do get the error, sorry I thought it was on the charts not on the legend. – dennmat Commented Feb 11, 2013 at 20:41

4 Answers 4

You could try stopping appropriate mouse events from reaching the built-in handlers.

This requires adding a mouseover listener to the chart's legend. The listener will call event.stopPropagation() (and surprisingly doesn't need to be triggered during the capture phase of event propagation).

It turns out that mousemove events are also being listened to, so stop them too.

The following worked for me on Firefox:

$('svg > g:first-of-type').bind('mouseover mousemove', function(e) { e.stopPropagation(); });

I'm basing this answer on a solution I found here: http://jsfiddle/asgallant/6Y8jF/2/

The gist is to hide Google's legend and build your own. First, disable the built-in legend by passing legend: {position: 'none'} in as one of the options to chart.draw.

In your addDiv function that creates the holder div for your chart, add a second element to hold your legend.

function addDiv(parent_id, div_id) {
    $("#" + parent_id).append('<div id="' + div_id + '" class="chart-chart"></div><ul id="legend_' + div_id + '" class="chart-legend"></ul>');
}    

Then, in your drawChart function, build the legend:

function drawChart(chart, original_table, 
    x_attr, y_attr, x_axis_lbl, y_axis_lbl, x_min_max,
    div_id) { //pass div_id to this function to be able to get legend element

    var google_table = allSeriesToGoogleTable(original_table, 
        x_attr, y_attr, ranking_titles);

    var colors = ["#3366cc","#dc3912","#ff9900"]; //use whatever colors you like
    var options = {'chartArea':{width:"60%"}, 
        vAxis: {'title': y_axis_lbl}, 'hAxis': {'title': x_axis_lbl},
        'interpolateNulls':true,
        colors: colors, //use the same colors for the chart and the legend
        legend: {position: 'none'} //hide default legend
    };
    var legend = $('#legend_' + div_id);
    for (var i = 1; i < ranking_titles.length; i++) {
        var li = $('<li></li>'),
            marker = $('<div class="legendMarker"></div>'),
            explanation = $('<span></span>');
        explanation.text(ranking_titles[i]); // legend marker text
        marker.css( {backgroundColor: colors[i-1]} ); //marker color
        li.append(marker).append(explanation);
        legend.append(li); 
    }
    if ( ! x_min_max === undefined )
    //do something
    chart.draw( google_table, options );

    // add the data table to the chart
    chart.google_table = google_table;
}

Of course, make sure you include the CSS from the fiddle as well:

.chart-chart {
    float: left;
}
.chart-legend {
    margin: 30px 0 0 0;
    float: left;
    list-style: none;
}
div.legendMarker {
    height: 1em;
    width: 1em;
    display: inline-block;
    margin: 0 5px 0 0;
}

Since you couldn't get your code into fiddle, this is untested, but it should get you 99% of the way there.

This documentation could be very helpful: https://developers.google./chart/interactive/docs/gallery/linechart?hl=en#Configuration_Options

I think however that your code contains errors. Try debugging by starting with a basic configuration.

If an element has more than one mouseover event, they must have been added using addEventListener.

And if you want to remove events added using addEventListener, you need removeEventListener. But this method needs a reference to the listener function (see https://developer.mozilla/en-US/docs/DOM/element.removeEventListener).

Then, maybe you could try Remove all JavaScript event listeners of an element and its children?