So I have 3 Bootstrap Panels on one site, each with a panel-header that contains a input and a panel-body that contains the Highcharts graph. The is dynamically filled with options from a database.
That's how a panel looks like:
<div class="panel panel-default">
<div class="panel-heading">
<div class="container-fluid">
<div class="col-sm-9"><h4>Graph 1</h4></div>
<div class="col-sm-3">
<select class="form-control">
<?php include('get_options_from_database.php'); ?>
</select>
</div>
</div>
</div>
<div class="panel-body">
<div id="highcharts-graph" style="width:100%; height:auto;"></div>
</div>
The get_options_from_database.php just uses a MySQL query to pull the relevant data from database and then a while loop to echo the options. Each option has a specific value (just simple integers). And based on the selected option I want to change the MySQL query that pulls the data for the Highcharts graph and redraw that. Note that the other two graphs should stay like they are unless the selected value of the select has changed. But how do I exactly do that.
So what I (think I) have to do:
- Read the value of the selected option of the
- Write the value into a variale and pass it over to the MySQL query (is in a separate file) which gets the data for the graph
- Redraw the graph with the new data but without redrawing the other two
I'm not sure if it's possible to do with out refreshing the page, but as long as only the graph changes where the has been changed I think I don't mind it. Another thing I'm unsure is if I would need a submit button that would trigger everything after selecting an option.
EDIT: Ok, now the next problem. The response from the xmlhttp object seems to be in the wrong format. When I open the Chrome developer tool and take a look at for example
getchart.php?option=1
It contains html tags:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
[1420068600000,21.5],[1420070400000,19.2],[1420072200000,19],[1420074000000,22.6],[1420075800000,21.3],[1420077600000,21.5],[1420079400000,19.9],[1420081200000,22.3],[1420083000000,19]
<!-- And a lot more data -->
</body>
</html>
But I only need the data itself, like:
[1420068600000,21.5],[1420070400000,19.2],[1420072200000,19],[1420074000000,22.6],[1420075800000,21.3],[1420077600000,21.5],
and so on...
I have tried and just pasted a cut-out of the data into the javascript for the highchart graph and it works just fine. The graph even gets automatically redrawn if I change the selection (obviously the same data every time because it's static).
So unless I'm doing something wrong I propably need a way to cut away those html tags and insert the result data: [ here ]
This is how it looks like when I pasted the cut-out in, which works fine.
<script type="text/javascript">
function getData(nr)
{
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp = new XMLHttpRequest();
} else {
// code for IE6, IE5
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
$('#graphcontainer').highcharts('StockChart', {
chart: {
type : 'spline',
height: 650,
zoomType: 'x'
},
rangeSelector : {
selected : 1
},
title : {
text : ''
},
series : [{
name : 'Data',
//Here is where the data goes. This is basically how
//it must look when the response comes back but the html tags
//make it useless (I think)
data : [ [1420068600000,21.5],[1420070400000,19.2],[1420072200000,19],[1420074000000,22.6],[1420075800000,21.3],[1420077600000,21.5],[1420079400000,19.9],[1420081200000,22.3],[1420083000000,19],[1420084800000,22],[1420086600000,18],[1420088400000,18.7],[1420090200000,20.9],[1420092000000,21.2],[1420093800000,20.3],[1420095600000,18.3],[1420097400000,19.5],[1420099200000,22.6],[1420101000000,21.4],[1420102800000,21.6],[1420104600000,18.5],[1420106400000,20.8],[1420108200000,23],[1420110000000,23],[1420111800000,18.7],[1420113600000,20.4],[1420115400000,18.5],[1420117200000,19.6],[1420119000000,21.3],[1420120800000,18.6],[1420122600000,20.9],[1420124400000,18.5],[1420126200000,21.4],[1420128000000,20.8],[1420129800000,22.2],[1420131600000,19.4],[1420133400000,22.4],[1420135200000,19.4],[1420137000000,18],[1420138800000,20.9],[1420140600000,21.4],[1420142400000,18.9],[1420144200000,22.6],[1420146000000,19.4],[1420147800000,19.6],[1420149600000,21.5],[1420151400000,19.2],[1420153200000,21.6],[1420155000000,18.2], ] ,
tooltip: {
valueDecimals: 2
}
}]
});
}
}
xmlhttp.open("POST","getchart.php?option="+nr,true);
xmlhttp.send();
}
</script>
