Пример #1
0
<?php

require_once '../lib/Kendo/Autoload.php';
require_once '../include/header.php';
$total = new \Kendo\Dataviz\UI\ChartSeriesItem();
$total->name('Total Visits')->data(array(56000, 63000, 74000, 91000, 117000, 138000));
$unique = new \Kendo\Dataviz\UI\ChartSeriesItem();
$unique->name('Unique visitors')->data(array(52000, 34000, 23000, 48000, 67000, 83000));
$valueAxis = new \Kendo\Dataviz\UI\ChartValueAxisItem();
$valueAxis->line(array('visible' => false));
$categoryAxis = new \Kendo\Dataviz\UI\ChartCategoryAxisItem();
$categoryAxis->categories(array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'))->majorGridLines(array('visible' => false));
$tooltip = new \Kendo\Dataviz\UI\ChartTooltip();
$tooltip->visible(true)->template('#= series.name #: #= value #');
$chart = new \Kendo\Dataviz\UI\Chart('chart');
$chart->addSeriesItem($total, $unique)->addValueAxisItem($valueAxis)->addCategoryAxisItem($categoryAxis)->legend(array('position' => 'bottom'))->seriesDefaults(array('type' => 'column'))->chartArea(array('background' => 'transparent'))->title(array('text' => 'Site Visitors Stats /thousands/'))->tooltip($tooltip);
echo $chart->render();
?>
<div class="configuration-horizontal">
    <div class="config-section">
        <span class="configHead">Gap</span>
        <ul class="options">
            <li>
                <input id="gap" type="number" value="1.5" step="0.1" style="width: 60px;" />
                <button id="getGap" class="k-button">Set gap</button
            </li>
        </ul>
    </div>
    <div class="config-section">
        <span class="configHead">Spacing</span>
        <ul class="options">
Пример #2
0
        <!-- /.row -->
		<div class="row">
<?php 
require_once 'telerik/lib/Kendo/Autoload.php';
$total = new \Kendo\Dataviz\UI\ChartSeriesItem();
$total->name('Total Visits')->data(array(56000, 63000, 74000, 91000, 117000, 138000));
$unique = new \Kendo\Dataviz\UI\ChartSeriesItem();
$unique->name('Unique visitors')->data(array(52000, 34000, 23000, 48000, 67000, 83000));
$valueAxis = new \Kendo\Dataviz\UI\ChartValueAxisItem();
$valueAxis->max(140000)->line(array('visible' => false))->minorGridLines(array('visible' => true));
$categoryAxis = new \Kendo\Dataviz\UI\ChartCategoryAxisItem();
$categoryAxis->categories(array('Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'))->majorGridLines(array('visible' => false));
$tooltip = new \Kendo\Dataviz\UI\ChartTooltip();
$tooltip->visible(true)->template('#= series.name #: #= value #');
$chart = new \Kendo\Dataviz\UI\Chart('chart');
$chart->addSeriesItem($total, $unique)->addValueAxisItem($valueAxis)->addCategoryAxisItem($categoryAxis)->legend(array('visible' => false))->seriesDefaults(array('type' => 'bar'))->title(array('text' => 'Site Visitors Stats \\n /thousands/'))->chartArea(array('background' => 'transparent'))->tooltip($tooltip);
echo $chart->render();
?>


  		</div>
      </div>
      <!-- /.container-fluid -->
    </div>
    <!-- /#page-wrapper -->
  </div>
  <!-- /#wrapper -->

<!-- jQuery Version 1.11.0 -->
<script src="js/jquery-1.11.0.js"></script>
Пример #3
0
$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');
$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;
Пример #4
0
<?php

require_once '../lib/Kendo/Autoload.php';
require_once '../include/header.php';
$data = array(1, 1);
for ($i = 2; $i < 39; $i++) {
    $data[] = $data[$i - 1] + $data[$i - 2];
}
$series = new \Kendo\Dataviz\UI\ChartSeriesItem();
$series->data($data);
$valueAxis = new \Kendo\Dataviz\UI\ChartValueAxisItem();
$valueAxis->type('log')->minorGridLines(array('visible' => true));
$tooltip = new \Kendo\Dataviz\UI\ChartTooltip();
$tooltip->visible(true);
$chart = new \Kendo\Dataviz\UI\Chart('chart');
$chart->addSeriesItem($series)->addValueAxisItem($valueAxis)->title(array('text' => 'Fibonacci sequence'))->tooltip($tooltip);
echo $chart->render();
?>


<?php 
require_once '../include/footer.php';
Пример #5
0
$temp = new \Kendo\Dataviz\UI\ChartSeriesItem();
$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;
    }