$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> </div> <style scoped> .chart-wrapper { padding: 10px 0;
?> </td> <td> <?php $wndSeries = new \Kendo\Dataviz\UI\SparklineSeriesItem(); $wndSeries->field('Wind')->color('#5b8f00'); $wnd = new \Kendo\Dataviz\UI\Sparkline("sparkline-wnd-{$i}"); $wnd->dataSource($dataSource)->addSeriesItem($wndSeries); echo $wnd->render(); ?> </td> <td> <?php $rainSeries = new \Kendo\Dataviz\UI\SparklineSeriesItem(); $rainSeries->type('area')->field('Rain')->color('#0099ff'); $rain = new \Kendo\Dataviz\UI\Sparkline("sparkline-rain-{$i}"); $rain->dataSource($dataSource)->addSeriesItem($rainSeries); echo $rain->render(); ?> </td> </tr> <?php } ?> </tbody> </table> </div> <style scoped> .chart-wrapper { height: 370px;
<?php $statsFri = new \Kendo\Dataviz\UI\Sparkline('stats-fri'); $statsFri->type('pie')->data(array(6, 18)); echo $statsFri->render(); ?> </li> <li>SAT <?php $statsSat = new \Kendo\Dataviz\UI\Sparkline('stats-sat'); $statsSat->type('pie')->data(array(1, 23)); echo $statsSat->render(); ?> </li> <li>SUN <?php $statsSun = new \Kendo\Dataviz\UI\Sparkline('stats-sun'); $statsSun->type('pie')->data(array(5, 19)); echo $statsSun->render(); ?> </li> </ul> </div> </div> <style scoped> .chart-wrapper { width: 460px; height: 100%; margin: 0 auto 30px auto; padding: 0 0 30px 0; font-weight: bold;