Php/javascript array probleem
Ik ben een oefening aan het maken waarin ik een columnchart wil maken met data (tijd/temperatuur) die ik met php verkregen heb. Het is tot nu toe al gelukt om alle tijdstippen en temperaturen in een tabel te stoppen en gelijk ook in een array.
De code hiervan:
echo "<table>";
for($i=0;$i<40;$i++)
{
echo "<tr>
<td id=\"datatime[$i]\">{$data->list[$i]->dt_txt}</td>
<td id=\"datatemp[$i]\">{$data->list[$i]->main->temp}</td>
</tr>";
}
Nu zit elke temperatuur/datum in eenzelfde array met elke keer een index ++. Het volgende wat ik hiermee wil doen is in javascript met diezelfde data een chart tonen.
code:
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart()
{
for (i=0; i<40;i++)
{
var time =[document.getElementById("datatime["+i+"]").textContent];
console.log(time);
var temp =[document.getElementById("datatemp["+i+"]").textContent];
console.log(temp);
var data = google.visualization.arrayToDataTable([
['datum', 'temperatuur'],
[time, parseFloat(temp)]
]);
console.log(time)
var options = {'title':'temperatuur per tijdstip', 'width':2000, 'height':700};
var chart = new google.visualization.ColumnChart(document.getElementById('barchart'));
chart.draw(data, options);
}
}
Het probleem dat ik heb is dat ik enkel de eerste datum/temperatuur verkrijg. In console krijg ik alle datums/temperaturen maar die zitten allemaal in index[0] van time/temp. Iemand die mij kan helpen zodat ik alle datums/temperaturen in mijn chart kan verkrijgen?
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
function drawChart(){
var time = [],temp = []; //arrays aanmaken
for (i=0; i<40;i++){ //arrays vullen
time.push(document.getElementById("datatime["+i+"]").textContent);
temp.push(document.getElementById("datatemp["+i+"]").textContent);
}
//arrays gebruiken
var time = [],temp = []; //arrays aanmaken
for (i=0; i<40;i++){ //arrays vullen
time.push(document.getElementById("datatime["+i+"]").textContent);
temp.push(document.getElementById("datatemp["+i+"]").textContent);
}
//arrays gebruiken
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart()
{
var time =[], temp=[];
for (i=0;i<40;i++)
{
time.push(document.getElementById("datatime["+i+"]").textContent);
temp.push(document.getElementById("datatemp["+i+"]").textContent)
}
console.log(time);
console.log(temp);
for (i=0; i<40;i++)
{
var data = google.visualization.arrayToDataTable([
['datum', 'temperatuur'],
[time, parseFloat(temp)]
]);
var options = {'title':'temperatuur per tijdstip', 'width':2000, 'height':700};
var chart = new google.visualization.ColumnChart(document.getElementById('barchart'));
chart.draw(data, options);
}
}
Waarom staat het bovenstaande nogmaals in een for-loop? "time" en "temp" zijn beide arrays, hier een parseFloat op loslaten levert waarschijnlijk niet het gewenste resultaat op...
Toevoeging op 14/05/2020 19:18:32:
Onderstaande code is eigelijk wat ik wil bereiken. Maar dan met een for lus. Zodat ik niet 40x die regel code moet gebruiken.
var data = google.visualization.arrayToDataTable([
['datum', 'temperatuur'],
[time[0], parseFloat(temp[0])],
[time[1], parseFloat(temp[1])],
[time[2], parseFloat(temp[2])],
[time[3], parseFloat(temp[3])],
[time[4], parseFloat(temp[4])],
[time[5], parseFloat(temp[5])] ...[40]
]);
Het is niet echt logisch om dit eerst in HTML te gieten en het hier vervolgens weer uit te pulken.
Dus zoiets?
Code (php)
NB deze chart data zou je dus ook kunnen gebruiken voor het uitdraaien van de HTML-tabel.
En in het JavaScript gedeelte doe je zoiets:
Code (php)
1
var data = google.visualization.arrayToDataTable(<?php echo json_encode($chartData); ?>);
Dit maakt de broncode tevens een stuk overzichtelijker/beter leesbaar.
Gewijzigd op 14/05/2020 23:03:28 door Thomas van den Heuvel