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>1 Answer, 1 is accepted
0
Hi Tamas,
For this scenario you should handle the chart drag and zoom events:
o you could check this example which demonstrates how to pan and zoom in a categorical chart with date axis.
Regards,
Iliana Nikolova
Telerik
For this scenario you should handle the chart drag and zoom events:
//....$chart->drag('chart_drag'); $chart->zoom('chart_drag'); o you could check this example which demonstrates how to pan and zoom in a categorical chart with date axis.
Regards,
Iliana Nikolova
Telerik
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!