Google Area Chart

Question

Я пытаюсь использовать Google Area Chart и PHP для отображения некоторых данных.Проблема в том, что я просто не могу заставить его работать.если кто-то может помочь, это будет самым ценным.

Вот мой код:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = new google.visualization.DataTable();
        data.addColumn('string', 'Date');
        data.addColumn('number', 'hits');
        data.addRows([
        <?php
$query = mysql_query("SELECT * FROM hits WHERE url='$url' GROUP BY date");
 while ($row = mysql_fetch_array($query)){
$hits=mysql_num_rows($query);
$date=$row['date'];?>
 ['<?php echo "$date";?>', <?php echo ".$hits.";?>],
<?php } ?>
]);

        var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
        chart.draw(data, {width: 400, height: 240, title: 'Company Performance',
                          hAxis: {title: 'Date', titleTextStyle: {color: '#FF0000'}}
                         });
      }
    </script>

    <div id="chart_div"></div>

Answer 1

Я бы определенно предложил отделить ваш код PHP (на стороне сервера) от кода JavaScript / html (на стороне клиента).

Хорошая вещь в Google API для диаграмм и графиков состоит в том, что есть несколько примеров, из которых можно извлечь, но становится намного труднее воспроизвести то, что вы просматриваете, когда вы встраиваете PHP с запросами MySQL в блоки, содержащие ваш JavaScript и Элементы пользовательского интерфейса.

Ниже приведен грубый пример того, как вы «могли бы» разделить эти вещи. В действительности вы хотели бы, чтобы ваш код на стороне сервера (в вашем случае PHP) был совершенно отдельным файлом от кода вашего дисплея / интерфейса пользователя (HTML и JavaScript).

«ДАТА» и «ХИТЫ» в блоке «Код переднего конца» на самом деле не являются переменными или значениями, я просто указываю, что именно здесь вы должны ввести свои значения. В идеале вы должны передать данные из вашего запроса MySQL через код сервера PHP в код JavaScript, а затем выполнить итерацию по нему для построения графика. Передача информации от PHP к JS может быть легко осуществлена ​​с использованием формата обмена данными JSON. И PHP, и JavaScript (jQuery) имеют функции для кодирования и декодирования в / из JSON.

Код переднего конца:

<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Date');
    data.addColumn('number', 'hits');
    data.addRows(
       ['DATE', 'HITS']
    );

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data, {width: 400, height: 240, title: 'Company Performance',
                      hAxis: {title: 'Date', titleTextStyle: {color: '#FF0000'}}
                     });
  }
</script>

<div id="chart_div"></div>

Код конца:

<?php
$query = mysql_query("SELECT * FROM hits WHERE url='$url' GROUP BY date");
$data_to_return = array();
while ($row = mysql_fetch_array($query))
{
    $hits=mysql_num_rows($query);
    $date=$row['date'];
    $data_to_return[$date] = $hits; //building array of date=>hits data
}
$data_to_send_to_front_end = json_encode($data_to_return); //ridiculous variable name
?>