Zoom: Line chart with date axis

2 posts, 0 answers
  1. tjarvas
    tjarvas avatar
    5 posts
    Member since:
    Apr 2008

    Posted 10 Sep 2015 Link to this post

    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>

  2. Iliana Nikolova
    Admin
    Iliana Nikolova avatar
    2592 posts

    Posted 12 Sep 2015 Link to this post

    Hi Tamas,

    For this scenario you should handle the chart drag and zoom events:
    //....
    $chart->drag('chart_drag');  
    $chart->zoom('chart_drag');    

    Also 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!
     
  3. UI for ASP.NET AJAX banner
Back to Top