Nice to meet you.
I'm a beginner at javascript, but I found chart.js as a relatively easy library to draw graphs and made a simple sample.
In practical use, I think it would be a requirement to set the values stored on the DB to the values in the graph, but I am not sure how to pass the values of the php-acquired arrays to chart.js.
When I search for it, the keyword ajax appears, but if you only want to see it when you open the page,
<?php
$js_ary=json_encode($db_ary);
?>
<script type="text/javascript">
<!--
variable = JSON.parse('<?phpecho$js_ary;?>');
(omitted below)
So, is it all right to pass the data in JSON format and process it?
I'm sorry to ask you such a complete amateur question, but I appreciate your cooperation.
javascript php json chart.js
Should I just pass the data in JSON format and process it?
Even if it is not JSON, you can display the config 'data: [0,0,0,0,0], ', and so on by outputting echo.
Also, I fixed the display sample to display it from JSON data (fixed data) below.
var randomScalingFactor=function(){
return Math.round (Math.random()*100);
};
varconfig = {
type: 'pie',
data: {
datasets: [{
data: [0,0,0,0,0],
backgroundColor: [
window.chartColors.red,
window.chartColors.orange,
window.chartColors.yellow,
window.chartColors.green,
window.chartColors.blue,
],
label: 'Dataset1'
}],
labels:
"Red",
'Orange',
'Yellow',
'Green',
'Blue'
]
},
options: {
responsive —true
}
};
window.onload=function(){
varctx = document.getElementById('chart-area').getContext('2d');
window.myPie=new Chart(ctx,config);
varjsondata=JSON.parse('{"A":12, "B":20, "C":25, "D":21, "E":22}');
config.data.datasets[0].data[0] = jsondata["A"];
config.data.datasets[0].data[1] = jsondata["B"];
config.data.datasets[0].data[2] = jsondata["C"];
config.data.datasets[0].data[3] = jsondata["D"];
config.data.datasets[0].data[4] = jsondata["E"];
window.myPie.update();
};
document.getElementById('randomizeData').addEventListener('click', function(){
config.data.datasets.forEach(function(dataset){
dataset.data = dataset.data.map(function(){
return randomScalingFactor();
});
});
window.myPie.update();
});
varcolorNames=Object.keys(window.chartColors);
document.getElementById('addDataset').addEventListener('click', function(){
var newDataset={
backgroundColor: [ ],
data: [ ],
label: 'New dataset' + config.data.datasets.length,
};
for (var index=0; index<config.data.labels.length;++index){
newDataset.data.push(randomScalingFactor());
varcolorName=colorNames [index%colorNames.length];
var newColor=window.chartColors [colorName];
newDataset.backgroundColor.push(newColor);
}
config.data.datasets.push(newDataset);
window.myPie.update();
});
document.getElementById('removeDataset').addEventListener('click', function(){
config.data.datasets.splice(0,1);
window.myPie.update();
});<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.7.2/Chart.bundle.min.js"></script>
<script src="http://www.chartjs.org/samples/latest/utils.js"></script>
<body>
<divid="canvas-holder" style="width:100%">
<canvas id="chart-area"></canvas>
</div>
<button id="randomizeData">RandomizeData</button>
<button id="addDataset">AddDataset</button>
<button id="removeDataset">RemoveDataset</button>
</body>If I run the sample outside of the snippet (I don't throw out errors with snippets in my display environment, the snippet does not emit errors.
Uncaught TypeError: Cannot read property 'red' of undefined
displays the button
<button id="randomizeData">RandomizeData</button>
<button id="addDataset">AddDataset</button>
<button id="removeDataset">RemoveDataset</button>
document.getElementById ('xxxxxx')
because you have already run .
window.onload=function(){} encloses getElementById and causes to move after the object is initialized.
© 2024 OneMinuteCode. All rights reserved.