Loading php foreach values in jQuery bar chart

Question

I'm working on jQuery bar chart.
Using date range to search free and occupied spaces, entry and exit out of total, Following snapshot will give brief idea of search result; Search result http://www.shehary.com/stackimages/search-result.jpg

and php forearch is;

<?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 looks like this Search result http://www.shehary.com/stackimages/barchart.jpg

following 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 to show barchart;

<div id="graph"></div>

I need help how can i put values into arrays and load into barchart depending on date range.

points: [ [''], [''] ], x: ['']

Edited & Updated Question

@Marcos Dimitrio answer pointed that I used wrong arrays as reference in question before; my appologies, following are correct depart n 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 code in answer according to your instructions, I'm getting this, I defined Days (x-axis) manually like [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

Following is rest of 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

Graph Working Example
Regards.

Answer 1

First, you can filter the 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 those to JavaScript. You can do it by AJAX, or you can use an easier approach and just put 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 simply replace the points data with the variables you created:

points: [
    points_departure,
    points_return
],

Answer 2

You could create a global JavaScript variable like so:

<script>
var dataPoints = [ <?php echo implode(', ',$pointsArray) ?>];
</script>

and then reference it in the plugin like this:

point: dataPoints

Answer 3

Why don't you, during your foreach loop, create the two arrays that you're 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, implode() the results into a list.

points: [
    [<?php echo implode(", ", $one); ?>],
    [<?php echo implode(", ", $two); ?>]
],