За последние 24 часа нас посетили 11692 программиста и 787 роботов. Сейчас ищут 189 программистов ...

Не загружается диаграмма Google Charts после загрузки страницы

Тема в разделе "PHP для новичков", создана пользователем olegue, 26 сен 2022.

  1. olegue

    olegue Новичок

    С нами с:
    26 сен 2022
    Сообщения:
    3
    Симпатии:
    0
    Здравствуйте, написал скрипт, который из таблицы mysql загружает данные в google charts
    к элементам выбора даты подвязал события и они отлично работают, диаграмма загружается и видоизменятся в зависимости от даты и времени
    Проблема в том , что после загрузки страницы я хочу что бы сразу загружалась диаграмма по данным по умолчанию но ее нет . В консоле пишется
    Код (Text):
    1. Uncaught TypeError: google.visualization is undefined
    2.     drawChart aac_dev99.php:67
    3.     <anonymous> aac_dev99.php:23
    вот эта строка
    Код (Text):
    1. var data = google.visualization.arrayToDataTable(jsondata);
    с номером 67

    Вот полный код страницы.
    Код (Text):
    1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    2.   "http://www.w3.org/TR/html4/strict.dtd">
    3. <html>
    4. <title> =====</title>
    5. <meta charset="utf-8">
    6. <script src='//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js'></script>
    7. <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
    8.  
    9.  
    10.  
    11. <form method='POST'>
    12.  
    13.  
    14. <?php
    15. //$today = date("Y-m-d H:i:s");
    16. $today = date("Y-m-d");
    17. $ntoday=$today." 00:00:00";
    18. $ktoday=$today." 23:59:00";
    19.  
    20. if (isset($_POST['ndate']))
    21.     {$ndate=$_POST['ndate'];}
    22.     else {$ndate=$ntoday;}
    23. echo "C "."<input type=datetime name=ndate  id=ndate value= '$ndate' >";
    24. if (isset($_POST['kdate']))
    25.     {$kdate=$_POST['kdate'];}
    26.     else {$kdate=$ktoday;}
    27. echo "по <input type=datetime name=kdate id=kdate value='$kdate'>";
    28.  
    29.  
    30. $mname="Включить";
    31. $chkstate = file_get_contents('pomidor.txt', FALSE, NULL, 3, 1);
    32. echo $chkstate;
    33. if (checkstate==')') {echo "<input type= 'checkbox'  id='checkrep' name='chkrep'  value=1>".$mname; echo $chkstate;echo "<br>"; }
    34. else  {echo "<input type= 'checkbox'  id='checkrep' name='chkrep'  value=0>".$mname; echo $chkstate;echo "<br>";}
    35.  
    36. echo "<br>";
    37.  
    38.  
    39. $ndata = $_POST['ndate'];$kdata = $_POST['kdate'];
    40.  
    41. ?>
    42. </form>
    43.  
    44. <script>
    45.  
    46.  
    47. $(document).ready(function(){
    48.     alert("вход");
    49.             var sendData = $(this).closest('form').serialize();  
    50.             var dtochart = $.ajax({          url: "gchart.php",  data:sendData,  dataType: "text",   type: 'POST',      async: false          }).responseText;
    51.             drawChart(dtochart);
    52.    
    53. })
    54.  
    55.  
    56.   $('#ndate').on('change', function()
    57.             {
    58.              var sendData = $(this).closest('form').serialize();  
    59.             var dtochart = $.ajax({          url: "gchart.php",  data:sendData,  dataType: "text",   type: 'POST',      async: false          }).responseText;
    60.             drawChart(dtochart);
    61.                 ///alert (ttt);
    62.              });
    63.  
    64.  
    65. $('#kdate').on('change', function()
    66.             {
    67.              var sendData = $(this).closest('form').serialize();  
    68.             var dtochart = $.ajax({          url: "gchart.php",  data:sendData,  dataType: "text",   type: 'POST',      async: false          }).responseText;
    69.         drawChart(dtochart);
    70.                 ///alert (ttt);
    71.              });
    72.  
    73.  
    74.   $(':checkbox').on('change', function()
    75.             {
    76.              var sendData = $(this).closest('form').serialize();  
    77.             var ttt = $.ajax({          url: "rep.php",  data:sendData,  dataType: "text",   type: 'POST',      async: false          }).responseText;
    78.                 ///alert (ttt);
    79.              });
    80.  
    81. </script>
    82.  
    83.  
    84. <!-- This loads the 'corechart' package. -->  
    85. <script type="text/javascript">
    86.  
    87. google.charts.load('current', {'packages':['corechart']});
    88. google.charts.setOnLoadCallback(drawChart);
    89.  
    90. function drawChart(jsondata)
    91. {
    92.     jsondata = eval('(' + jsondata + ')');
    93.            
    94.     console.log(jsondata);
    95.     var data = google.visualization.arrayToDataTable(jsondata);
    96.    
    97. // Curved line
    98. var options = {        title: 'Temperature',        curveType: 'function',        legend: { position: 'bottom' }        };
    99. // Curved chart
    100. var chart = new google.visualization.LineChart(document.getElementById('curve_chart'));
    101. chart.draw(data, options);
    102.  
    103. } // End bracket from drawChart
    104. </script>
    105.  
    106. <div id="curve_chart" style="width: 900px; height: 480px;"></div>
    107. <p>Last line in html</p> <!-- For debugging -->
    108. </html>
    в чем может быть проблема. Подскажите плиз.
     
  2. olegue

    olegue Новичок

    С нами с:
    26 сен 2022
    Сообщения:
    3
    Симпатии:
    0
    отвечу сам себе. Вот нашел решение
    https://stackoverflow.com/questions/21659671/typeerror-google-visualization-is-undefined

    Код (Text):
    1. Yes, it seems that package was not fully loaded when arrayToDataTable was called. At least for the first chart.
    Но в моем случае это мало что решает, тем не менее хорошая диагностика это уже полдела.
     
  3. ADSoft

    ADSoft Старожил

    С нами с:
    12 мар 2007
    Сообщения:
    3.504
    Симпатии:
    671
    Адрес:
    Татарстан
    так на момент открытия страницы у вас в jsondata есть ли что-то? наверняка нет... а надо чтоб было )

    и таки к PHP не имеет отношения вопрос
     
  4. olegue

    olegue Новичок

    С нами с:
    26 сен 2022
    Сообщения:
    3
    Симпатии:
    0
    понял, я должен загрузить переменную jsondata до момента $(document).ready(function(){}. правильно?
    С тем чтобы задать начальную инициализацию графиков.