javascript - Highcharts: Show data dynamically based on form input
544
I want show data with highcharts onindex.php page.
How should I do?, this is what I tried so far:
I have a HTML page:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Highcharts</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var options = {
chart: {
renderTo: 'container',
type: 'line',
marginRight: 130,
marginBottom: 25
},
title: {
text: 'San luong Card',
x: -20 //center
},
subtitle: {
text: '',
x: -20
},
xAxis: {
categories: []
},
yAxis: {
title: {
text: 'Tong tien'
},
plotLines: [{
value: 0,
width: 1,
color: '#red'
}]
},
tooltip: {
formatter: function() {
return '<b>'+ this.series.name +'</b><br/>'+
this.x +': '+ this.y;
}
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'top',
x: -10,
y: 100,
borderWidth: 0
},
plotOptions: {
area: {
stacking: 'high',
lineColor: '#666666',
lineWidth: 1,
marker: {
lineWidth: 1,
lineColor: '#666666'
}
}
},
series: []
}
$.getJSON("data.php", function(json) {
options.xAxis.categories = json[0]['data'];
options.series[0] = json[1];
var chart = new Highcharts.Chart(options);
return false;
})
});
</script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
</head>
<body>
<form method="post" action="data.php" id="form_search">
<header><h3>Thong ke CCU</h3></header>
<div >
<fieldset>
<label>Tu ngay</label>
<input type="text" name="t_n" />
</fieldset>
<fieldset>
<label>Den ngay</label>
<input type="text" name="d_n" />
</fieldset>
<div ></div>
</div>
<footer>
<div >
<input type="submit" name="s_t" value="Search" id="submit" >
<input type="reset" name="reset" value="Refesh" >
</div>
</form>
<div id="container" ></div>
</body>
</html>
When I submit form with value 2 textfield data show ondata.php with JSON data type.
Codedata.php:
if(isset($_POST['s_t'])){
include("../config/dbconnect.php");
$date = new DateTime();
$t_n = strtotime($_POST['t_n']);
$d_n = strtotime($_POST['d_n']);
$tn = date("Y-m-d",$t_n);
$dn = date("Y-m-d",$d_n);
$query = mysql_query("select SUM(ccu) as sumccu,DATE_FORMAT(date,'%d-%m') as day from skycity_log.ccu_log where date >='".$tn."' AND date <='".$dn."' GROUP BY date") or (mysql_error());
$category = array();
$category['name'] = 'DAY';
$series1 = array();
$series1['name'] = 'CCU';
while($r = mysql_fetch_array($query)) {
echo $r['day'];
$category['data'][] = $r['day'];
$series1['data'][] = $r['sumccu'];
}
$result = array();
array_push($result,$category);
array_push($result,$series1);
print json_encode($result, JSON_NUMERIC_CHECK);
}
?>
Answer
Solution:
The missing parts are: