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??
