Google Visualization ComboChart - Cannot read property 'minorTextOpacity' of null

Viewed 521

I'm using google visualization charts with ComboChart since a while and it was always working.

I did not change anything and suddenly I get following google visualization error message when loading my ComboChart: Cannot read property 'minorTextOpacity' of null.

What is wrong? Did Google change something in ComboChart usage?

Below some snippet of my code:

<html>
  <head>
    <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    <script type='text/javascript'>
      google.charts.load('current', {'packages':['corechart', 'controls']});
      google.charts.setOnLoadCallback(drawChart);

      function drawChart() {
        var data = google.visualization.arrayToDataTable({{{consumdata}}});

        var dashboard = new google.visualization.Dashboard(
            document.getElementById('dashboard_div'));

        var myRangeSlider = new google.visualization.ControlWrapper({
          controlType: 'DateRangeFilter',
          containerId: 'filter_div',
          options: {
            filterColumnLabel: 'Date',
            ui: {format: {pattern: 'yyyy/MM/dd'},
                step: 'day',
                cssClass: 'filter-date'
            }
          }
        });

        var ochart = new google.visualization.ChartWrapper({
          chartType: 'ComboChart',
          containerId: 'ochart_div',
          options: {
            focusTarget: 'category',
            curveType: 'function',
            width: 1100,
            height: 300,
            vAxis: [
                {
                    title: '[kWh]',
                    viewWindowMode: 'explicit', 
                    minValue: 0,
                    maxValue: 2000,
                    viewWindow: {min: 0,max:2000},
                },
                {
                    title: '[m³]',
                    viewWindowMode: 'explicit',
                    minValue: 0,
                    maxValue: 10,
                    viewWindow: {min: 0,max:10},
                },                
            ],            
            series: {
                0:{type: 'line', targetAxisIndex:0},
                1:{type: 'line', targetAxisIndex:0},
                2:{type: 'line', targetAxisIndex:1},
                },
            hAxis:{
                format: 'YYYY-MM'  
            },
            chartArea: {width: 950, height: 250},
            legend: {position: 'top'},
            thickness: 1,
            colors: ['green', 'red', 'blue'],
          },
          view: {
            columns: [0,2,3,4]
            }
        });

        var cchart = new google.visualization.ChartWrapper({
          chartType: 'LineChart',
          containerId: 'cchart_div',
          options: {
            focusTarget: 'category',
            curveType: 'function',
            width: 1100,
            height: 300,
            vaxis: [
                { 
                    title: "[kWh]",
                    viewWindowMode: 'explicit', 
                    minValue: 0,
                    maxValue: 1000,
                    viewWindow: {min: 0,max:1000},
                },
                { title: "[°C]",
                    viewWindowMode: 'explicit', 
                    minValue: -10,
                    maxValue: 20,
                    viewWindow: {min: -10,max:20},
                },
            ],
            series: {
                0:{type: 'line', targetAxisIndex:0},
                1:{type: 'line', targetAxisIndex:1},
                },
            hAxis:{
                format: 'YYYY-MM'  
            },
            chartArea: {width: 950, height: 250},
            legend: {position: 'top'},
            thickness: 1,
            colors: ['green', 'orange'],
          },
          view: {
            columns: [0,2,5]
            }
        });

        dashboard.bind(myRangeSlider, [ochart,cchart]);
        dashboard.draw(data);
    }

    </script>
  </head>

  <body>
        <div id='dashboard_div'>
         <div style="text-align: left;">Diagram1 </div>
         <div id='ochart_div'></div>
         <div id="filter_div"></div>
         <hr>
         <div style="text-align: left;">Diagram 2</div>
         <div id="cchart_div"></div>
        </div>
  </body>
</html>

Note: LineChart is working without problems.

1 Answers

it could be something that changed in the 'current' version.

google.charts.load('current', {'packages':['corechart', 'controls']});

try using a previously saved version, to see if it works.
see the release notes, click on the release dates on the right to see the version numbers...

version saved February 2020 (47)...

google.charts.load('47', {'packages':['corechart', 'controls']});

version saved October 2018 (46)...

google.charts.load('46', {'packages':['corechart', 'controls']});

version saved June 2017 (45.2)...

google.charts.load('45.2', {'packages':['corechart', 'controls']});

etc...

Related