将PHP MySQL调用提供给Charts.js

Question

This question has been asked a few times but I've not been able to use the answers previously provided to finish my first dynamic Charts.js. I'm trying to build a simple example which works and once i've managed to do that I can expand on it. Currently I have the following:

1) A simple dropdown menu which you can pick a year from:

<form>
<div class="row">
<div class="label"><b>Select Year</b></div>
<select id="year" name="year" style = "width:100%">
<option value=2017>2017</option>
<option value=2018>2018</option>
</select>
</div>
</form>
<br>

2) Some javascript which I use to call my MySQL query on.change:

<script type="text/javascript">
jQuery(document).ready( function($) {
    var valueCheck;
    jQuery('#year').on( 'change', function () {
         year = $('#year').val();
     jQuery.ajax({
        type: "POST",
        url: "/wp-admin/admin-ajax.php",
        data: {
            action: 'call_chart_data',
            year: year,
        },
         success:function(output){
             jQuery('#y_data1').html( output );
         }
     });
    }).change();
});
</script>

3) PHP which queries the MySQL database:

function get_chart_data(){
global $wpdb;

$year = $_POST['year'];

$myQuery = $wpdb->get_results('SELECT dreamTeamPoints FROM afl_master WHERE player_id = "CD_I270963" AND year = '.$year);

$data = array();
foreach ($myQuery as $result) {
    $data[] = $result->dreamTeamPoints;
}

wp_die();
}

add_action('wp_ajax_nopriv_call_chart_data', 'get_chart_data');
add_action('wp_ajax_call_chart_data', 'get_chart_data');

The code to this point is successful in returning an array of values, as per below (when 2017 is selected):

Array ( [0] => 68 [1] => 152 [2] => 139 [3] => 143 [4] => 132 [5] => 155 
[6] => 65 [7] => 59 [8] => 111 [9] => 157 [10] => 92 [11] => 62 
[12] => 89 [13] => 83 [14] => 105 [15] => 34 [16] => 134 [17] => 47 
[18] => 124 [19] => 97 [20] => 153 [21] => 149 [22] => 76 [23] => 97 )

Now finally, I have a static graph which I want to convert to dynamic by replacing the variable y_data1 (third line in following code) with the MySQL response, however I don't know how to feed this into the javascript.

<script type="text/javascript">
var x_time  = [1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19,20,21,22,23,"QF","SF","PF","GF"];
var y_data1 = [91,115,67,46,,,,,,,,,,,68,111,111,77,95,106,99,93];
var y_data2 = [84,74,64,79,,,,,,,,,,,82,84,80,82,88,87,78,79];
new Chart(document.getElementById("myChart"), {
    type: 'bar',
    data: {
      labels: x_time,
      datasets: [{
        type:'line',
        label: 'Fantasy Points',
        fill:false,
        backgroundColor: 'orange',
        borderColor: 'orange',
        data: y_data1,
        yAxisID: 'left-axis',
        pointRadius: 5,
        pointHoverRadius: 7
      }, {
        label: 'Time On Ground (%)',
        fill: true,
        backgroundColor: 'black',
        borderColor: 'black',
        data: y_data2,
        yAxisID: 'right-axis'
      }]
    },
    options: {
      title: {
        display: false},
      legend: { display: true },
      maintainAspectRatio:true,
      responsive: true,
      tooltips: {mode: 'index', intersect: false},
      hover: {mode: 'nearest', intersect: true},
      scales: {
        xAxes: [{display: true, stacked:true, scaleLabel: {display: true, labelString: 'Round'}}],
        yAxes: [{
          type:'linear',
          id:'left-axis',
          display: true,
          position: 'left',
          scaleLabel: {display: true, labelString: 'Fantasy Points'},
          gridLines: {drawOnChartArea:false},
          ticks: {beginAtZero: true}
        },{
          type:'linear',
          id:'right-axis',
          display: true,
          position: 'right',
          stacked:false,
          scaleLabel: {display: true, labelString: 'Time On Ground (%)'},
          gridLines: {drawOnChartArea:false},
          ticks: {beginAtZero: true}
        }]
      }
    }
});
</script>

Appreciate any help people can provide.

Answer 1

I'd be returning the values as a string, rather than an array:

$data = '';
foreach ($myQuery as $result) {
    $data .= $result->dreamTeamPoints.',';
}

Then assigning it to a value on the successful ajax post:

     success:function(output){
         //jQuery('#y_data1').html( output );
         var out = output;
     }

and lastly putting the 'out' variable inside the assignment:

var y_data1 = [ out ];

You may be able to simplify it more - Go the Eagles.