Php/javascript array probleem

Door Anthony dobbelaere op 14-05-2020 14:49

1.538 views

Beste leden,

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[i], parseFloat(temp[i])]
]);
console.log(time[i])
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?

R Rob Doemaarwat

14-05-2020 16:45

Moet je niet eerst die times en temps in een array verzamelen, en pas dan de google.visualization.arrayToDataTable() truc doen?



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

A Anthony dobbelaere

14-05-2020 17:49

Beste Rob, alvast bedankt voor de hulp. Op jou manier slaag ik er inderdaad in om ze eerst in een array te krijgen. Nu met onderstaande code krijg ik enkel de laatste index waarde. hoe krijg ik elke index waarde in mijn chart?

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[i], parseFloat(temp[i])]
]);
var options = {'title':'temperatuur per tijdstip', 'width':2000, 'height':700};

var chart = new google.visualization.ColumnChart(document.getElementById('barchart'));
chart.draw(data, options);
}
}

Thomas van den Heuvel

14-05-2020 17:59

@Anthony heb je gecontroleerd hoe (in welke structurering/sortering) je de data dient aan te leveren aan de chart? Mogelijk is dat dus in een andere vorm dan de vorm waarin jij dat doet, aangezien je niet het gewenste resultaat krijgt.

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

A Anthony dobbelaere

14-05-2020 18:47

@thomas ik heb het niet echt gecontroleerd. ik had al eens een chart gemaakt met deze code maar dat waren vaste waarden zonder arrays. Het bovenste staat in een for loop om de 40 waarden van time/temp in de arrays te steken. Parsefloat had ik toegepast omdat de browser geen strings toeliet op de x-axys van de chart.

[size=xsmall]Toevoeging op 14/05/2020 19:18:32:[/size]

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]
]);

Thomas van den Heuvel

14-05-2020 22:37 gewijzigd op 14-05-2020 23:03

Hm, het lijkt mij handiger om dit rechtstreeks vanuit PHP te doen?

Het is niet echt logisch om dit eerst in HTML te gieten en het hier vervolgens weer uit te pulken.

Dus zoiets?

<?php
$chartData = array(array('datum', 'temperatuur'));

for ($i=0; $i < 40; $i++) {
    $chartData[] = array(
        $data->list[$i]->dt_txt,
        $data->list[$i]->main->temp,
    );
}
?>

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:

var data = google.visualization.arrayToDataTable(<?php echo json_encode($chartData); ?>);

Dit maakt de broncode tevens een stuk overzichtelijker/beter leesbaar.

Reageren

Inloggen om te reageren