<?php
require_once '../lib/Kendo/Autoload.php';
require_once '../include/chart_data.php';
require_once '../include/header.php';
$series = new \Kendo\Dataviz\UI\ChartSeriesItem();
$series->xField('price')->yField('performance');
$dataSource = new \Kendo\Data\DataSource();
$dataSource->data(chart_price_performance());
$chart = new \Kendo\Dataviz\UI\Chart('chart');
$chart->title(array('text' => 'Price-Performance Ratio'))->dataSource($dataSource)->addSeriesItem($series)->tooltip(array('visible' => true, 'template' => "#= '<b>\$' + value.x + ' / ' + dataItem.family + ' ' + dataItem.model + ': ' + value.y + '%</b>' #"))->addXAxisItem(array('max' => 1000, 'labels' => array('format' => '${0}'), 'title' => array('text' => 'Price')))->addYAxisItem(array('min' => 80, 'labels' => array('format' => '{0}%'), 'title' => array('text' => 'Performance Ratio')))->legend(array('visible' => false))->seriesDefaults(array('type' => 'scatter'));
echo $chart->render();
require_once '../include/footer.php';
$plotband1->from(955)->to(1002)->color('#8ebc00')->opacity(0.6);
$plotband2 = new \Kendo\Dataviz\UI\ChartXAxisItemPlotBand();
$plotband2->from(1002)->to(1027)->color('#8ebc00')->opacity(0.8);
$plotband3 = new \Kendo\Dataviz\UI\ChartXAxisItemPlotBand();
$plotband3->from(1027)->to(1050)->color('#8ebc00')->opacity(0.6);
$plotband4 = new \Kendo\Dataviz\UI\ChartXAxisItemPlotBand();
$plotband4->from(1014)->to(1014.5)->color('#ff0000')->opacity(1);
$valueAxis = new \Kendo\Dataviz\UI\ChartValueAxisItem();
$valueAxis->min(955)->max(1050)->majorGridLines(array('visible' => false))->minorTicks(array('visible' => true))->addPlotBand($plotband1, $plotband2, $plotband3, $plotband4);
$categoryAxis = new \Kendo\Dataviz\UI\ChartCategoryAxisItem();
$categoryAxis->majorGridLines(array('visible' => false))->majorTicks(array('visible' => false))->axisCrossingValue(14)->field('category')->title(array('text' => 'hPa'));
$tooltip = new \Kendo\Dataviz\UI\ChartTooltip();
$tooltip->visible(true)->shared(true)->template('Maximum: #= value.target # <br /> Average: #= value.current #');
$chart_hPa = new \Kendo\Dataviz\UI\Chart('chart-hPa');
$chart_hPa->addSeriesItem($hPa)->dataSource($dataSource)->addValueAxisItem($valueAxis)->addCategoryAxisItem($categoryAxis)->legend(array('visible' => false))->chartArea(array('margin' => array('left' => 0)))->tooltip($tooltip);
echo $chart_hPa->render();
?>
</div>
<style>
.chart-wrapper {
padding-top: 20px;
}
.chart-wrapper .k-chart {
width: 325px;
margin: 0 10px;
display: inline-block;
}
.chart-wrapper .k-tooltip {
text-align: left;
}
$temp->data(array(array(25, 22)));
$plotband1 = new \Kendo\Dataviz\UI\ChartXAxisItemPlotBand();
$plotband1->from(0)->to(10)->color('yellow')->opacity(0.3);
$plotband2 = new \Kendo\Dataviz\UI\ChartXAxisItemPlotBand();
$plotband2->from(10)->to(20)->color('orange')->opacity(0.3);
$plotband3 = new \Kendo\Dataviz\UI\ChartXAxisItemPlotBand();
$plotband3->from(20)->to(30)->color('red')->opacity(0.3);
$valueAxis = new \Kendo\Dataviz\UI\ChartValueAxisItem();
$valueAxis->min(0)->max(30)->majorGridLines(array('visible' => false))->majorTicks(array('visible' => false))->addPlotBand($plotband1, $plotband2, $plotband3);
$categoryAxis = new \Kendo\Dataviz\UI\ChartCategoryAxisItem();
$categoryAxis->majorGridLines(array('visible' => false))->majorTicks(array('visible' => false));
$tooltip = new \Kendo\Dataviz\UI\ChartTooltip();
$tooltip->visible(true)->shared(true)->template('Maximum: #= value.target # <br /> Average: #= value.current #');
$chart_temp = new \Kendo\Dataviz\UI\Chart('chart-temp');
$chart_temp->addSeriesItem($temp)->addValueAxisItem($valueAxis)->addCategoryAxisItem($categoryAxis)->legend(array('visible' => false))->chartArea(array('margin' => array('left' => 0)))->seriesDefaults(array('type' => 'bullet'))->tooltip($tooltip);
echo $chart_temp->render();
?>
</td>
</tr>
</table>
</div>
<style>
.history {
border-collapse: collapse;
width: 100%;
}
.history td.chart {
width: 430px;
}
.history .k-chart {
$chart_nov->title(array('position' => 'bottom', 'text' => 'November'))->seriesDefaults($seriesDefault)->addSeriesItem($series)->legend(array('visible' => false))->tooltip(array('visible' => true, 'template' => '#=dataItem.category#'));
$series = new \Kendo\Dataviz\UI\ChartSeriesItem();
$series->data(array(array('category' => 'Impressions', 'value' => 1200528, 'color' => '#0e5a72'), array('category' => 'Clicks', 'value' => 989287, 'color' => '#166f99'), array('category' => 'Unique Visitors', 'value' => 885694, 'color' => '#2185b4'), array('category' => 'Downloads', 'value' => 788843, 'color' => '#319fd2'), array('category' => 'Purchases', 'value' => 694137, 'color' => '#3eaee2')));
$chart_dec = new \Kendo\Dataviz\UI\Chart('chart-dec');
$chart_dec->title(array('position' => 'bottom', 'text' => 'December'))->seriesDefaults($seriesDefault)->addSeriesItem($series)->legend(array('visible' => false))->tooltip(array('visible' => true, 'template' => '#=dataItem.category#'));
?>
<div class="chart-wrapper">
<h2>Sales statistics</h2>
<?php
echo $chart_oct->render();
?>
<?php
echo $chart_nov->render();
?>
<?php
echo $chart_dec->render();
?>
</div>
<div class="configuration-horizontal">
<div class="config-section">
<label class="configHead"><input type="checkbox" id="dynamicSlope"/> Dynamic Slope</label>
<i>The slope for each segment depends on the ratio between the current and the next value</i>
</div>
<div class="config-section">
<label class="configHead"><input type="checkbox" id="dynamicHeight"/> Dynamic Height</label>
<i>The height of the segment is the overall percentage for that dataItem</i>
</div>
<div class="config-section">
<span class="configHead">Neck Ratio</span>
<ul class="options">
<li><input id="neckSlider" value="0.3"/></li>
$dataSourceBefore->data(array(array('description' => 'All Visitors', 'visitors' => 23945), array('description' => 'Tried the Demos', 'visitors' => 19165), array('description' => 'Downloaded', 'visitors' => 13984), array('description' => 'Requested a Quote', 'visitors' => 3216), array('description' => 'Purchased', 'visitors' => 1673)));
$before = new \Kendo\Dataviz\UI\Chart('before');
$before->title(array('text' => 'Before optimization'))->dataSource($dataSourceBefore)->addSeriesItem($series)->legend(array('visible' => false))->tooltip(array('visible' => true, 'template' => '#= dataItem.description # #= kendo.format("{0:p}",data.value/dataItem.parent()[0].visitors)#'));
$dataSourceAfter = new \Kendo\Data\DataSource();
$dataSourceAfter->data(array(array('description' => 'All Visitors', 'visitors' => 28536), array('description' => 'Tried the Demos', 'visitors' => 26539), array('description' => 'Downloaded', 'visitors' => 23088), array('description' => 'Requested a Quote', 'visitors' => 13853), array('description' => 'Purchased', 'visitors' => 9697)));
$after = new \Kendo\Dataviz\UI\Chart('after');
$after->title(array('text' => 'After optimization'))->dataSource($dataSourceAfter)->addSeriesItem($series)->legend(array('visible' => false))->tooltip(array('visible' => true, 'template' => '#= dataItem.description # #= kendo.format("{0:p}",data.value/dataItem.parent()[0].visitors)#'));
?>
<div class="chart-wrapper">
<h2>Website optimization stats</h2>
<?php
echo $before->render();
?>
<?php
echo $after->render();
?>
</div>
<style scoped>
.chart-wrapper {
height: 400px;
width:730px;
margin:20px auto;
}
.chart-wrapper h2 {
padding: 20px 0 0 25px;
}
.chart-wrapper .k-chart {
display: inline-block;
width: 290px;
