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 : stackoverflow.com/questions/4466159/… — prakash tank
– prakash tank, Commented Feb 23, 2017 at 13:52
after that encode it in to json format and pass in to the js library portion. — prakash tank
– prakash tank, Commented Feb 23, 2017 at 13:53
@prakashtank im not sure how to pass it into the js lib, thats where I get a little stuck — PhpDude
– PhpDude, Commented Feb 23, 2017 at 13:53

nico91 · Accepted Answer · 2017-02-23 13:58:39Z

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, 2017 at 13:58

nico91

868 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

PhpDude Over a year ago

Obviously this documentation is reference to Google charts, but I can easily translate this into chart.js? The example looks very similar.

nico91 Over a year ago

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.

Collectives™ on Stack Overflow

Pushing json encoded php into chart.js

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related