How to make a JSON from PHP working in chart.JS

Question

everyone. What I want is Bubble Chart(Chart.js) with data from PHP. PHP executes python file. *Actually, executing complicated algorithm, however here simplify with test.py.

index.php

<?php

$pyfile = "python ./test.py";
exec($pyfile, $output, $rtn);
$outputJson = json_encode($output);
?>

test.py

import sys
if __name__=='__main__':

 print [{'data': [{'x':10 ,'y':10, 'r':30}],'backgroundColor':[ 'rgb(141,63,223)'],'label': ['test1']},
       {'data': [{'x':20 ,'y':20, 'r':50}],'backgroundColor':[ 'rgb(141,29,73)'],'label': ['test2']},
       {'data': [{'x':30 ,'y':30, 'r':70}],'backgroundColor':['rgb(16,230,73)'],'label': ['test3']}]

index.php

<body>
<canvas id="my_chart">
Canvas not supported...
</canvas>

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.1/Chart.min.js"> 
</script>

I have to bring the result from php to javascript like this.

<script>

var type = 'bubble';

  var data = {
    datasets: //I want to insert result from php here
    ]};

  var options = {

      title: {
        display: true,
        text: 'bubble-sample'
      },

      scales: {

          xAxes: [{
              ticks: {max: 50, min: 0,stepSize: 10}
          }],

          yAxes: [{
              ticks: {max: 50,min: 0,stepSize: 10}
          }]
      },

};
var ctx = document.getElementById('my_chart').getContext('2d');
var myChart = new Chart(ctx, {
    type: type,
    data: data,
    options: options
  });

In the end, with Chart.js...

var type = 'bubble';

  var data = {
    datasets: [
        {
           "data": [{
               "x":40,
               "y":30,
               "r":30
           },],

           "backgroundColor":[ "rgb(141,63,223)" ],

           "label": ["test1n"]
        },
        {

            data: [{"x":20 ,"y":20, "r":50} ,],

            backgroundColor:[ "rgb(141,29,73)"],

            label: ["test2"]
        },
        {

            data: [{"x":30 ,"y":30, "r":70} ,],

            backgroundColor:["rgb(16,230,73)"],

            label: ["test3"]
        }
    ]};

  var options = {

      title: {
        display: true,
        text: 'bubble-sample'
      },

      scales: {

          xAxes: [{
              ticks: {max: 50, min: 0,stepSize: 10}
          }],

          yAxes: [{
              ticks: {max: 50,min: 0,stepSize: 10}
          }]
      },

};
var ctx = document.getElementById('my_chart').getContext('2d');
var myChart = new Chart(ctx, {
    type: type,
    data: data,
    options: options
  });

Here, I found how to use php variables in javascript.

var outputjs = '<?php echo $outputJson; ?>'

However, it is just a string, because this is coming from "print" in python file.

How should I do to make this result of python script working in Chart.js as a datasets array??

Doesn't seem like python should really be tagged here. This is primarily a php/js question — Gillespie, Apr 26 '18 at 14:43
Possible duplicate of [Chart.js - Getting data from database using mysql and php](https://stackoverflow.com/questions/30928840/chart-js-getting-data-from-database-using-mysql-and-php) — Patrick Q, Apr 26 '18 at 14:47
Possible duplicate of [How to json\_encode php array but the keys without quotes](https://stackoverflow.com/questions/13523729/how-to-json-encode-php-array-but-the-keys-without-quotes) — Gillespie, Apr 26 '18 at 14:49
`JSON.parse(outputjs)` will convert it from a string back to JSON — Gillespie, Apr 26 '18 at 14:50

score 1 · Answer 1 · answered Apr 26 '18 at 14:47

1

Try

 var outputjs = <?php echo $outputJson; ?>

(Surrounding it with ' is making it a string)

answered Apr 26 '18 at 14:47

arsis-dev

413
1
4
14

How to make a JSON from PHP working in chart.JS

1 Answers1