This is a migrated thread and some comments may be shown as answers.

[Solved] Zoom: Line chart with date axis

1 Answer 168 Views

Chart

This is a migrated thread and some comments may be shown as answers.

This question is locked. New answers and comments are not allowed.

tjarvas asked on 10 Sep 2015, 08:07 AM

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>

[Solved] Zoom: Line chart with date axis

1 Answer, 1 is accepted