I have a dropdown created with javascript. When the user choose one of the items. A seperate page will be loaded into the current page. The page i am trying to load uses a C3 graph, but the graph wont load on the first page. But it will load by itself.
<script>
function Change_projection(str) {
document.getElementById("chart_dis").innerHTML = "Laddar";
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById("chart_dis").innerHTML = this.responseText;
}
};
xmlhttp.open("GET", "includes/Test.php", true);
xmlhttp.send();
}
</script>
<div id="chart_dis"></div>
This is the Test.php, and it works fine on its own.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="/assets/vendor/libs/c3/c3.css">
<div id="chart"></div>
<script type="text/javascript" >
$(function() {
var chart = c3.generate({
bindto: '#chart',
data: {
columns: [
['data1', 30, 200, 100, 400, 150, 250],
['data2', 50, 20, 10, 40, 15, 25]
]
}
});
});
</script>
<script src="/assets/vendor/libs/d3/d3.js"></script>
<script src="/assets/vendor/libs/c3/c3.js"></script>
I whant to be able to load the graph when the user selects that option in the dropdown. The other options is for other information.