我正在研究jQuery条形图。
使用日期范围来搜索可用空间和占用空间，进入和退出总数，
以下快照将简要介绍搜索结果；
Search result http://www.shehary.com/stackimages/search-result.jpg
而php forearch是;
<?php if(count($occupied) < 1) return; foreach ($occupied as $key=>$value): ?>
<tr>
<td><?php echo $key; ?></td>
<td><?php echo $total_space; ?></td>
<td><?php echo $real_data[$key] + $dep_data[$key];?></td>
<td><?php echo $total_space - $real_data[$key] - $dep_data[$key]; ?></td>
<td><?php echo (array_key_exists($key, $real_data))?$real_data[$key]:0;?></td>
<td><?php echo (array_key_exists($key, $dep_data))?$dep_data[$key]:0;?></td>
</tr>
<?php endforeach; ?>
Bar Char看起来像这样
Search result http://www.shehary.com/stackimages/barchart.jpg
以下是jQuery代码；
$(function(){
$('#graph').graphify({
//options: true,
start: 'bar',
obj: {
id: 'ggg',
width: '100%',
height: 375,
xGrid: true,
legend: true,
title: 'Departure vs Return',
points: [
[7, 26, 33, 74, 12, 49, 33, 33, 74, 12, 49, 33, 178, 160, 33, 74, 12, 49, 33, 178, 160, 178, 160, 33, 74, 12, 49, 33, 178, 160,450],
[32, 46, 75, 38, 62, 20, 52, 75, 38, 62, 20, 52, 134, 145, 52, 75, 38, 62, 20, 52, 134, 145, 145, 52, 75, 38, 62, 20, 52, 134, 145,300]
],
pointRadius: 3,
colors: ['#428bca', '#1caf9a'],
xDist: 40,
dataNames: ['Departure', 'Return'],
xName: 'Day',
tooltipWidth: 15,
animations: true,
pointAnimation: true,
averagePointRadius: 5,
design: {
tooltipColor: '#fff',
gridColor: '#f3f1f1',
tooltipBoxColor: '#d9534f',
averageLineColor: '#d9534f',
pointColor: '#d9534f',
lineStrokeColor: 'grey',
}
}
});
});
Private.defaults = function() {
return {
//Days or Date Range
x: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31'],
y: 20,
attachTo: 'body'
};
};
和HTML来显示条形图；
<div id="graph"></div>
我需要帮助，如何根据日期范围将值放入数组并加载到条形图中。
点:[
['']，
['']
]，
X: ['']
编辑和更新的问题
@Marcos Dimitrio的回答指出，我之前使用错误的数组作为有问题的引用；我的应用，以下是正确的出发n返回数组；
points: [
['<?php echo $real_data[$key];?>'],
['<?php echo $dep_data[$key]; ?>']
],
x: ['<?php echo $key; ?>']//No of Days in X-Axis If no x-axis arrays define, chart will not be loaded.
在根据您的指示在答案中使用代码之后，得到了这一点，我手动定义了天数(x轴)，例如[1,2,3,4,5,6,7,8,9,10]
No-Bars http://www.shehary.com/stackimages/no-bars.jpg
No Data in Table http://www.shehary.com/stackimages/bar-chart-table.jpg
以下是其余的php代码；
$from = mysql_real_escape_string($_POST['from']);
$to = mysql_real_escape_string($_POST['to']);
include_once 'parkingdetail.php'; //This file is doing all the calculation
//Add one day to today
$real_data = array();
$total_space = 0;
$dep_data = array();
$occupied = array();
getParkData($to,$total_space,$real_data,$dep_data,$occupied,$av,$tp,$tpbooking,$from);
ksort($occupied);
//$total_space is fixed 2000
//$real_data is Depart
//$dep_data is Return
//$occupied is total sim of $real_data+$dep_data
Graph Working Example
问候。
最佳答案
首先，您可以将数据过滤到新数组中:
<?php
$start = "01-June-2015";
$end = "03-June-2015";
$points_departure = array();
$points_return = array();
foreach (array_keys($occupied) as $key) {
if (isWithinRange($key, $start, $end)) {
$points_departure[] = $real_data[$key] + $dep_data[$key];
$points_return[] = $total_space - $real_data[$key] - $dep_data[$key];
}
}
function isWithinRange($key, $start, $end) {
$keyDate = DateTime::createFromFormat ("d-M-Y", $key);
$startDate = DateTime::createFromFormat ("d-M-Y", $start);
$endDate = DateTime::createFromFormat ("d-M-Y", $end);
return $keyDate >= $startDate and $keyDate <= $endDate;
}
之后，您需要将它们发送到JavaScript。您可以通过AJAX进行操作，也可以使用更简单的方法将其放在页面顶部:
<script>
var points_departure = <?php echo json_encode($points_departure); ?>;
var points_return = <?php echo json_encode($points_return); ?>;
</script>
这将为您提供:
<script>
var points_departure = [7,26,33];
var points_return = [32, 46, 75];
</script>
然后只需将点数据替换为您创建的变量即可:
points: [
points_departure,
points_return
],