Cannot read property 'length' of null - using css display block (select/onchange)

Question

I'm using Google Charts, and the charts are visible by using a select menu:

<select id="form_frame1" name="frame1" onchange="getChart(this);">
   <option value="area_chart_google" >Area Chart</option>
   <option value="area_chart_2" selected="selected">Stacked Chart</option>
</select>

My getChart function is:

function getChart(selection) {
 if (selection.value == "area_chart_2") {
    document.getElementById('area_chart_2').style.display = 'block';
    document.getElementById('area_chart_google').style.display = 'none';
}

 else {   
    document.getElementById('area_chart_2').style.display = 'none';
    document.getElementById('area_chart_google').style.display = 'block';
   }
}

Is working OK when using Display: 'block' by default (area_chart_google). The problem is that once I hide (none) the chart (area_chart_google) and then I display it (block) I get this error:

In Firebug: google-visualization-errors-all-1 
In Chrome: Cannot read property 'length' of null
In Safari: 'null' is not an object

This is my HTML (Script is inside the body, I'm using JSAPI on the header):

<div id="area_chart_google" class="area-chart"></div>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Header');
    data.addColumn('number', '');
    data.addColumn('number', '');
    data.addRows([
      ['Monday',300,43],
      ['Tuesday',250,545],
      ['Wednesday',122,78],
      ['Thursday',348,92],
      ['Friday',23,61],
      ['Saturday',39,93]
    ]);
    var options = {
      title: '',
      hAxis: {title: '',  titleTextStyle: {color: '#efed22'}},
      backgroundColor: '#efede9',
      legend: 'none'
    };
    var chart = new google.visualization.AreaChart(document.getElementById('area_chart_google'));
    chart.draw(data, options);
  }
</script>

Can you show us the html that this is meant to affect? Sounds like maybe an id is incorrect. — Reinstate Monica Cellio, Mar 08 '13 at 17:11
It's in the DIV area_chart_google, that's the one with the problem. — Diego Sarmiento, Mar 08 '13 at 17:31
possible duplicate of ['null' is not an object with Google chart (issue with select menu, onchange event)](http://stackoverflow.com/questions/15261862/null-is-not-an-object-with-google-chart-issue-with-select-menu-onchange-even) — hakre, Mar 09 '13 at 06:04

score 1 · Accepted Answer · answered Mar 08 '13 at 19:33

1

This is working for me:

function getChart(selection) {
  if (selection.value == "area_chart_2") {
  document.getElementById('area_chart_2').style.display = 'block';
  document.getElementById('area_chart_google').style.display = 'none';
}

else {   
  document.getElementById('area_chart_2').style.display = 'none';
  document.getElementById('area_chart_google').style.display = 'block';
  drawChart(); //call this function when using this Google Chart
 }
}

answered Mar 08 '13 at 19:33

Diego Sarmiento

581
3
7
25

This worked for me too - I think it is the order of the display change and the draw chart. If I call draw() method on a hidden chart then I get the same error. For example, try $('#chartdiv').show(); then chart.draw(view, options); – Steve Grove May 27 '15 at 14:48

score 0 · Answer 2 · edited May 23 '17 at 12:13

0

Guessing ground here, but it probably happens because some script dynamically tries reads the length property of the hidden divs.

As explained in this answer , display none gereates no space in the page. Some options you could try:

Use visibility: hidden
Try to hide the wrapping element of the area_chart_2 and area_chart_google instead

edited May 23 '17 at 12:13

Community

1
1

answered Mar 08 '13 at 17:13

RMalke

4,048
29
42

When I use visibility (hidden, visible) I get no error, but the Chart (area_chart_google) does not appear. I don't quite understand your second point. thanks. – Diego Sarmiento Mar 08 '13 at 17:27
visibility: hidden, worked for me but raising some other issues... so not using. – Jaikrat Aug 06 '14 at 11:38

score 0 · Answer 3 · answered Mar 08 '13 at 17:15

Your question was tagged with jQuery so here is a jQuery solution:

function getChart(selection) {

   var $area_chart_2 = $("#area_chart_2"),
       $area_chart_google = $("#area_chart_google");

   if (selection.value === "area_chart_2") {
      $area_chart_2.show(); //You could also use $area_chart_2.css("display", "block");
      $area_chart_google.hide(); //Or use $area_chart_google.css("display", "none");
   } else {   
      $area_chart_2.hide();
      $area_chart_google.show();
   }
}

I tried this function, no results. Same problem than using display none or block. Thank you! — Diego Sarmiento, Mar 08 '13 at 18:35

Cannot read property 'length' of null - using css display block (select/onchange)

3 Answers3