<script type="text/javascript">

    $(function () {
    $('#soaotc_daily_chart').highcharts({
        chart: {
            zoomType: 'xy'
        },
        title: {
            text: 'Average Monthly Temperature and Rainfall in Tokyo'
        },
        subtitle: {
            text: 'Source: WorldClimate.com'
        },
        xAxis: [{
            categories: [
                <?php
                foreach ($day["DATE"] as $key ) {
                    echo "$key".",";
                }
               ?>
            ]
        }],
        yAxis: [{ // Primary yAxis
            labels: {
                format: '{value}°C',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            },
            title: {
                text: 'Temperature',
                style: {
                    color: Highcharts.getOptions().colors[1]
                }
            }
        }, { // Secondary yAxis
            title: {
                text: 'Rainfall',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            labels: {
                format: '{value} mm',
                style: {
                    color: Highcharts.getOptions().colors[0]
                }
            },
            opposite: true
        }],
        tooltip: {
            shared: true
        },
        legend: {
            layout: 'vertical',
            align: 'left',
            x: 120,
            verticalAlign: 'top',
            y: 100,
            floating: true,
            backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF'
        },
        series: [{
            name: 'Population',
            type: 'column',
            yAxis: 1,
            data: [
                <?php
                foreach ($day['POPULATION'] as $key ) {
                    echo $key.",";
                }

                ?>
            ],
            tooltip: {
                valueSuffix: ' mm'
            }

        }, {
            name: 'Amount',
            type: 'spline',
            data: [
                <?php
                foreach ($day['SUM_AMOUNT'] as $key ) {
                    echo $key.",";
                }

                ?>
            ],
            tooltip: {
                valueSuffix: '°C'
            }
        }]
    });
});

</script>


<div class = "container">
        <form class="form_horizontal" method = "post" action="<?php echo site_url('#')?>">
     <fieldset>
            <div class="form-group">
                <label for="dtp_input2" class="col-md-1 control-label">Date </label>
                <div class="input-group date form_date col-md-5" data-date="" data-date-format="ddmmyyyy" data-link-field="dtp_input2" data-link-format="yyyy-mm-dd">
                    <input class="form-control" size="16" type="text" value="" readonly>
                    <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
                </div>
                <br/>
                <label  class="col-md-1 control-label"></label>
                <button type="submit" class="col-md-1 btn btn-default">Submit</button>
                <input type="hidden" id="dtp_input2" value="" /><br/>
            </div>
    </fieldset>
    </form>
<?php

print_r($day);
foreach ($day['NUM_OF_POPULATION'] as $key ) {
    $population[] = $key;
}
foreach ($day['START_EXECUTION'] as $key ) {
    $date[] = $key;
}
foreach ($day['SUM_AMOUNT'] as $key ) {
    $amount[] = $key;
}

?>
<div id="soaotc_daily_chart" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<br/>
<?php
    if(count($day)>0){
        // print_r($day);
    echo '<table class="table table-hover">';

    $cols = array_keys($day);
    echo '<tr>';
    foreach ($cols as $col) echo '<th>' . $col . '</th>';
    echo '</tr>';

    foreach ($day[$cols[0]] as $i => $null) {
        echo '<tr>';
        foreach ($cols as $col) echo '<td>' . $day[$col][$i] . '</td>';
        echo '</tr>';
    }

    echo '</table>';
    }
?>

</div>