简体   繁体   中英

google charts no data (blank page)

i have a web page contain 8 google charts

when i have all data for the charts it work fine

but sometimes there is some charts has no data (2 or 3 out of the 8 )

so i get a blank page cause this charts

how to skip the script of the blank data charts

here is the script of one of them (all the similar script)

<script type="text/javascript">
  google.charts.setOnLoadCallback(drawCostCharts);

  function drawCostCharts() {
    var data = google.visualization.arrayToDataTable([
             ['WEEK', 'total Cost' ,{ role: 'annotation' } , 'Budget objectif' ],
                <?    foreach($***THEBlankDATAHERE***->getRows() as $row) {     

                        $DBcostmonth = DB::table('budget_objectif')
                                                    ->select('value')
                                                    ->where('cam_id', 2)
                                                    ->where('year', $row[1])
                                                    ->where('month', $row[0])
                                                    ->get();  
                        $test = $DBcostmonth[0]->value; ?>

            ["<? echo $row[0]; ?>",  <? echo $row[2]; ?>, <? echo floor($row[2]); ?>, <? echo $test; ?>], 
                <? }?>

          ]);

    var options = {
                            // title: 'Google Analytics Revenue',
                            vAxis: {minValue:0},
                            curveType: "function",width: 720, height: 400,
                            chartArea:{left:60,top:40,width:"90%",height:"70%"},
                            legend: {position: 'none'},
                            seriesType: 'bars',
                            series: {0:{color: 'purple'}},
                            isStacked:'true',
                            series: {1: {type: 'line', color:'red' , curveType: 'straight' }}


            };

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

Edited : this data source is from parent view in laravel 4.1 and it is a google analytics data

so some users have access to all data for the charts and some dont have access to data in some charts

Edited2 :

i change the script in the code and i get the page but without any charts the new code is :

<?php if ($tristanweekdata) { ?>
 <script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawCostCharts);

  function drawCostCharts() {
    var data = google.visualization.arrayToDataTable([
             ['WEEK', 'total Cost' ,{ role: 'annotation' } , 'Budget objectif'],
                <?    foreach($tristanweekdata->getRows() as $row) {

                $DBcostweek = DB::table('budget_objectif')
                                                    ->select('value')
                                                    ->where('cam_id', 2)
                                                    ->where('year', $row[1])
                                                    ->where('month', wtm($row[0]))
                                                    ->get();  
                    $test = $DBcostweek[0]->value/4.33; 


                ?>
            ["<? echo $row[0]; ?>",  <? echo $row[2]; ?>, <? echo floor($row[2]); ?> ,<? echo $test;?> ], 
                <? }?>

          ]);

    var options = {
                            // title: 'Google Analytics Revenue',
                            vAxis: {minValue:0},
                            curveType: "function",width: 720, height: 400,
                            chartArea:{left:60,top:40,width:"90%",height:"70%"},
                            legend: {position: 'none'},
                            seriesType: 'bars',
                            series: {0:{color: 'purple'}},
                            isStacked:'true',
                            series: {1: {type: 'line', color:'red' , curveType: 'straight' }}

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

 <?php } ?>

now i get different error in the console of the browser :

""Uncaught TypeError: Cannot read property 'arrayToDataTable' of undefined""

thanks

i figured the right way to make it work :)

the answer to this question is in the edited2 in the question but there is a 1 change

what you need is to to put the google chart load out the of the script and make it alone like that:

 <script type="text/javascript">
  google.charts.load('current', {'packages':['corechart']});
  </script>

then you can put the condition that you want in mine like that :

<?php if ($tristanweekdata) { ?>
     <script type="text/javascript">
      google.charts.setOnLoadCallback(drawCostCharts);

      function drawCostCharts() {
        var data = google.visualization.arrayToDataTable([
                 ['WEEK', 'total Cost' ,{ role: 'annotation' } , 'Budget objectif'],
                    <?    foreach($tristanweekdata->getRows() as $row) {

                    $DBcostweek = DB::table('budget_objectif')
                                                        ->select('value')
                                                        ->where('cam_id', 2)
                                                        ->where('year', $row[1])
                                                        ->where('month', wtm($row[0]))
                                                        ->get();  
                        $test = $DBcostweek[0]->value/4.33; 


                    ?>
                ["<? echo $row[0]; ?>",  <? echo $row[2]; ?>, <? echo floor($row[2]); ?> ,<? echo $test;?> ], 
                    <? }?>

              ]);

        var options = {
                                // title: 'Google Analytics Revenue',
                                vAxis: {minValue:0},
                                curveType: "function",width: 720, height: 400,
                                chartArea:{left:60,top:40,width:"90%",height:"70%"},
                                legend: {position: 'none'},
                                seriesType: 'bars',
                                series: {0:{color: 'purple'}},
                                isStacked:'true',
                                series: {1: {type: 'line', color:'red' , curveType: 'straight' }}

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

</script>    

     <?php } ?>

then all the charts is working if the user have the right access ;)

Thanks to @WhiteHat for his help

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM