<?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->field('value')->name('United States');
$valueAxis = new \Kendo\Dataviz\UI\ChartValueAxisItem();
$valueAxis->labels(array('format' => '{0}%'))->line(array('visible' => false));
$categoryAxis = new \Kendo\Dataviz\UI\ChartCategoryAxisItem();
$categoryAxis->field('year')->majorGridLines(array('visible' => false));
$tooltip = new \Kendo\Dataviz\UI\ChartTooltip();
$tooltip->visible(true)->format('{0}%')->template('#= category # - #= value #%');
$dataSource = new \Kendo\Data\DataSource();
$dataSource->data(chart_united_states_internet_usage());
$chart = new \Kendo\Dataviz\UI\Chart('chart');
$chart->title(array('text' => 'Internet Users in United States'))->dataSource($dataSource)->legend(array('visible' => false))->addSeriesItem($series)->addValueAxisItem($valueAxis)->addCategoryAxisItem($categoryAxis)->seriesDefaults(array('type' => 'area', 'labels' => array('visible' => true, 'format' => '{0}%', 'background' => 'transparent')))->tooltip($tooltip);
echo $chart->render();
require_once '../include/footer.php';
<?php
require_once '../lib/Kendo/Autoload.php';
require_once '../include/chart_data.php';
require_once '../include/header.php';
$dataSource = new \Kendo\Data\DataSource();
$dataSource->data(chart_sun_position());
$position = new \Kendo\Dataviz\UI\ChartSeriesItem();
$position->type('polarLine')->xField('azimuth')->yField('altitude')->labels(array('template' => '#= dataItem.time.substring(0,2) #h', 'position' => 'below', 'visible' => true));
$xAxis = new \Kendo\Dataviz\UI\ChartXAxisItem();
$xAxis->startAngle(-90)->majorUnit(30);
$yAxis = new \Kendo\Dataviz\UI\ChartYAxisItem();
$yAxis->labels(array('visible' => false));
$chart = new \Kendo\Dataviz\UI\Chart('chart');
$chart->title(array('text' => 'Sun position at equinox'))->dataSource($dataSource)->addSeriesItem($position)->addXAxisItem($xAxis)->addYAxisItem($yAxis);
echo $chart->render();
require_once '../include/footer.php';
<?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->type('column')->aggregate('avg')->field('value')->categoryField('date');
$categoryAxis = new \Kendo\Dataviz\UI\ChartCategoryAxisItem();
$categoryAxis->type('date')->baseUnit("weeks");
$dataSource = new \Kendo\Data\DataSource();
$dataSource->data(chart_date_points());
$chart = new \Kendo\Dataviz\UI\Chart('chart');
$chart->dataSource($dataSource)->addSeriesItem($series)->addCategoryAxisItem($categoryAxis);
echo $chart->render();
?>
<div class="configuration-horizontal">
<div class="config-section">
<span class="configHead">Base date unit</span>
<ul class="options">
<li>
<input id="baseUnitAuto" name="baseUnit"
type="radio" value="" autocomplete="off" />
<label for="baseUnitAuto">Automatic (default)</label>
</li>
<li>
<input id="baseUnitYears" name="baseUnit"
type="radio" value="years" autocomplete="off" />
<label for="baseUnitYears">Years</label>
</li>
<li>
<input id="baseUnitMonths" name="baseUnit"
<button id="set" class="k-button">Set value</button>
</li>
<li>
<button id="get" class="k-button">Get value</button>
</li>
<li>
<input id="word" value="B" class="k-textbox" />
<button id="search" class="k-button">Find starting with</button>
</li>
</ul>
</div>
<div id="colors">
<label for="input">Primary color</label>
<?php
$dataSource = new \Kendo\Data\DataSource();
$dataSource->data(array('Red-violet', 'Red', 'Red-orange', 'Orange', 'Yellow-orange', 'Yellow', 'Yellow-green', 'Green', 'Blue-green', 'Blue', 'Blue-violet', 'Violet'));
$autoComplete = new \Kendo\UI\AutoComplete('input');
$autoComplete->dataSource($dataSource);
echo $autoComplete->render();
?>
</div>
<script>
$(function() {
var autocomplete = $("#input").data("kendoAutoComplete"),
setValue = function(e) {
if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
autocomplete.value($("#value").val());
},
setSearch = function(e) {
if (e.type != "keypress" || kendo.keys.ENTER == e.keyCode)
$result = new DataSourceResult('sqlite:..//sample.db');
$data = $result->read('Products', array('ProductName', 'UnitPrice', 'UnitsInStock', 'Discontinued'));
$model = new \Kendo\Data\DataSourceSchemaModel();
$productNameField = new \Kendo\Data\DataSourceSchemaModelField('ProductName');
$productNameField->type('string');
$unitPriceField = new \Kendo\Data\DataSourceSchemaModelField('UnitPrice');
$unitPriceField->type('number');
$unitsInStockField = new \Kendo\Data\DataSourceSchemaModelField('UnitsInStock');
$unitsInStockField->type('number');
$discontinuedField = new \Kendo\Data\DataSourceSchemaModelField('Discontinued');
$discontinuedField->type('boolean');
$model->addField($productNameField)->addField($unitPriceField)->addField($unitsInStockField)->addField($discontinuedField);
$schema = new \Kendo\Data\DataSourceSchema();
$schema->data('data')->model($model)->total('total');
$dataSource = new \Kendo\Data\DataSource();
$dataSource->data($data)->pageSize(16)->schema($schema);
$grid = new \Kendo\UI\Grid('grid');
$productName = new \Kendo\UI\GridColumn();
$productName->field('ProductName')->title('Product Name');
$unitPrice = new \Kendo\UI\GridColumn();
$unitPrice->field('UnitPrice')->width('130px')->format('{0:c}')->title('Unit Price');
$unitsInStock = new \Kendo\UI\GridColumn();
$unitsInStock->field('UnitsInStock')->width('130px')->title('Units In Stock');
$discontinued = new \Kendo\UI\GridColumn();
$discontinued->field('Discontinued')->width('130px');
$grid->addColumn($productName)->addColumn($unitPrice)->addColumn($unitsInStock)->addColumn($discontinued)->scrollable(false)->dataSource($dataSource);
echo $grid->render();
$sortable = new \Kendo\UI\Sortable('#grid table');
// select the container for the Sortable
$sortable->hint(new \Kendo\JavaScriptFunction('hint'))->placeholder(new \Kendo\JavaScriptFunction('placeholder'))->filter('>tbody >tr')->cursor('move')->container('#grid tbody')->change('onChange');
echo $sortable->render();
<?php
require_once '../include/header.php';
require_once '../lib/Kendo/Autoload.php';
?>
<div id="tshirt-view" class="k-header">
<h2>Customize your Kendo T-shirt</h2>
<img id="tshirt" src="../content/web/combobox/tShirt.png" />
<div id="options">
<h3>T-shirt Fabric</h3>
<?php
$fabrics = new \Kendo\Data\DataSource();
$fabrics->data(array(array('text' => 'Cotton', 'value' => 1), array('text' => 'Polyester', 'value' => 2), array('text' => 'Cotton/Polyester', 'value' => 3), array('text' => 'Rib Knit', 'value' => 4)));
$input = new \Kendo\UI\ComboBox('fabric');
$input->dataSource($fabrics)->dataTextField('text')->dataValueField('value')->filter('contains')->placeholder('Select fabric ...')->suggest(true)->index(3);
echo $input->render();
?>
<h3>T-shirt Size</h3>
<?php
$select = new \Kendo\UI\ComboBox('size');
$select->dataSource(array('X-Small', 'Small', 'Medium', 'Large', 'X-Large', '2X-Large'))->placeholder('Select size ...')->index(0);
echo $select->render();
?>
<button class="k-button" id="get">Customize</button>
</div>
</div>
<style scoped>
#example h2 {
font-weight: normal;
}
<?php
require_once '../lib/Kendo/Autoload.php';
require_once '../include/header.php';
?>
<div class="demo-section">
<div class="k-rtl">
<h2>USA STATES:</h2>
<?php
$states = array('Alabama', 'Alaska', 'American Samoa', 'Arizona', 'Arkansas', 'California', 'Colorado', 'Connecticut', 'Delaware', 'District of Columbia', 'Florida', 'Georgia', 'Guam', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Carolina', 'North Dakota', 'Northern Marianas Islands', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Puerto Rico', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Virgin Islands', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming');
$dataSource = new \Kendo\Data\DataSource();
$dataSource->data($states);
$autoComplete = new \Kendo\UI\AutoComplete('states');
$autoComplete->dataSource($dataSource);
echo $autoComplete->render();
?>
</div>
</div>
<style scoped>
.demo-section {
width: 250px;
margin: 35px auto 50px;
padding: 30px;
}
.demo-section h2 {
text-transform: uppercase;
font-size: 1.2em;
margin-bottom: 10px;
}
</style>
<?php
require_once '../lib/Kendo/Autoload.php';
require_once '../include/chart_data.php';
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
header('Content-Type: application/json');
$result = chart_stock_prices();
echo json_encode($result);
exit;
}
require_once '../include/header.php';
$power = new \Kendo\Dataviz\UI\ChartSeriesItem();
$power->name('Power')->xField('rpm')->yField('power')->tooltip(array('format' => '{1} bhp @ {0:N0} rpm'));
$torque = new \Kendo\Dataviz\UI\ChartSeriesItem();
$torque->name('Torque')->xField('rpm')->yField('torque')->tooltip(array('format' => '{1} lb-ft @ {0:N0} rpm'));
$dataSource = new \Kendo\Data\DataSource();
$dataSource->data(array(array('rpm' => 1000, 'torque' => 50, 'power' => 10), array('rpm' => 1500, 'torque' => 65, 'power' => 19), array('rpm' => 2000, 'torque' => 80, 'power' => 30), array('rpm' => 2500, 'torque' => 92, 'power' => 44), array('rpm' => 3000, 'torque' => 104, 'power' => 59), array('rpm' => 3500, 'torque' => 114, 'power' => 76), array('rpm' => 4000, 'torque' => 120, 'power' => 91), array('rpm' => 4500, 'torque' => 125, 'power' => 107), array('rpm' => 5000, 'torque' => 130, 'power' => 124), array('rpm' => 5500, 'torque' => 133, 'power' => 139), array('rpm' => 6000, 'torque' => 130, 'power' => 149), array('rpm' => 6500, 'torque' => 122, 'power' => 151), array('rpm' => 7000, 'torque' => 110, 'power' => 147)));
$chart = new \Kendo\Dataviz\UI\Chart('chart');
$chart->title(array('text' => 'Dyno run results'))->dataSource($dataSource)->legend(array('visible' => false))->addSeriesItem($power, $torque)->tooltip(array('visible' => true))->addXAxisItem(array('title' => 'Engine rpm', 'axisCrossingValue' => array(0, 10000), 'labels' => array('format' => 'N0')))->addYAxisItem(array('title' => array('text' => 'Power (bhp)')), array('title' => array('text' => 'Torque (lb-ft)')))->seriesDefaults(array('type' => 'scatterLine', 'scatterLine' => array('width' => 2)));
echo $chart->render();
require_once '../include/footer.php';
<?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->type('boxPlot')->lowerField('lower')->q1Field('q1')->medianField('median')->q3Field('q3')->upperField('upper')->meanField('mean')->outliersField('outliers');
$dataSource = new \Kendo\Data\DataSource();
$dataSource->data(ozone_oncentration());
$categoryAxis = new \Kendo\Dataviz\UI\ChartCategoryAxisItem();
$categoryAxis->field('year')->majorGridLines(array('visible' => false));
$chart = new \Kendo\Dataviz\UI\Chart('chart');
$chart->title(array('text' => 'Ozone Concentration (ppm)'))->legend(array('visible' => false))->dataSource($dataSource)->addSeriesItem($series)->addCategoryAxisItem($categoryAxis);
echo $chart->render();
require_once '../include/footer.php';
$plotband4->from(761)->to(761.5)->color('#ff0000')->opacity(1);
$valueAxis = new \Kendo\Dataviz\UI\ChartValueAxisItem();
$valueAxis->min(715)->max(790)->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))->field('category')->title(array('text' => 'mmHg'));
$tooltip = new \Kendo\Dataviz\UI\ChartTooltip();
$tooltip->visible(true)->shared(true)->template('Maximum: #= value.target # <br /> Average: #= value.current #');
$chart_mmHg = new \Kendo\Dataviz\UI\Chart('chart-mmHg');
$chart_mmHg->addSeriesItem($mmHg)->dataSource($dataSource)->addValueAxisItem($valueAxis)->addCategoryAxisItem($categoryAxis)->legend(array('visible' => false))->chartArea(array('margin' => array('left' => 0)))->tooltip($tooltip);
echo $chart_mmHg->render();
?>
<?php
$hPa = new \Kendo\Dataviz\UI\ChartSeriesItem();
$hPa->currentField('current')->targetField('target')->type('verticalBullet')->opacity(0.8)->color('#ffffff')->target(array('color' => '#ffffff'));
$dataSource = new \Kendo\Data\DataSource();
$dataSource->data(hPa_data());
$plotband1 = new \Kendo\Dataviz\UI\ChartXAxisItemPlotBand();
$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');
<?php
require_once '../lib/Kendo/Autoload.php';
require_once '../include/chart_data.php';
require_once '../include/header.php';
$wins = new \Kendo\Dataviz\UI\ChartSeriesItem();
$wins->field('win')->noteTextField('extremum')->notes(array('position' => 'bottom', 'label' => array('position' => 'outside')))->name('Wins');
$losses = new \Kendo\Dataviz\UI\ChartSeriesItem();
$losses->field('loss')->name('Losses');
$valueAxis = new \Kendo\Dataviz\UI\ChartValueAxisItem();
$valueAxis->line(array('visible' => false));
$categoryAxis = new \Kendo\Dataviz\UI\ChartCategoryAxisItem();
$categoryAxis->field('year')->majorGridLines(array('visible' => false));
$tooltip = new \Kendo\Dataviz\UI\ChartTooltip();
$tooltip->visible(true)->template('#= category # - #= value #%');
$dataSource = new \Kendo\Data\DataSource();
$dataSource->data(chart_grand_slam());
$chart = new \Kendo\Dataviz\UI\Chart('chart');
$chart->title(array('text' => 'Roger Federer Grand Slam tournament performance'))->dataSource($dataSource)->legend(array('position' => 'bottom'))->addSeriesItem($wins, $losses)->addValueAxisItem($valueAxis)->addCategoryAxisItem($categoryAxis)->seriesDefaults(array('type' => 'line'))->tooltip($tooltip);
echo $chart->render();
require_once '../include/footer.php';
<?php
require_once '../lib/Kendo/Autoload.php';
require_once '../include/chart_data.php';
require_once '../include/header.php';
$proteins = new \Kendo\Dataviz\UI\ChartSeriesItem();
$proteins->name('Proteins')->type('radarColumn')->field('score');
$categoryAxis = new \Kendo\Dataviz\UI\ChartCategoryAxisItem();
$categoryAxis->field('abbr');
$valueAxis = new \Kendo\Dataviz\UI\ChartValueAxisItem();
$valueAxis->visible(false);
$dataSource = new \Kendo\Data\DataSource();
$dataSource->data(chart_protein_data());
$chart = new \Kendo\Dataviz\UI\Chart('chart');
$chart->title(array('text' => 'Protein quality, Apple raw'))->dataSource($dataSource)->addSeriesItem($proteins)->addCategoryAxisItem($categoryAxis)->addValueAxisItem($valueAxis)->tooltip(array('visible' => true))->legend(array('visible' => false));
echo $chart->render();
require_once '../include/footer.php';
<?php
require_once '../lib/Kendo/Autoload.php';
require_once '../include/header.php';
$series = new \Kendo\Dataviz\UI\ChartSeriesItem();
$series->type('bubble')->xField('growth')->yField('jobs')->sizeField('applications')->categoryField('company');
$dataSource = new \Kendo\Data\DataSource();
$dataSource->data(array(array('growth' => -2500, 'jobs' => 50000, 'applications' => 500000, 'company' => 'Microsoft'), array('growth' => 500, 'jobs' => 110000, 'applications' => 7600000, 'company' => 'Starbucks'), array('growth' => 7000, 'jobs' => 19000, 'applications' => 700000, 'company' => 'Google'), array('growth' => 1400, 'jobs' => 150000, 'applications' => 700000, 'company' => 'Publix Super Markets'), array('growth' => 2400, 'jobs' => 30000, 'applications' => 300000, 'company' => 'PricewaterhouseCoopers'), array('growth' => 2450, 'jobs' => 34000, 'applications' => 90000, 'company' => 'Cisco'), array('growth' => 2700, 'jobs' => 34000, 'applications' => 400000, 'company' => 'Accenture'), array('growth' => 2900, 'jobs' => 40000, 'applications' => 450000, 'company' => 'Deloitte'), array('growth' => 3000, 'jobs' => 55000, 'applications' => 900000, 'company' => 'Whole Foods Market')));
$xAxis = new \Kendo\Dataviz\UI\ChartXAxisItem();
$xAxis->labels(array('format' => '{0:N0}', 'skip' => 1))->axisCrossingValue(-5000)->majorUnit(2000)->addPlotBand(array('from' => -5000, 'to' => 0, 'color' => '#00f', 'opacity' => 0.05));
$yAxis = new \Kendo\Dataviz\UI\ChartYAxisItem();
$yAxis->labels(array('format' => '{0:N0}'))->line(array('width' => 0));
$chart = new \Kendo\Dataviz\UI\Chart('chart');
$chart->title(array('text' => 'Job Growth for 2011'))->dataSource($dataSource)->legend(array('visible' => false))->addXAxisItem($xAxis)->addYAxisItem($yAxis)->tooltip(array('visible' => true, 'format' => '{3}: {2:N0} applications', 'opacity' => 1))->addSeriesItem($series);
?>
<div class="chart-wrapper">
<?php
echo $chart->render();
?>
<ul class="k-content">
<li>Circle size shows number of job applicants</li>
<li>Vertical position shows number of employees</li>
<li>Horizontal position shows job growth</li>
</ul>
</div>
<style scoped>
.chart-wrapper {
position: relative;
}
require_once 'lib/Kendo/Autoload.php';
include 'header.php';
// ---- PHP Objects / Array ----
$obj1 = new stdClass();
$obj1->id = 1;
$obj1->value = "foo";
$obj2 = new stdClass();
$obj2->id = 2;
$obj2->value = "bar";
$obj3 = new stdClass();
$obj3->id = 3;
$obj3->value = "baz";
$myList = array($obj1, $obj2, $obj3);
// ---- Kendo UI DataSource ----
$ds = new \Kendo\Data\DataSource();
$ds->data($myList);
// ---- Kendo UI DropDownList ----
$dropList = new \Kendo\UI\DropDownList('my-list');
$dropList->dataSource($ds)->dataValueField("id")->dataTextField("value");
?>
<h2>A DropDown List</h2>
<p>
A Kendo UI DropDown list with a hard coded list
of items as the data source.
</p>
<?php
echo $dropList->render();
?>
<?php
$model = new \Kendo\Data\DataSourceSchemaModel();
$startField = new \Kendo\Data\DataSourceSchemaModelField('start');
$startField->type('date');
$endField = new \Kendo\Data\DataSourceSchemaModelField('end');
$endField->type('date');
$titleField = new \Kendo\Data\DataSourceSchemaModelField('title');
$titleField->defaultValue('No title')->validation(array('required' => true));
$roomIdField = new \Kendo\Data\DataSourceSchemaModelField('roomId');
$roomIdField->nullable(true);
$attendeeField = new \Kendo\Data\DataSourceSchemaModelField('attendee');
$attendeeField->defaultValue(1);
$model->id('meetingID')->addField($roomIdField)->addField($startField)->addField($endField)->addField($attendeeField)->addField($titleField);
$schema = new \Kendo\Data\DataSourceSchema();
$schema->model($model);
$dataSource = new \Kendo\Data\DataSource();
$dataSource->data($data)->schema($schema);
$roomResource = new \Kendo\UI\SchedulerResource();
$roomResource->field('roomId')->title('Room')->name('Rooms')->dataSource(array(array('text' => 'Meeting Room 101', 'value' => 1, 'color' => '#6eb3fa'), array('text' => 'Meeting Room 201', 'value' => 2, 'color' => '#f58a8a')));
$attendeesResource = new \Kendo\UI\SchedulerResource();
$attendeesResource->field('attendee')->title('Attendee')->name('Attendee')->dataSource(array(array('text' => 'Alex', 'value' => 1, 'color' => '#f8a398'), array('text' => 'Bob', 'value' => 2, 'color' => '#51a0ed')));
$scheduler = new \Kendo\UI\Scheduler('scheduler');
$scheduler->date(new DateTime('2013/6/13'))->height(600)->addResource($attendeesResource, $roomResource)->group(array('resources' => array('Rooms')))->addView(array('type' => 'day', 'startTime' => new DateTime('2013/6/13 7:00')))->resize('scheduler_resize')->resizeEnd('scheduler_resizeEnd')->move('scheduler_move')->moveEnd('scheduler_moveEnd')->addEvent('scheduler_add')->save('scheduler_save')->dataSource($dataSource);
echo $scheduler->render();
?>
<script>
function scheduler_resize(e) {
if (roomIsOccupied(e.start, e.end, e.event, e.resources) || attendeeIsOccupied(e.start, e.end, e.event, e.resources)) {
this.wrapper.find(".k-marquee-color").addClass("invalid-slot");
e.preventDefault();
}
echo $sparkline->render();
?>
</td>
<td class="direct">
<?php
$valueAxis = new \Kendo\Dataviz\UI\SparklineValueAxisItem();
$valueAxis->max(50);
$sparkline = new \Kendo\Dataviz\UI\Sparkline("bar-direct-{$i}");
$sparkline->type('bar')->renderAs('canvas')->data($row['direct'])->addValueAxisItem($valueAxis)->attr('style', 'width: 130px');
echo $sparkline->render();
?>
</td>
<td class="benefits">
<?php
$dataSource = new \Kendo\Data\DataSource();
$dataSource->data($row['benefits'])->addGroupItem(array('field' => 'type'));
$series = new \Kendo\Dataviz\UI\SparklineSeriesItem();
$series->type('bar')->field('value');
$valueAxis = new \Kendo\Dataviz\UI\SparklineValueAxisItem();
$valueAxis->max(10);
$sparkline = new \Kendo\Dataviz\UI\Sparkline("bar-benefits-{$i}");
$sparkline->renderAs('canvas')->dataSource($dataSource)->addSeriesItem($series)->addValueAxisItem($valueAxis)->attr('style', 'width: 130px');
echo $sparkline->render();
?>
</td>
</tr>
<?php
}
?>
</tbody>
</table>
<?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->field('value')->colorField('userColor');
$valueAxis = new \Kendo\Dataviz\UI\ChartValueAxisItem();
$valueAxis->max(28)->majorGridLines(array('visible' => false))->visible(false);
$categoryAxis = new \Kendo\Dataviz\UI\ChartCategoryAxisItem();
$categoryAxis->field('day')->majorGridLines(array('visible' => false))->line(array('visible' => false));
$tooltip = new \Kendo\Dataviz\UI\ChartTooltip();
$tooltip->visible(true)->format('{0}%')->template('#= category # - #= value #%');
$dataSource = new \Kendo\Data\DataSource();
$dataSource->data(chart_blog_comments());
$chart = new \Kendo\Dataviz\UI\Chart('chart');
$chart->title(array('align' => 'left', 'text' => 'Comments per day'))->dataSource($dataSource)->legend(array('visible' => false))->addSeriesItem($series)->addValueAxisItem($valueAxis)->addCategoryAxisItem($categoryAxis)->seriesDefaults(array('type' => 'column', 'labels' => array('visible' => true, 'background' => 'transparent')))->tooltip($tooltip);
echo $chart->render();
require_once '../include/footer.php';
<?php
require_once '../include/header.php';
require_once '../lib/Kendo/Autoload.php';
?>
<div id="shipping">
<label for="countries" class="info">Shipping countries:</label>
<?php
$countries = array('Albania', 'Andorra', 'Armenia', 'Austria', 'Azerbaijan', 'Belarus', 'Belgium', 'Bosnia & Herzegovina', 'Bulgaria', 'Croatia', 'Cyprus', 'Czech Republic', 'Denmark', 'Estonia', 'Finland', 'France', 'Georgia', 'Germany', 'Greece', 'Hungary', 'Iceland', 'Ireland', 'Italy', 'Kosovo', 'Latvia', 'Liechtenstein', 'Lithuania', 'Luxembourg', 'Macedonia', 'Malta', 'Moldova', 'Monaco', 'Montenegro', 'Netherlands', 'Norway', 'Poland', 'Portugal', 'Romania', 'Russia', 'San Marino', 'Serbia', 'Slovakia', 'Slovenia', 'Spain', 'Sweden', 'Switzerland', 'Turkey', 'Ukraine', 'United Kingdom', 'Vatican City');
$dataSource = new \Kendo\Data\DataSource();
$dataSource->data($countries);
$autoComplete = new \Kendo\UI\AutoComplete('countries');
$autoComplete->dataSource($dataSource)->filter('startswith')->placeholder('Select country...')->separator(', ');
echo $autoComplete->render();
?>
<div class="hint">Start typing the name of an European country</div>
</div>
<style scoped="scoped">
.info {
display: block;
line-height: 22px;
padding: 0 5px 5px 0;
color: #36558e;
}
#shipping {
width: 482px;
height: 152px;
padding: 110px 0 0 30px;
background: url('../content/web/autocomplete/shipping.png') transparent no-repeat 0 0;
<?php
require_once '../lib/Kendo/Autoload.php';
require_once '../include/header.php';
$data = array(array('title' => 'Fast and furious 6', 'image' => '../content/web/scheduler/fast-and-furious.jpg', 'imdb' => 'http://www.imdb.com/title/tt1905041/', 'start' => new DateTime('2013/6/13 17:00'), 'end' => new DateTime('2013/6/13 18:30')), array('title' => 'The Internship', 'image' => '../content/web/scheduler/the-internship.jpg', 'imdb' => 'http://www.imdb.com/title/tt2234155/', 'start' => new DateTime('2013/6/13 14:00'), 'end' => new DateTime('2013/6/13 15:30')), array('title' => 'The Perks of Being a Wallflower', 'image' => '../content/web/scheduler/wallflower.jpg', 'imdb' => 'http://www.imdb.com/title/tt1659337/', 'start' => new DateTime('2013/6/13 16:00'), 'end' => new DateTime('2013/6/13 17:30')), array('title' => 'The Help', 'image' => '../content/web/scheduler/the-help.jpg', 'imdb' => 'http://www.imdb.com/title/tt1454029/', 'start' => new DateTime('2013/6/13 12:00'), 'end' => new DateTime('2013/6/13 13:30')), array('title' => 'Now You See Me', 'image' => '../content/web/scheduler/now-you-see-me.jpg', 'imdb' => 'http://www.imdb.com/title/tt1670345/', 'start' => new DateTime('2013/6/13 10:00'), 'end' => new DateTime('2013/6/13 11:30')), array('title' => 'Fast and furious 6', 'image' => '../content/web/scheduler/fast-and-furious.jpg', 'imdb' => 'http://www.imdb.com/title/tt1905041/', 'start' => new DateTime('2013/6/13 19:00'), 'end' => new DateTime('2013/6/13 20:30')), array('title' => 'The Internship', 'image' => '../content/web/scheduler/the-internship.jpg', 'imdb' => 'http://www.imdb.com/title/tt2234155/', 'start' => new DateTime('2013/6/13 17:30'), 'end' => new DateTime('2013/6/13 19:00')), array('title' => 'The Perks of Being a Wallflower', 'image' => '../content/web/scheduler/wallflower.jpg', 'imdb' => 'http://www.imdb.com/title/tt1659337/', 'start' => new DateTime('2013/6/13 17:30'), 'end' => new DateTime('2013/6/13 19:00')), array('title' => 'The Help', 'image' => '../content/web/scheduler/the-help.jpg', 'imdb' => 'http://www.imdb.com/title/tt1454029/', 'start' => new DateTime('2013/6/13 13:30'), 'end' => new DateTime('2013/6/13 15:00')), array('title' => 'Now You See Me', 'image' => '../content/web/scheduler/now-you-see-me.jpg', 'imdb' => 'http://www.imdb.com/title/tt1670345/', 'start' => new DateTime('2013/6/13 12:30'), 'end' => new DateTime('2013/6/13 14:00')));
$dataSource = new \Kendo\Data\DataSource();
$dataSource->data($data);
$scheduler = new \Kendo\UI\Scheduler('scheduler');
$scheduler->date(new DateTime('2013/6/13'))->height(600)->addView(array('type' => 'day', 'startTime' => new DateTime('2013/6/13 10:00'), 'endTime' => new DateTime('2013/6/13 23:00')), array('type' => 'agenda', 'startTime' => new DateTime('2013/6/13 10:00'), 'endTime' => new DateTime('2013/6/13 23:00')))->editable(false)->eventTemplateId('event-template')->dataSource($dataSource);
echo $scheduler->render();
?>
<script id="event-template" type="text/x-kendo-template">
<div class='movie-template'>
<img src="#= image #">
<p>
#: kendo.toString(start, "hh:mm") # - #: kendo.toString(end, "hh:mm") #
</p>
<h3>#: title #</h3>
<a href="#= imdb #">Movie in IMDB</a>
</div>
</script>
<style scoped>
.movie-template img {
float: left;
margin: 0 8px;
}
.movie-template p {
margin: 5px 0 0;
}
<?php
require_once '../lib/Kendo/Autoload.php';
require_once '../include/header.php';
$series = new \Kendo\Dataviz\UI\ChartSeriesItem();
$series->type('donut')->field('percentage')->categoryField('source')->explodeField('explode');
$dataSource = new \Kendo\Data\DataSource();
$dataSource->data(array(array('source' => 'Hydro', 'percentage' => 22, 'explode' => true), array('source' => 'Solar', 'percentage' => 2), array('source' => 'Nuclear', 'percentage' => 49), array('source' => 'Wind', 'percentage' => 27)));
$chart = new \Kendo\Dataviz\UI\Chart('chart');
$chart->title(array('text' => 'Break-up of Spain Electricity Production for 2008'))->dataSource($dataSource)->addSeriesItem($series)->legend(array('position' => 'bottom'))->seriesColors(array('#42a7ff', '#666666', '#999999', '#cccccc'))->tooltip(array('visible' => true, 'template' => '${ category } - ${ value }%'));
echo $chart->render();
require_once '../include/footer.php';
<?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';
<?php
require_once '../lib/Kendo/Autoload.php';
require_once '../include/header.php';
$series = new \Kendo\Dataviz\UI\ChartSeriesItem();
$series->type('funnel')->field('visitors')->dynamicHeight(false)->dynamicSlope(true)->labels(array('color' => 'black', 'visible' => true, 'background' => 'transparent', 'align' => 'left', 'template' => '#= dataItem.description #: #=value#'))->categoryField('description');
$dataSourceBefore = new \Kendo\Data\DataSource();
$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;
