ASE Home Page Products Download Purchase Support About ASE
ChartDirector Support
 Forum HomeForum Home   SearchSearch

Message ListMessage List     Post MessagePost Message

  Zoom and scroll
Posted by ADQA on Nov-05-2020 23:43
| Reply | Monitor
Hi! I have a project in PHP using ChartDirector graphics and now we want to add zoom and scroll to our graphics. I found about Zooming and Scrolling Framework, but I don't know exactly how to use.

The way would be create the graphic again but using the base code of the ChartDirector/phpdemo/simplezoomscroll.php archive??

Thank you in advance.

  Re: Zoom and scroll
Posted by Peter Kwan on Nov-06-2020 21:40
| Reply | Monitor
Hi ADQA,

In a zoomable and scrollable chart, on the browser side, the user can select a region to zoom to or scroll to. The Javascript library will then send a request to the server. The PHP on the server side needs to create the chart based on user selection, and return it to the browser. The Javascript library on the browser side will then display it.

Consider the "Simple Zooming and Scrolling" example:

https://www.advsofteng.com/doc/cdphp.htm#simplezoomscrollweb.htm

The code first sets the initial full range and the display range. In the sample code, the full range is set using:

    $startDate = chartTime(2010, 1, 1);
    $endDate = chartTime(2015, 1, 1);
    $viewer->setFullRange("x", $startDate, $endDate);

The initial display is set to the latest 366 days:

    # Initialize the view port to show the last 366 days (out of 1826 days)
    $viewer->setViewPortWidth(366.0 / 1826);
    $viewer->setViewPortLeft(1 - $viewer->getViewPortWidth());

The above is the initial display. The user can change the display range by zooming and scrolling. In the charting code, we need to create a chart based on the range chosen by the user:

function drawChart(&$viewer) {
    # Determine the visible x-axis range
    $viewPortStartDate = $viewer->getValueAtViewPort("x", $viewer->getViewPortLeft());
    $viewPortEndDate = $viewer->getValueAtViewPort("x", $viewer->getViewPortLeft() + $viewer->getViewPortWidth());

    .... draw chart based on the chosen range ...
}

The chart is included in the web page using:

<?php echo $viewer->renderHTML()?>


On the browser side, it needs to include the Javascript library cdjcv.js:

<script type="text/javascript" src="cdjcv.js"></script>

In the "Simple Zooming and Scrolling" example, the user zooms in and out by dragging on the chart itself. In this case, we just need to set up the event handlers to send a request to the server when the user drags on the chart to zoom or scroll:

var viewer = JsChartViewer.get('<?php echo $viewer->getId()?>');
viewer.attachHandler("ViewPortChanged", viewer.partialUpdate);

You can find further details by reading the sample code. For example, because the mouse can be used to zoom in, zoom out, or to scroll the chart, so there are buttons to select the mouse usage. On the server side, the PHP script needs to return the entire web page when the user first accessed the page. When the user zooms in the chart, it just needs to return the updated chart, not the entire page. So there is a line to check what type of request it is, and choose whether the return the chart only, or to delivery the entire web page.

if ($viewer->isPartialUpdateRequest()) {
    # Is a partial update request. Draw the chart and perform a partial response.
    drawChart($viewer);
    print($viewer->partialUpdateChart());
    exit();
}

Regards
Peter Kwan

  Re: Zoom and scroll
Posted by ADQA on Nov-09-2020 17:10
| Reply | Monitor
Thank you for your response, Peter.

So, I understand that I need to adapt all the aditional code I use in my charts to simplezoomscroll.php, right?

Thanks