3

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.

user
  • 7,123
  • 7
  • 48
  • 90
  • If you can provide a ([representative/minimal](http://sscce.org/)) [live demo](http://jsfiddle.net/), 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 Feb 10 '13 at 19:02
  • @DavidThomas I wasn't sure how to allow upload my XML data file with JSFiddle, so I just popped it here: http://colorfulengineering.org/test.html Note that this version has mouseover events, but even without them, anytime the mouse hovers over the legend, it crashes. – user Feb 10 '13 at 19:12
  • I get no error or crash, Chrome v21 Ubuntu. – dennmat Feb 11 '13 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 Feb 11 '13 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 Feb 11 '13 at 20:41

4 Answers4

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(); });
Sean Hogan
  • 2,902
  • 24
  • 22
  • Excellent. I updated to use `$('#' + chart_div_id + ' > div > div > svg > g:first-of-type')` because my real (non-jsfiddle) example has multiple charts). – user Feb 18 '13 at 02:50
  • This won't work on browsers that don't support svg but do support vml, so if that matters to you you should update to include that markup if possible. – Jeff-Meadows Feb 19 '13 at 08:56
  • Note: the list of events should be expanded to `mouseover mousemove mousedown mouseup click dblclick` in order to prevent crashing due to mouse clicks. – user Feb 20 '13 at 22:15
1

I'm basing this answer on a solution I found here: http://jsfiddle.net/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.

Jeff-Meadows
  • 2,154
  • 18
  • 25
  • +1 Great jsfiddle, and probably the best answer; however, If it's possible to keep the original Google-rendered legend, though that would be better because your example shows some overlapping in the drawings... I've edited (jsfiddle link in edit) to show a minimal error (without your solution). – user Feb 17 '13 at 18:47
  • So, can you preprocess the data before drawing a chart to remove such duplicates? – Jeff-Meadows Feb 17 '13 at 21:04
0

This documentation could be very helpful: https://developers.google.com/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.

Mike
  • 1,158
  • 5
  • 22
  • 32
0

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.org/en-US/docs/DOM/element.removeEventListener).

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

Community
  • 1
  • 1
Oriol
  • 274,082
  • 63
  • 437
  • 513