Container not defined when toggling column data in Google Charts

Refresh

April 2019

Views

22 time

1

Displaying an Area Chart with data. Initial chart draws and displays fine, but when I try the onclick check boxes to remove a column and redraw, I get "Container not defined" error. The #chart element is contained in the base HTML and DOM, not being added later. The onclick events fire, and I can log data from those events, but setting the new chart in the view variable is where the error is happening.

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

                function drawChart() {
                    var data = google.visualization.arrayToDataTable([
                        ['Day', 'Col1', 'Col2', 'Col3', 'Col4', 'Col5', 'Col6'],
                        <?php
                        $dataPoints['Col1'] = $trafficPosts['Col1'];
                        $dataPoints['Col2'] = $trafficPosts['Col2'];
                        $dataPoints['Col3'] = $trafficPosts['Col3'];
                        $dataPoints['Col4'] = $trafficPosts['Col4'];
                        $dataPoints['Col5'] = $trafficPosts['Col5'];
                        $dataPoints['Col6'] = $trafficPosts['Col6'];
                        for($x = 0; $x <= 5; $x++){
                            $date = $dataPoints['Col1'][$x]['date'];
                            $datestart = new DateTime($date);
                            $now = new DateTime();

                            echo "['".$now->diff($datestart)->format("Day %r%a")."',";

                            foreach($dataPoints AS $key=>$value){
                                echo $dataPoints[$key][$x]['views'].',';
                            }

                            echo "],\n";
                        }?>

                    );

                    var options = {
                        legend: { position: 'top' },
                        lineWidth: 2,
                        areaOpacity: 1,
                        colors: ['#00b8e2', '#5bdbab', '#f6bd60', '#ff745e', '#ff225e', '#806da0'],
                        pointSize: 8
                    };



                    var chart = new google.visualization.AreaChart(document.getElementById('chart'));
                    chart.draw(data, options);

                    var toggleCol1 = document.getElementById("show-Col1");
                    var toggleCol2 = document.getElementById("show-Col2");
                    var toggleCol3 = document.getElementById("show-Col3");
                    var toggleCol4 = document.getElementById("show-Col4");
                    var toggleCol5 = document.getElementById("show-Col5");
                    var toggleCol6 = document.getElementById("show-Col6");
                    toggleCol1.onclick = function()
                    {
                        view = new google.visualization.AreaChart(data);
                        view.hideColumns([1]); 
                        chart.draw(view, options);
                    }
                    toggleCol2.onclick = function()
                    {
                        view = new google.visualization.AreaChart(data);
                        view.hideColumns([2]); 
                        chart.draw(view, options);
                    }
                    toggleCol3.onclick = function()
                    {
                        view = new google.visualization.AreaChart(data);
                        view.hideColumns([3]); 
                        chart.draw(view, options);
                    }
                    toggleCol4.onclick = function()
                    {
                        view = new google.visualization.AreaChart(data);
                        view.hideColumns([4]); 
                        chart.draw(view, options);
                    }
                    toggleCol5.onclick = function()
                    {
                        view = new google.visualization.AreaChart(data);
                        view.hideColumns([5]); 
                        chart.draw(view, options);
                    }
                    toggleCol6.onclick = function()
                    {
                        view = new google.visualization.AreaChart(data);
                        view.hideColumns([6]); 
                        chart.draw(view, options);
                    }
                }

                window.addEventListener('resize', drawChart);

0 answers