谷歌图表没有数据(空白页)

时间:2016-10-13 18:51:41

标签: javascript php charts laravel-4 google-visualization

我的网页包含8个谷歌图表

当我拥有图表的所有数据时,它可以正常工作

但有时候有些图表没有数据(8个中有2个或3个)

所以我得到一个空白页面导致这个图表

如何跳过空白数据图表的脚本

这里是其中一个脚本(所有类似的脚本)

<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);
    }

已编辑 :此数据源来自laravel 4.1中的父视图,并且是Google分析数据

所以有些用户可以访问图表的所有数据,有些用户无法访问某些图表中的数据

Edited2:

我更改了代码中的脚本,我得到了页面,但没有任何图表,新代码是:

<?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 } ?>

现在我在浏览器的控制台中出现了不同的错误:

“”未捕获的TypeError:无法读取未定义的属性'arrayToDataTable'“”

谢谢

1 个答案:

答案 0 :(得分:0)

我认为正确的方法可以让它发挥作用:)

此问题的答案位于问题中的 edited2 ,但有1次更改

你需要的是将谷歌图表加载到脚本之外并单独使用它:

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

那么你可以把你想要的条件放在我的那个:

<?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 } ?>

如果用户有正确的访问权限,那么所有图表都有效;)

感谢@WhiteHat的帮助