<?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;