如何在Google图表中使用PHP循环

Question

我研究了很长时间，似乎无法弄清楚如何使其工作。

我正在使用谷歌折线图，我想用PHP循环中的数据填充图表。

我尝试了以下链接中的以下示例

PHP数组到谷歌图表

如何使用php循环将mysql数据放入Google图表？

循环使用Google Charts Javascript

但是它们都不起作用，该图表根本无法绘制。

这是使用php之前的代码：

/* This is how how google charts layout is without the php

   var data = google.visualization.arrayToDataTable([

        ["Year", "Orouke", {type: 'string', role: 'tooltip'}, "Feis Nara", {type: 'string', role: 'tooltip'}, "Garden State Feis", {type: 'string', role: 'tooltip'},],
          [2014,  1, "Feis: Orouke Feis Date: 10-12-2014 Rank: 1st Place", null, "", null, ""],
          [2015,  11, "Feis: Orouke Feis Date: 1-12-2015 Rank: 11th Place", null, "", null, ""],
          [2016,  60, "Feis: Orouke Feis Date: 8-30-2016 Rank: 60th Place", null, "", null, ""],
          [2017,  10, "Feis: Orouke Feis Date: 9-25-2017 Rank: 10th Place", null, "", null, ""],
          [2014,  null, "", 4, "Feis: Feis Nara Feis Date: 2-1-2014 Rank: 4th Place", null, ""],
          [2015,  null, "", 46, "Feis: Feis Nara Feis Date: 3-26-2015 Rank: 46th Place", null, ""],
          [2016,  null, "", null, "", null, ""],
          [2017,  null, "", 5, "Feis: Feis Nara Feis Date: 1-25-2017 Rank: 5th Place", null, ""],
          [2014,  null, "", null, "", 12, "Feis: Garden State Feis Date: 5-17-2014 Rank: 12th Place"],
          [2016,  null, "", null, "", 26, "Feis: Garden State Feis Date: 8-27-2016 Rank: 26th Place"],

    ]); 

    var columnsTable = new google.visualization.DataTable();
      columnsTable.addColumn('number', 'colIndex');
      columnsTable.addColumn('string', 'colLabel');
    var initState= {selectedValues: []};
      for (var i = 1; i < data.getNumberOfColumns(); i++) {
          columnsTable.addRow([i, data.getColumnLabel(i)]);
          //initState.selectedValues.push(data.getColumnLabel(1));
         // initState.selectedValues.push(data.getColumnLabel(3));
      } */

这是我用php尝试过的代码：

//GET ID for CHART

if(isset($_GET['id'])) {
$childId=$_GET['id']; 
$chartsql = "SELECT dancer_id1, dancer_placement1, number_competitors1, feis_entered, null as dancer_placement2, null as number_competitors2, null as feis_entered2, null as dancer_placement3, null as number_competitors3, null as feis_entered3 from mark_cards1 where dancer_id1='$childId' 
union all 
select dancer_id2,null, null, null, dancer_placement2, number_competitors2, feis_entered, null as dancer_placement3, null as number_competitors3, null as feis_entered3 from mark_cards2 where dancer_id2='$childId'
union all 
select dancer_id3,null, null, null, null, null, null, dancer_placement3, number_competitors3, feis_entered from mark_cards3 where dancer_id3='$childId'";
$ChartRes = mysqli_query($con,$chartsql);
$chartdata = array();

while ($ChartRow=mysqli_fetch_array($ChartRes)){
    $first[] = $ChartRow['dancer_placement1'];
    $second[] = $ChartRow["dancer_placement2"];
    $third[]= $ChartRow["dancer_placement3"];
    $feis_entered = $ChartRow["feis_entered"];

}

$year = intval($feis_entered);
};
?>


function drawLineChart() {
      var data = google.visualization.arrayToDataTable([

          // This is how I tried to use php in google charts

          ['Year', <?php foreach ($feis_entered as $feis) { echo $feis; }?>, {type: 'string', role: 'tooltip'}],
          [<?php foreach ($year as $years) { echo $years; }?>, <?php foreach ($first as $places) { echo $places; }?>, <?php echo "Feis: $feis Date: $years Rank: $places";?>]
          ]);


      // build ticks
var ticks = [];
for (var i = 0; i <= 60; i = i + 15) {
addTick(i);
}
function addTick(i) {
var place;
var digit;
if (i === 0) {
  i = 1;
}
digit = i.toString().substr(i.toString().length - 1);
switch (digit) {
  case '1':
    place = 'st place';
    break;

  case '2':
    place = 'nd place';
    break;

  case '3':
    place = 'rd place';
    break;

  default:
    place = 'th place';
}
ticks.push({
  v: i,
  f: i + place
});
}

    var chart = new google.visualization.ChartWrapper({
        chartType: 'LineChart',
        containerId: 'line_chart',
        dataTable: data,
        options: {
            title: 'Feis compeition placements over the years',
            tooltip: {isHtml: true},
            //pointSize: 5,
           // width: 670,
            //height: 550,
            hAxis: {
                format: '0',
                ticks: data.getDistinctValues(0),
                gridlines: {
                    color: 'transparent'
                }
            },
            interpolateNulls: true,
            legend: { 
               // position: 'bottom' 
            },
            vAxis: { 
                title: 'Competition Placement', 
                direction: -1, 
                gridlines: {count: 10}, 
                ticks: ticks
            }
        }
    });  

      chart.draw();

    var columnFilter = new google.visualization.ControlWrapper({
        controlType: 'CategoryFilter',
        containerId: 'filter_lines',
        dataTable: columnsTable,
        options: {
            filterColumnLabel: 'colLabel',
            ui: {
                label: 'Filter',
                allowTyping: true,
                selectedValuesLayout: 'asideWrapping',
                caption: 'Choose a Feis...',
                labelStacking: 'vertical'
            }
        },
        state: initState
    });

    google.visualization.events.addListener(columnFilter, 'statechange', function () {
    var state = columnFilter.getState();
    var row;
    var columnIndices = [0];
    for (var i = 0; i < state.selectedValues.length; i++) {
        row = columnsTable.getFilteredRows([{column: 1, value: state.selectedValues[i]}])[0];
        columnIndices.push(columnsTable.getValue(row, 0));
    }
    // sort the indices into their original order
    columnIndices.sort(function (a, b) {
        return (a - b);
    });
    chart.setView({columns: columnIndices});
    chart.draw();
});

columnFilter.draw();
}

该图应最终看起来像这样

有办法吗？