Hallo,
Ich habe ein Google Chart das einige Daten von einem PHP-Skript beim Laden der Website erhaelt.
Es ist sehr einfach aufgebaut, wenn die Website geladen wird, dann importiert ein PHP Code die Daten aus einer Textdatei. Und die importierten Daten bilden dann das Javascript Daten Array zu welchem der Chart gezeichnet wird.
Bitte schau dir mein aktuellen Code an:
Das Ergebniss sieht folgender Massen aus, nachdem das PHP Code die Daten importiert hat:
Also bis hier hin ist alles wunderbar und funktioniert.
Ich will jetzt aber gerne wissen ob mit einem Javascript onclick Event Daten aus einer anderen Textdatei laden lassen kann.
Ich weis das ich mit einem HTML a Tag die Seite neu laden lassen kann und dem PHP Code so die Anweisung geben kann aus einer anderen Datei Daten zu laden, aber ich will wissen ob ich das auch mit Javascript erreichen kann das neue Daten aus einer anderen Textdatei geladen werden damt das Chart mit diesen neuen Daten gezeichnet wird. Den ich will hier vermeiden das die komplette Seite neu geladen wird, was bei Benutzen eines HTML a Tag der Fall waere.
Ich habe ein Google Chart das einige Daten von einem PHP-Skript beim Laden der Website erhaelt.
Es ist sehr einfach aufgebaut, wenn die Website geladen wird, dann importiert ein PHP Code die Daten aus einer Textdatei. Und die importierten Daten bilden dann das Javascript Daten Array zu welchem der Chart gezeichnet wird.
Bitte schau dir mein aktuellen Code an:
PHP-Code:
<!DOCTYPE html>
<html>
<title>Titel</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart()
{
var data = google.visualization.arrayToDataTable([
<?php
$filename="Charts/Chart_".$_GET['chartname']."_.txt";
if(file_exists($filename))
{
$page = file_get_contents($bitcoinkurse);
$page = json_decode($page,true);
$a=0;
for($i=0; $i<count($page["Chart"]); $i++)
{
if($a>0)echo ',';
echo "['".$i."', ".str_replace(",","",$page["Chart"][$i]["high"]).", ".str_replace(",","",$page["Chart"][$i]["open"]).", ".str_replace(",","",$page["Chart"][$i]["close"]).", ".str_replace(",","",$page["Chart"][$i]["low"])."]
";
$a++;
}
}
?>
], true);
var options = {
legend: 'none'
};
var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width: 100%; height: 500px;"></div>
</body>
</html>
Das Ergebniss sieht folgender Massen aus, nachdem das PHP Code die Daten importiert hat:
HTML-Code:
<!DOCTYPE html> <html> <title>Title</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> <script type="text/javascript"> google.charts.load('current', {'packages':['corechart']}); google.charts.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['0', 9.238, 1.776624, 4.28371496, 3.281148] ,['1', 4.457042626, 4.267909653, 3.314327907, 2.652562] ,['2', 4.70925, 3.314327907, 3.7506, 3.1796541] ,['3', 4.2841969, 3.78917, 3.69225, 3.1719] ,['4', 6.435, 3.75165, 5.631798674, 3.177] ,['5', 7.522635, 5.6167294, 5.50684251, 4.1059122] ,['6', 6.7642005, 5.51420298, 5.45737647, 4.306905495] ,['7', 5.732702311, 5.387799545, 4.806317079, 3.82402] ,['8', 5.4066429, 4.812088546, 4.68895929, 4.22425] ,['9', 6.604752495, 4.688988639, 4.953611982, 3.7459] ,['10', 5.731039869, 4.98248236, 5.08876956, 4.375207798] ,['11', 5.691860745, 5.161199095, 5.37876, 4.59] ,['12', 11.106871122, 5.37962832, 8.568796729, 5.0271078] ,['13', 10.69998444, 8.577491, 8.07145491, 7.49101] ,['14', 10.314, 8.046091743, 8.38063401, 7.134387304] ,['15', 10.195816064, 8.29028778, 7.59825472, 6.05024] ,['16', 9.7715841, 7.59825472, 8.650969572, 6.80476425] ,['17', 12.364981076, 8.835323304, 10.02916863, 7.575533] ,['18', 11.12854414, 9.91944866, 8.8670113, 7.2400612] ,['19', 12.2264, 8.931092222, 10.404, 8.136216735] ,['20', 11.031294816, 10.4004022, 9.211090911, 7.878786] ,['21', 9.925731708, 9.231426, 7.845301028, 5.98728] ,['22', 8.711378172, 7.89030096, 7.91424576, 6.35] ,['23', 8.4564, 7.921346195, 7.994833212, 7.2642595] ], true); var options = { legend: 'none' }; var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 100%; height: 500px;"></div> </body> </html>
Ich will jetzt aber gerne wissen ob mit einem Javascript onclick Event Daten aus einer anderen Textdatei laden lassen kann.
Ich weis das ich mit einem HTML a Tag die Seite neu laden lassen kann und dem PHP Code so die Anweisung geben kann aus einer anderen Datei Daten zu laden, aber ich will wissen ob ich das auch mit Javascript erreichen kann das neue Daten aus einer anderen Textdatei geladen werden damt das Chart mit diesen neuen Daten gezeichnet wird. Den ich will hier vermeiden das die komplette Seite neu geladen wird, was bei Benutzen eines HTML a Tag der Fall waere.
Kommentar