I am trying to build a web page where a chart will be displayed and the data will be loaded from a drop down menu. I have 2 data sets but cannot perform the correct MySql request I think. The 2 data sets a stored in the same database but different tables. I cannot place them in the same table because they are not the same length and not the same frequency.(one is monthly data and the other weekly)
Here's the code. Any help would be very much appreciated!
<?php
mysql_connect('xxxxxxxxxxxx.com', 'xxxxx', 'xxxxxx') or die(mysql_error());
mysql_select_db("database123") or die(mysql_error());
$result1 = mysql_query("SELECT * FROM table1")
or die(mysql_error());
$data1 = array();
while ($row1 = mysql_fetch_array( $result1)) {
extract($row1);
$datetime1 = date('Y, n, j', strtotime($table1_date ));
$datetime2 = 'Date.UTC('.$datetime1.')';
$data[] = "[$datetime2, $table1_data]";
}
?>
<?php
mysql_connect('xxxxxxxxxxxx.com', 'xxxxx', 'xxxxxx') or die(mysql_error());
mysql_select_db("database123") or die(mysql_error());
$result2 = mysql_query("SELECT * FROM table2")
or die(mysql_error());
$data2 = array();
while ($row2 = mysql_fetch_array( $result2)) {
extract($row2);
$datetime3 = date('Y, n, j', strtotime($table2_date ));
$datetime4 = 'Date.UTC('.$datetime3.')';
$data2[] = "[$datetime4, $table2_data]";
}
?>
<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="utf-8" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
var options = {
chart: {
renderTo: 'container',
defaultSeriesType: 'column'
},
series: [{name: 'A', data: [<?php echo join($data, ',') ?>]}]
};
var chart = new Highcharts.Chart(options);
});
$("#list").on('change', function(){
//alert('f')
var selVal = $("#list").val();
if(selVal == "A" || selVal == '')
{
options.series = [{name: 'A', data: [<?php echo join($data, ',') ?>]}]
}
else
{
options.series = [{name: 'D', data: [<?php echo join($data2, ',') ?>]}]
}
var chart = new Highcharts.Chart(options);
});
</script>
</head>
<body id="index" class="home">
<SELECT id="list">
<option VALUE="A">Data Set A</option>
<option VALUE="B">Data Set B</option>
</SELECT>
<button id="change">Refresh Table</button>
<div id="container" style="min-width: 350px; height: 400px; margin: 0 auto"></div>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</body>
</html>