Loading php foreach values in jQuery histogram
I am working on a jQuery diagram.
Using a date range to find free and used spaces, entry and exit from the total, The following snapshot will give a quick idea of the search results;
Search result http://www.shehary.com/stackimages/search-result.jpg
and 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; ?>
The Char bar looks like this: Search result http://www.shehary.com/stackimages/barchart.jpg
Below is the jQuery code;
$(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'
};
};
And HTML for displaying barchart;
<div id="graph"></div>
I need help how can I put values into arrays and load them into barchart depending on date range.
Edited and updated question
@Marcos Dimitrio answered that I used the wrong arrays as a reference before; my addictions following correct deferred return arrays;
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.
And after using the code in response as per your instructions, I get this, I defined Days (x-axis) manually as [1,2,3,4,5,6,7,8,9,10]
No-Bars http://www.shehary.com/stackimages/no-bars.jpg No data in the table http://www.shehary.com/stackimages/bar-chart-table.jpg
Below is the rest of the php code;
$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
Schedule work schedule
Best wishes.
source to share
First, you can filter data into new arrays:
<?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;
}
After that, you need to send them to JavaScript. You can do it with AJAX, or you can take a simpler approach and just place it on top of your page:
<script>
var points_departure = <?php echo json_encode($points_departure); ?>;
var points_return = <?php echo json_encode($points_return); ?>;
</script>
which will give you:
<script>
var points_departure = [7,26,33];
var points_return = [32, 46, 75];
</script>
Then just replace the point data with the variables you created:
points: [
points_departure,
points_return
],
source to share
Why would you, while looping foreach
, create the two arrays that you are going to use?
$one = array();
$two = array();
foreach ($occupied as $key=>$value):
// the rest of the stuff you do...
$one[] = $real_data[$key] + $dep_data[$key];
$two[] = $total_space - $real_data[$key] - $dep_data[$key];
endforeach;
Then in your JavaScript, where you define your graph data, the implode()
results are listed.
points: [
[<?php echo implode(", ", $one); ?>],
[<?php echo implode(", ", $two); ?>]
],
source to share