I have created a line chart with date axis. How can I set it zoomable?
<!DOCTYPE html>
<html>
<head>
<meta charset=
"utf-8"
/>
<title>Telerik Line Chart</title>
<link rel=
"stylesheet"
href=
"TelerikPHPUI/styles/kendo.common.min.css"
/>
<link rel=
"stylesheet"
href=
"TelerikPHPUI/styles/kendo.default.min.css"
/>
<script src=
"TelerikPHPUI/js/jquery.min.js"
></script>
<script src=
"TelerikPHPUI/js/kendo.all.min.js"
></script>
</head>
<body>
<?php
require_once
'TelerikPHPUI/Kendo/Autoload.php'
;
require_once
'TelerikPHPUI/chart_data.php'
;
$data
=
array
(
array
(
"date"
=>
"2015-09-08 09:25:24"
,
"value"
=>
"61"
),
array
(
"date"
=>
"2015-09-08 23:57:56"
,
"value"
=>
"36"
),
array
(
"date"
=>
"2015-09-08 12:31:30"
,
"value"
=>
"7"
),
array
(
"date"
=>
"2015-09-08 10:25:24"
,
"value"
=>
"13"
),
array
(
"date"
=>
"2015-09-08 14:35:34"
,
"value"
=>
"70"
),
array
(
"date"
=>
"2015-09-08 03:09:08"
,
"value"
=>
"50"
),
array
(
"date"
=>
"2015-09-08 13:34:33"
,
"value"
=>
"78"
),
array
(
"date"
=>
"2015-09-08 20:50:49"
,
"value"
=>
"31"
),
array
(
"date"
=>
"2015-09-08 06:15:14"
,
"value"
=>
"68"
),
array
(
"date"
=>
"2015-09-08 01:05:04"
,
"value"
=>
"85"
),
array
(
"date"
=>
"2015-09-08 17:43:42"
,
"value"
=>
"6"
),
array
(
"date"
=>
"2015-09-08 09:24:23"
,
"value"
=>
"91"
),
array
(
"date"
=>
"2015-09-08 05:14:13"
,
"value"
=>
"69"
),
array
(
"date"
=>
"2015-09-08 21:54:53"
,
"value"
=>
"23"
),
array
(
"date"
=>
"2015-09-08 05:14:13"
,
"value"
=>
"57"
),
array
(
"date"
=>
"2015-09-08 09:24:23"
,
"value"
=>
"13"
),
array
(
"date"
=>
"2015-09-08 20:52:51"
,
"value"
=>
"50"
),
array
(
"date"
=>
"2015-09-08 14:36:35"
,
"value"
=>
"48"
),
array
(
"date"
=>
"2015-09-08 21:52:51"
,
"value"
=>
"79"
),
array
(
"date"
=>
"2015-09-08 23:59:58"
,
"value"
=>
"24"
)
);
$series
=
new
\Kendo\Dataviz\UI\ChartSeriesItem();
$series
->type(
'line'
)
->aggregate(
'avg'
)
->field(
'value'
)
->categoryField(
'date'
)
->data(
$data
)
->style(
"smooth"
)
->markers(
array
(
"visible"
=>false))
->name(
"adat"
);
$valueAxis
=
new
\Kendo\Dataviz\UI\ChartValueAxisItem();
$valueAxis
->labels(
array
(
'format'
=>
'{0} %'
));
$categoryAxis
=
new
\Kendo\Dataviz\UI\ChartCategoryAxisItem();
$categoryAxis
->type(
'date'
)
->baseUnit(
"hours"
)
->labels(
array
(
'format'
=>
'yy MMM dd\nHH:mm'
,
'step'
=>2));
$tooltip
=
new
\Kendo\Dataviz\UI\ChartTooltip();
$tooltip
->visible(true)
->format(
'{0} %'
)
->template(
'#=series.name# #=value# % (#=kendo.toString(category, "yyyy.MM.dd. HH:mm")#)'
);
$chartArea
=
new
\Kendo\Dataviz\UI\ChartArea();
$chartArea
->height(600);
$chart
=
new
\Kendo\Dataviz\UI\Chart(
'chart'
);
$chart
->title(
array
(
'text'
=>
'Title of chart'
))
->legend(
array
(
'position'
=>
'bottom'
))
->addSeriesItem(
$series
)
->addValueAxisItem(
$valueAxis
)
->addCategoryAxisItem(
$categoryAxis
)
->seriesDefaults(
array
(
'type'
=>
'line'
))
->chartArea(
$chartArea
)
->tooltip(
$tooltip
);
echo
$chart
->render();
?>
</body>
</html>