Pushing json encoded php into chart.js

Question

I am trying to push json encoded form my database select into chart.js data set but im not sure how to go about it without over engineering it.

Here is a simple select of scores from its retrospective table:

if($teamData == 0){
  $allTeams = 'All';
} else{
$sql = "SELECT * FROM compScore WHERE memberId = 1";
$result = $conn->query($sql);


  if ($result->num_rows > 0) {
      while($row = $result->fetch_assoc()) {
          $jsonScores = json_encode($row, JSON_PRETTY_PRINT);
    }
  }
}
header('Content-type: application/json');
echo $jsonScores;

the output of this is:

{ "id": "1", "score1": "2", "score2": "3", "score3": "5", "score4": "4", "score5": "3", "score6": "2", "score7": "1", "score8": "3", "memberId": "1" }

I have one issue where it only fetches 1 record and I also want to exclude the field memberId

Even more so how do I push that result into:

  datasets : [
    {
      fillColor: "rgba(102,45,145,.1)",
      strokeColor: "rgba(102,45,145,1)",
      pointColor : "rgba(220,220,220,1)",
      pointStrokeColor : "#fff",

      data : [] // HERE IS WHERE THE DATA NEEDS TO GO
    }

first remove unnecessary elements from array. refer this link : http://stackoverflow.com/questions/4466159/delete-element-from-multidimensional-array-based-on-value — prakash tank, Feb 23 '17 at 13:52
after that encode it in to json format and pass in to the js library portion. — prakash tank, Feb 23 '17 at 13:53
@prakashtank im not sure how to pass it into the js lib, thats where I get a little stuck — PhpDude, Feb 23 '17 at 13:53
@Dude : http://stackoverflow.com/questions/30928840/chart-js-getting-data-from-database-using-mysql-and-php — prakash tank, Feb 23 '17 at 13:55

score 1 · Accepted Answer · answered Feb 23 '17 at 13:58

1

I think you should take a look into the json layout expected by charts.js. https://developers.google.com/chart/interactive/docs/reference#dataparam It requires a first level of cols and rows, where every column is described by an id, a label and a type. The google documentation is pretty good, despite the format expected is kind of tedius.

And here a PHP example for populating the chart.

https://developers.google.com/chart/interactive/docs/php_example

answered Feb 23 '17 at 13:58

nico91

86
8

Obviously this documentation is reference to Google charts, but I can easily translate this into chart.js? The example looks very similar. – PhpDude Feb 23 '17 at 14:11
Chart.js expects a very similar structure and is the only way it can fail so, attention to the json format and you should be fine. – nico91 Feb 23 '17 at 15:23

Pushing json encoded php into chart.js

1 Answers1