Trying again, JSON/Ajax issue

46 views
Skip to first unread message

Chris Thomas

unread,
Apr 1, 2021, 9:37:38 AM4/1/21
to Google Visualization API

When I use text in my call the report displays without issue.

var data = google.visualization.arrayToDataTable([['Quarter', 'Current Enrollment','SBHC Enrollment','Patients Seen'],['Quarter 1',1500,800,600],['Quarter 2',1450,840,700],['Quarter 3',1480,920,800]],false);

But when I use a variable which has the exact same text I get the following error and a blank screen.

Uncaught (in promise) Error: Column header row must be an array.

The variable is an array as I first parse it to text, clean off the ends (white space) and then put it into an array.  I test the array (is_array) and all is well. I output the array to the console.  I've even copied the console output and pasted it back into the arrayToDataTable and it works fine so I am at a loss for why this is not working.

Full code below:

<!DOCTYPE html>


<?php


// ENROLLMENT BY YEAR


  include '../header.php';

  include '../pdo.php';

  $siteid = $_GET['siteid'];

  $year = $_GET['year'];

  $year = date("Y"); 

  $stmt = $pdo->prepare("select operatorid from sites where id = ?");

  $stmt->execute([$siteid]);

  $operatorid = $stmt->fetchColumn();

  $count= $stmt->rowCount();

  $stmt = $pdo->prepare("SELECT concat('Quarter ', quarter) as quarter, CONVERT(currentenrollment,UNSIGNED INTEGER) AS currentenrollment,CONVERT(currentpatients,UNSIGNED INTEGER) AS currentpatients, CO$

  $stmt->execute([$siteid,$year]);


?>


<html>

<head>

<title>Enrollment</title>

<script type="text/javascript" src="loder.js"></script>


<script type="text/javascript">


google.load('visualization', '1', {'packages':['corechart']});

google.setOnLoadCallback(drawChart);


function drawChart() {


  var data = new google.visualization.DataTable();

  var jsonData = $.ajax({

    url: "getEnrollmentData.php",

    data: {site:<?php echo $siteid?>,year:<?php echo $year?>} ,

    dataType: "json",

    async: false

  }).responseText;



  mystring = jsonData.trim();

  mystring = mystring.substr(1);

  mystring = mystring.substring(0, mystring.length - 1);

  var myarray = new Array(mystring);

  console.log("'"+myarray+"'");

// The line below WORKS

//var data = new google.visualization.arrayToDataTable([['Quarter', 'Current Enrollment','SBHC Enrollment','Patients Seen'],['Quarter 1',1500,800,600],['Quarter 2',1450,840,700],

['Quarter 3',1480,920,800]],false);

// This line DOES NOT even though the data is the same as above.

  var data = new  google.visualization.arrayToDataTable([myarray]);

  var options = {

    chart: {

      title: 'Enrollment',

      subtitle: 'By Year',

      legend: { position: 'bottom' },

      vAxis: {title: 'Quarter'}

    }

  }


  var chart = new google.visualization.ColumnChart(document.getElementById('areachart'));

  chart.draw(data, options);

}


</script>


</head>

<body>

     <div id="areachart" style="width: 1300px; height: 800px"></div>


<div style="padding-left:300px">

Year&nbsp&nbsp;

<select name="cars" id="year">


<?php 


  $stmt = $pdo->prepare("select distinct year from reportmedical where siteid = ? order by year desc");

  $stmt->execute([$siteid]);

  foreach ($stmt as $row) {

    echo "<option value=" . $row['year'] . ">" . $row['year'] . "</option>";

  }

?>

</select>

</div>

</body>

</html>

Reply all
Reply to author
Forward
0 new messages