?>
</div>
<div class="chart">
<?php
echo ChartJs::widget(['box' => ['type' => 'box-danger', 'header' => ['title' => 'Donut Chart']], 'type' => 'Doughnut', 'data' => $pieData, 'clientOptions' => $pieOptions]);
?>
</div>
</div>
<div class="col-md-6">
<?php
$lineChartOptions = $areaChartOptions;
$lineChartOptions['datasetFill'] = false;
?>
<div class="chart">
<?php
echo ChartJs::widget(['box' => ['type' => 'box-info', 'header' => ['title' => 'Line Chart']], 'type' => 'Line', 'data' => $areaChartData, 'clientOptions' => $lineChartOptions]);
?>
</div>
<?php
$barChartData = $areaChartData;
$barChartData['datasets'][1]['fillColor'] = '#00a65a';
$barChartData['datasets'][1]['strokeColor'] = '#00a65a';
$barChartData['datasets'][1]['pointColor'] = '#00a65a';
?>
<div class="chart">
<?php
echo ChartJs::widget(['box' => ['type' => 'box-success', 'header' => ['title' => 'Bar Chart']], 'type' => 'Bar', 'data' => $barChartData, 'clientOptions' => $barChartOptions]);
?>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<?php
echo Box::begin(['type' => '', 'header' => ['title' => 'Monthly Recap Report']]);
?>
<div class="row">
<div class="col-md-8">
<p class="text-center">
<strong>Sales: 1 Jan, 2014 - 30 Jul, 2014</strong>
</p>
<div class="chart">
<?php
echo ChartJs::widget(['type' => 'Line', 'data' => $salesChartData, 'clientOptions' => $salesChartOptions, 'options' => ['style' => 'height: 180px']]);
?>
</div>
</div>
<div class="col-md-4">
<p class="text-center">
<strong>Goal Completion</strong>
</p>
<?php
foreach ([['label' => 'Add Products to Cart', 'progress' => 80, 'number' => 160, 'total' => 200, 'color' => 'aqua'], ['label' => 'Complete Purchase', 'progress' => 80, 'number' => 310, 'total' => 400, 'color' => 'red'], ['label' => 'Visit Premium Page', 'progress' => 80, 'number' => 480, 'total' => 800, 'color' => 'green'], ['label' => 'Send Inquiries', 'progress' => 80, 'number' => 250, 'total' => 500, 'color' => 'yellow']] as $item) {
?>
<div class="progress-group">
<span class="progress-text"><?php
echo $item['label'];
?>
</span>