2016-01-30 2 views
0

Я пытаюсь отобразить данные из базы данных, используя php echo Этот код отображает диаграмму, и я пытаюсь проверить, могу ли я изменить данные через echo (изменить значение 350 на другое) , Я попробовал его в приведенном ниже примере кода, но он не работает. Что может быть неправильным?Google Linechart Данные из MYSQL php echo

Эта строка имеет php var raw_data = [['Website',, 73, 104, 129, 146, 176, 139, 149, 218, 194, 96, 253], прямо сейчас я не вытащил данные из mysql который я планирую сделать позже, как только я уверен, что я могу управлять данными с помощью эха

<script> 

     /* 
     * This script is dedicated to building and refreshing the demo chart 
     * Remove if not needed 
     */ 

     // Demo chart 
     var chartInit = false, 
      drawVisitorsChart = function() 
      { 
       // Create our data table. 
       var data = new google.visualization.DataTable(); 
       var raw_data = [['Website', <?php echo '350';?>, 73, 104, 129, 146, 176, 139, 149, 218, 194, 96, 253], 
           ['Shop', 82, 77, 98, 94, 105, 81, 104, 104, 92, 83, 107, 91], 
           ['Forum', 50, 39, 39, 41, 47, 49, 59, 59, 52, 64, 59, 51], 
           ['Others', 45, 35, 35, 39, 53, 76, 56, 59, 48, 40, 48, 21]]; 

       var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; 

       data.addColumn('string', 'Month'); 
       for (var i = 0; i < raw_data.length; ++i) 
       { 
        data.addColumn('number', raw_data[i][0]); 
       } 

       data.addRows(months.length); 

       for (var j = 0; j < months.length; ++j) 
       { 
        data.setValue(j, 0, months[j]); 
       } 
       for (var i = 0; i < raw_data.length; ++i) 
       { 
        for (var j = 1; j < raw_data[i].length; ++j) 
        { 
         data.setValue(j-1, i+1, raw_data[i][j]); 
        } 
       } 

       // Create and draw the visualization. 
       // Learn more on configuration for the LineChart: http://code.google.com/apis/chart/interactive/docs/gallery/linechart.html 
       var div = $('#demo-chart'), 
        divWidth = div.width(); 
       new google.visualization.LineChart(div.get(0)).draw(data, { 
        title: 'Monthly unique visitors count', 
        width: divWidth, 
        height: $.template.mediaQuery.is('mobile') ? 180 : 265, 
        legend: 'right', 
        yAxis: {title: '(thousands)'}, 
        backgroundColor: ($.template.ie7 || $.template.ie8) ? '#494C50' : 'transparent', // IE8 and lower do not support transparency 
        legendTextStyle: { color: 'white' }, 
        titleTextStyle: { color: 'white' }, 
        hAxis: { 
         textStyle: { color: 'white' } 
        }, 
        vAxis: { 
         textStyle: { color: 'white' }, 
         baselineColor: '#666666' 
        }, 
        chartArea: { 
         top: 35, 
         left: 30, 
         width: divWidth-40 
        }, 
        legend: 'bottom' 
       }); 

       // Message only when resizing 
       if (chartInit) 
       { 
        notify('Chart resized', 'The width change event has been triggered.', { 
         icon: 'img/demo/icon.png' 
        }); 
       } 

       // Ready 
       chartInit = true; 
      }; 

     // Load the Visualization API and the piechart package. 
     google.load('visualization', '1', { 
      'packages': ['corechart'] 
     }); 

     // Set a callback to run when the Google Visualization API is loaded. 
     google.setOnLoadCallback(drawVisitorsChart); 

     // Watch for block resizing 
     $('#demo-chart').widthchange(drawVisitorsChart); 

     // Respond.js hook (media query polyfill) 
     $(document).on('respond-ready', drawVisitorsChart); 

    </script> 
+0

Мне потребовалось некоторое время, чтобы найти его, но я удалил исходный комментарий. Когда вы говорите «это не работает», можете ли вы быть более конкретным? – RamRaider

+0

@RamRaider Я попытался изменить значение с 350 на что-то другое, но график исчезает, как только я это сделаю. – ABI

+0

, но действительно ли '350' записывается как переменная в исходном коде (смотрите в источнике)? Я бы предположил, что вы удаляете цитаты примерно с '350 '- вам нужен номер, то, что вы пишете с PHP, технически является строкой, т.е.' 'Должно это делать – RamRaider

ответ

0

Я не могу быть уверен, но я думаю, что проблема заключалась в другой в яваскрипта коды. При тестировании у меня появилось несколько ошибок, которые могут быть связаны с $.template ~ onc ethey, которые были удалены/заменены.

На странице должно быть расширение .php для интерпретатора PHP-кода. Отладка в консоли зависит от используемого вами браузера - обычно, если вы щелкните правой кнопкой мыши на странице и выберите inspect element, консоль появится внизу - то, что вы видите, зависит от браузера, но, конечно же, Firefox & У Chrome есть вкладки под названием console - смотрите, что и искать ошибки!

<!doctype html> 
<html> 
    <head> 
     <meta charset='utf-8'> 
     <title>jQuery experiments with Google apis</title> 
     <script src='https://www.google.com/jsapi'></script> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script> 
     <script> 

      divWidth=600; 
      divHeight=400; 



      var chartInit = false, 
       drawVisitorsChart = function(){ 
        var data = new google.visualization.DataTable(); 
        var raw_data = [['Website', <?php echo 428;?>, 73, 104, 129, 146, 176, 139, 149, 218, 194, 96, 253], 
            ['Shop', 82, 77, 98, 94, 105, 81, 104, 104, 92, 83, 107, 91], 
            ['Forum', 50, 39, 39, 41, 47, 49, 59, 59, 52, 64, 59, 51], 
            ['Others', 45, 35, 35, 39, 53, 76, 56, 59, 48, 40, 48, 21]]; 

        var months = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']; 

        data.addColumn('string', 'Month'); 
        for (var i = 0; i < raw_data.length; ++i){ 
         data.addColumn('number', raw_data[i][0]); 
        } 

        data.addRows(months.length); 

        for (var j = 0; j < months.length; ++j){ 
         data.setValue(j, 0, months[j]); 
        } 
        for (var i = 0; i < raw_data.length; ++i){ 
         for (var j = 1; j < raw_data[i].length; ++j){ 
          data.setValue(j-1, i+1, raw_data[i][j]); 
         } 
        } 
        /* 
         the $.template references all caused errors for me 
         so I removed them 
        */ 

        var div = $('#demo-chart'); 
        var divWidth = div.width(); 

        new google.visualization.LineChart(div.get(0)).draw(data, { 
         title: 'Monthly unique visitors count', 
         width: divWidth, 
         height: divHeight,/*$.template.mediaQuery.is('mobile') ? 180 : 265, */ 
         legend: 'right', 
         yAxis: {title: '(thousands)'}, 
         backgroundColor: '#494C50', 
         legendTextStyle: { color: 'white' }, 
         titleTextStyle: { color: 'white' }, 
         hAxis: { 
          textStyle: { color: 'white' } 
         }, 
         vAxis: { 
          textStyle: { color: 'white' }, 
          baselineColor: '#666666' 
         }, 
         chartArea: { 
          top: 35, 
          left: 30, 
          width: divWidth-40 
         }, 
         legend: 'bottom' 
        }); 

        if(chartInit) { 
         notify('Chart resized', 'The width change event has been triggered.', { 
          icon: 'img/demo/icon.png' 
         }); 
        } 
        chartInit = true; 
       }; 
      google.load('visualization', '1', { 
       'packages': ['corechart'] 
      }); 

      google.setOnLoadCallback(drawVisitorsChart); 

      /* This caused errors for me */ 
      /* $('#demo-chart').widthchange(drawVisitorsChart);*/ 

      $(document).on('respond-ready', drawVisitorsChart); 

     </script> 
    </head> 
    <body> 
     <div id='demo-chart' style='width:600px;height:400px;'></div> 
    </body> 
</html> 
Смежные вопросы