i have a google chart wich gets some data from a PHP script when loading the site.
Its very simple in fact, when the site gets load a php script does import some data from a textfile, if i could channge the textfile name with a onclick event then i would have already what i need, but i dont know how or if any way it is possible.
Please take a look at my current code:
<!DOCTYPE html>
<html>
<title>Crypto Curreny Trader</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>The result from that code above, after the PHP have insert the data looks like following:
<!DOCTYPE html>
<html>
<title>Crypto Curreny Trader</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>So everythink is working fine, but i want to change the textfile from which the data is load with a javascript onclick event, is that possible?
I know i can use a HTML a Tag and let the site be load new to give the PHP the instruction to load data from a new file, but i want to know if i can do this without loading the site new, just with using a javascript onclick event.
</div>