XY Zooming and Scrolling

This example demonstrates zooming and scrolling in both horizontal and vertical directions. In addition to using mouse click and drag, this example demonstrates using a WebViewPortControl to visualize and control the viewport. There is also an image map for data point tooltips.

The main source code listing of this sample program is included at the end of this section. The code consists of the following main parts:

initViewer: This function is for initializing the WebChartViewer during initial page request. In this example, we just use default values, so there is nothing to initialize.
drawChart: This is the main charting code. It plots the chart as usual, with the x-axis and y-axis configured to synchronize with the view port using WebChartViewer.syncDateAxisWithViewPort.
drawFullChart: This function draws an overall chart that covers the full data range for display in the WebViewPortControl.
window onload event handler: The event handler, set up using JsChartViewer.addEventListener, is used to initialize the browser side user interface. It configures the JsChartViewer.ViewPortChanged event to trigger an AJAX chart update. The mouse usage is initialized to JsChartViewer.ZoomIn. Finally, it connects the JsViewPortControl with the JsChartViewer, so that the JsViewPortControl can be used to visualize and control the viewport of the JsChartViewer.
setMouseUsage: This function is called by the onclick event handler of the Pointer, Zoom In and Zoom Out push buttons to set the mouse usage mode.

When the script starts to run , the first thing it does is to use WebChartViewer.isPartialUpdateRequest to detect if it is handling an AJAX chart update or an initial page request. If it is an AJAX chart update, it just draws the chart and sends back an AJAX response using WebChartViewer.partialUpdateChart, then terminates the request. If it is an initial page request, it initializes the WebChartViewer, draws the chart, and sends the HTML contents to the browser as usual.

This sample script requires the following files. When developing your own script using this sample script as a template, please ensure you copy the necessary files to the proper directories and reference them using proper paths.

File	Description
xyzoomscroll.pl	Main source code for this demo.
scrollnesw.gif zoomInIcon.gif zoomOutIcon.gif	The images used in the push buttons in this demo.
getchart.pl	The standard utility script used in the image url for retrieving the chart image from a temporary file (see BaseChart.makeTmpFile).
cdjcv.js zoomin.cur zoomout.cur wait.gif spacer.gif	The script file for JsChartViewer and JsViewPortControl, and the supporting cursor and image files. They must be in the same directory.
loadresource.pl	A utility script for loading non-CGI files from the CGI directory. For convenience of distribution, in this demonstration, all files, including Javascript, GIF and CUR files, are put in the same directory as the CGI script, and "loadresource.pl" is used to load them. This is less efficient. In your own script, it is recommended that you put the Javascript, GIF and CUR files in a web document directory, so that "loadresource.pl" is not needed.

[CGI Version] perldemo_cgi\xyzoomscroll.pl

#!/usr/bin/perl

# In the sample code, the ChartDirector for Perl module is assumed to be in "../lib"
use File::Basename;
use lib (dirname($0)."/../lib") =~ /(.*)/;

use perlchartdir;

# Get HTTP query parameters
use CGI;
my $query = new CGI;


#
# In this demo, the generated web page needs to load the "cdjcv.js" Javascript file and several GIF
# files. For ease of installation, we put these files in the same directory as this script. However,
# if this script is installed in a CGI only directory (such as cgi-bin), the web server would not
# allow the browser to access these non-CGI files.
#
# To get around this potential issue, a special load resource script is used to load these files.
# Instead of using:
#
#    <SCRIPT SRC="cdjcv.js">
#
# we now use:
#
#    <SCRIPT SRC="loadresource.pl?file=cdjcv.js">
#
# Similar methods are used to load the GIF files.
#
# If this script is not in a CGI only directory, you may replace the following loadResource string
# with an empty string "" to improve performance.
#
my $loadResource = "loadresource.pl?file=";

#
# Initialize the WebChartViewer when the page is first loaded
#
sub initViewer
{
    my ($viewer) = @_;
    #
    # This example assumes the initial chart is the full chart and we can auto-detect the full data
    # range in the drawChart code. So we do not need to configure the full range here.
    #
}

#
# Draw the main chart
#
sub drawChart
{
    my ($viewer) = @_;
    #
    # For simplicity, in this demo, the data arrays are filled with hard coded data. In a real
    # application, you may use a database or other data source to load up the arrays, and only
    # visible data (data within the view port) need to be loaded.
    #
    my $dataX0 = [10, 15, 6, -12, 14, -8, 13, -3, 16, 12, 10.5, -7, 3, -10, -5, 2, 5];
    my $dataY0 = [130, 150, 80, 110, -110, -105, -130, -15, -170, 125, 125, 60, 25, 150, 150, 15,
        120];
    my $dataX1 = [6, 7, -4, 3.5, 7, 8, -9, -10, -12, 11, 8, -3, -2, 8, 4, -15, 15];
    my $dataY1 = [65, -40, -40, 45, -70, -80, 80, 10, -100, 105, 60, 50, 20, 170, -25, 50, 75];
    my $dataX2 = [-10, -12, 11, 8, 6, 12, -4, 3.5, 7, 8, -9, 3, -13, 16, -7.5, -10, -15];
    my $dataY2 = [65, -80, -40, 45, -70, -80, 80, 90, -100, 105, 60, -75, -150, -40, 120, -50, -30];

    # Create an XYChart object 500 x 480 pixels in size, with light blue (c0c0ff) background
    my $c = new XYChart(500, 480, 0xc0c0ff);

    # Set the plotarea at (50, 40) and of size 400 x 400 pixels. Use light grey (c0c0c0) horizontal
    # and vertical grid lines. Set 4 quadrant coloring, where the colors alternate between lighter
    # and deeper grey (dddddd/eeeeee).
    $c->setPlotArea(50, 40, 400, 400, -1, -1, -1, 0xc0c0c0, 0xc0c0c0)->set4QBgColor(0xdddddd,
        0xeeeeee, 0xdddddd, 0xeeeeee, 0x000000);

    # As the data can lie outside the plotarea in a zoomed chart, we need enable clipping
    $c->setClipping();

    # Set 4 quadrant mode, with both x and y axes symetrical around the origin
    $c->setAxisAtOrigin($perlchartdir::XYAxisAtOrigin, $perlchartdir::XAxisSymmetric +
        $perlchartdir::YAxisSymmetric);

    # Add a legend box at (450, 40) (top right corner of the chart) with vertical layout and 8pt
    # Arial Bold font. Set the background color to semi-transparent grey (40dddddd).
    my $legendBox = $c->addLegend(450, 40, 1, "arialbd.ttf", 8);
    $legendBox->setAlignment($perlchartdir::TopRight);
    $legendBox->setBackground(0x40dddddd);

    # Add titles to axes
    $c->xAxis()->setTitle("Alpha Index");
    $c->yAxis()->setTitle("Beta Index");

    # Set axes line width to 2 pixels
    $c->xAxis()->setWidth(2);
    $c->yAxis()->setWidth(2);

    # The default ChartDirector settings has a denser y-axis grid spacing and less-dense x-axis grid
    # spacing. In this demo, we want the tick spacing to be symmetrical. We use around 40 pixels
    # between major ticks and 20 pixels between minor ticks.
    $c->xAxis()->setTickDensity(40, 20);
    $c->yAxis()->setTickDensity(40, 20);

    #
    # In this example, we represent the data by scatter points. You may modify the code below to use
    # other layer types (lines, areas, etc).
    #

    # Add scatter layer, using 11 pixels red (ff33333) X shape symbols
    $c->addScatterLayer($dataX0, $dataY0, "Group A", perlchartdir::Cross2Shape(), 11, 0xff3333);

    # Add scatter layer, using 11 pixels green (33ff33) circle symbols
    $c->addScatterLayer($dataX1, $dataY1, "Group B", $perlchartdir::CircleShape, 11, 0x33ff33);

    # Add scatter layer, using 11 pixels blue (3333ff) triangle symbols
    $c->addScatterLayer($dataX2, $dataY2, "Group C", $perlchartdir::TriangleSymbol, 11, 0x3333ff);

    #
    # In this example, we have not explicitly configured the full x and y range. In this case, the
    # first time syncLinearAxisWithViewPort is called, ChartDirector will auto-scale the axis and
    # assume the resulting range is the full range. In subsequent calls, ChartDirector will set the
    # axis range based on the view port and the full range.
    #
    $viewer->syncLinearAxisWithViewPort("x", $c->xAxis());
    $viewer->syncLinearAxisWithViewPort("y", $c->yAxis());

    # Output the chart
    my $chartQuery = $c->makeTmpFile("/tmp/tmpcharts");

    # Include tool tip for the chart
    my $imageMap = $c->getHTMLImageMap("", "",
        "title='[{dataSetName}] Alpha = {x|G}, Beta = {value|G}'");

    # Set the chart URL, image map and chart metrics to the viewer
    $viewer->setImageUrl("getchart.pl?img=/tmp/tmpcharts/".$chartQuery);
    $viewer->setImageMap($imageMap);
    $viewer->setChartMetrics($c->getChartMetrics());
}

#
# Draw the thumbnail chart in the WebViewPortControl
#
sub drawFullChart
{
    my ($vp, $viewer) = @_;
    #
    # For simplicity, in this demo, the data arrays are filled with hard coded data. In a real
    # application, you may use a database or other data source to load up the arrays. As this is a
    # small thumbnail chart, complete data may not be needed. For exmaple, if there are a million
    # points, a random sample may already be sufficient for the thumbnail chart.
    #
    my $dataX0 = [10, 15, 6, -12, 14, -8, 13, -3, 16, 12, 10.5, -7, 3, -10, -5, 2, 5];
    my $dataY0 = [130, 150, 80, 110, -110, -105, -130, -15, -170, 125, 125, 60, 25, 150, 150, 15,
        120];
    my $dataX1 = [6, 7, -4, 3.5, 7, 8, -9, -10, -12, 11, 8, -3, -2, 8, 4, -15, 15];
    my $dataY1 = [65, -40, -40, 45, -70, -80, 80, 10, -100, 105, 60, 50, 20, 170, -25, 50, 75];
    my $dataX2 = [-10, -12, 11, 8, 6, 12, -4, 3.5, 7, 8, -9, 3, -13, 16, -7.5, -10, -15];
    my $dataY2 = [65, -80, -40, 45, -70, -80, 80, 90, -100, 105, 60, -75, -150, -40, 120, -50, -30];

    # Create an XYChart object 120 x 120 pixels in size
    my $c = new XYChart(120, 120);

    # Set the plotarea to cover the entire chart and with no grid lines. Set 4 quadrant coloring,
    # where the colors alternate between lighter and deeper grey (d8d8d8/eeeeee).
    $c->setPlotArea(0, 0, $c->getWidth() - 1, $c->getHeight() - 1, -1, -1, -1,
        $perlchartdir::Transparent)->set4QBgColor(0xd8d8d8, 0xeeeeee, 0xd8d8d8, 0xeeeeee, 0x000000);

    # Set 4 quadrant mode, with both x and y axes symetrical around the origin
    $c->setAxisAtOrigin($perlchartdir::XYAxisAtOrigin, $perlchartdir::XAxisSymmetric +
        $perlchartdir::YAxisSymmetric);

    # The x and y axis scales reflect the full range of the view port
    $c->xAxis()->setLinearScale($viewer->getValueAtViewPort("x", 0), $viewer->getValueAtViewPort(
        "x", 1), $perlchartdir::NoValue);
    $c->yAxis()->setLinearScale($viewer->getValueAtViewPort("y", 0), $viewer->getValueAtViewPort(
        "y", 1), $perlchartdir::NoValue);

    # Add scatter layer, using 5 pixels red (ff33333) X shape symbols
    $c->addScatterLayer($dataX0, $dataY0, "Group A", perlchartdir::Cross2Shape(), 5, 0xff3333);

    # Add scatter layer, using 5 pixels green (33ff33) circle symbols
    $c->addScatterLayer($dataX1, $dataY1, "Group B", $perlchartdir::CircleShape, 5, 0x33ff33);

    # Add scatter layer, using 5 pixels blue (3333ff) triangle symbols
    $c->addScatterLayer($dataX2, $dataY2, "Group C", $perlchartdir::TriangleSymbol, 5, 0x3333ff);

    # Output the chart
    my $chartQuery = $c->makeTmpFile("/tmp/tmpcharts");

    # Set the chart URL and chart metrics to the viewport control
    $vp->setImageUrl("getchart.pl?img=/tmp/tmpcharts/".$chartQuery);
    $vp->setChartMetrics($c->getChartMetrics());
}

#
# This script handles both the full page request, as well as the subsequent partial updates (AJAX
# chart updates). We need to determine the type of request first before we processing it.
#

# Create the WebChartViewer object
my $viewer = new WebChartViewer($query, "chart1");

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

#
# If the code reaches here, it is a full page request.
#

# Initialize the WebChartViewer and draw the chart.
initViewer($viewer);
drawChart($viewer);

# Draw a thumbnail chart representing the full range in the WebViewPortControl
my $viewPortCtrl = new WebViewPortControl("fullchart1");
drawFullChart($viewPortCtrl, $viewer);

print "Content-type: text/html\n\n";
print <<EndOfHTML
<!DOCTYPE html>
<html>
<head>
    <title>XY Zooming and Scrolling</title>
    <script type="text/javascript" src="${loadResource}cdjcv.js"></script>
    <style type="text/css">
        .chartButton { font:12px Verdana; border-bottom:#000000 1px solid; padding:5px; cursor:pointer;}
        .chartButtonSpacer { font:12px Verdana; border-bottom:#000000 1px solid; padding:5px;}
        .chartButton:hover { box-shadow:inset 0px 0px 0px 2px #444488; }
        .chartButtonPressed { background-color: #CCFFCC; }
    </style>
</head>
<body style="margin:0px">
<script type="text/javascript">

//
// Execute the following initialization code after the web page is loaded
//
JsChartViewer.addEventListener(window, 'load', function() {
    // Update the chart when the view port has changed (eg. when the user zooms in using the mouse)
    var viewer = JsChartViewer.get('@{[$viewer->getId()]}');
    viewer.attachHandler("ViewPortChanged", viewer.partialUpdate);

    // Set the zoom and scroll mode to bi-directional
    viewer.setScrollDirection(JsChartViewer.HorizontalVertical);
    viewer.setZoomDirection(JsChartViewer.HorizontalVertical);

    // Set the initial mouse usage to "zoom in"
    setMouseMode(JsChartViewer.ZoomIn);

    // Initialize the view port control
    var viewPortCtrl = JsViewPortControl.get('@{[$viewPortCtrl->getId()]}');
    // Set the mask color to semi-transparent black
    viewPortCtrl.setViewPortExternalColor("#80000000");
    // Set the selection rectangle border to white
    viewPortCtrl.setSelectionBorderStyle("1px solid white");
    // Bind the view port control to the chart viewer
    viewPortCtrl.setViewer(viewer);
});

//
// This method is called when the user clicks on the Pointer, Zoom In or Zoom Out buttons
//
function setMouseMode(mode)
{
    var viewer = JsChartViewer.get('@{[$viewer->getId()]}');
    if (mode == viewer.getMouseUsage())
        mode = JsChartViewer.Default;

    // Set the button color based on the selected mouse mode
    document.getElementById("scrollButton").className = "chartButton" +
        ((mode  == JsChartViewer.Scroll) ? " chartButtonPressed" : "");
    document.getElementById("zoomInButton").className = "chartButton" +
        ((mode  == JsChartViewer.ZoomIn) ? " chartButtonPressed" : "");
    document.getElementById("zoomOutButton").className = "chartButton" +
        ((mode  == JsChartViewer.ZoomOut) ? " chartButtonPressed" : "");

    // Set the mouse mode
    viewer.setMouseUsage(mode);
}

</script>
<form method="post">
<table cellspacing="0" cellpadding="0" style="border:black 1px solid;">
    <tr>
        <td align="right" colspan="2" style="background:#000088; color:#ffff00; padding:0px 4px 2px 0px;">
            <a style="color:#FFFF00; font:italic bold 10pt Arial; text-decoration:none" href="http://www.advsofteng.com/">
                Advanced Software Engineering
            </a>
        </td>
    </tr>
    <tr valign="top">
        <td style="width:130px; background:#e0e0e0;">
            <!-- The following table is to create 3 cells for 3 buttons to control the mouse usage mode. -->
            <table style="width:100%; padding:0px; border:0px; border-spacing:0px;">
                <tr>
                    <td class="chartButton" id="scrollButton" onclick="setMouseMode(JsChartViewer.Scroll)"
                        ontouchstart="this.onclick(event); event.preventDefault();">
                        <img src="${loadResource}scrollnesw.gif" style="vertical-align:middle" alt="Drag" />&nbsp;&nbsp;Drag to Scroll
                    </td>
                </tr>
                <tr>
                    <td class="chartButton" id="zoomInButton" onclick="setMouseMode(JsChartViewer.ZoomIn)"
                        ontouchstart="this.onclick(event); event.preventDefault();">
                        <img src="${loadResource}zoomInIcon.gif" style="vertical-align:middle" alt="Zoom In" />&nbsp;&nbsp;Zoom In
                    </td>
                </tr>
                <tr>
                    <td class="chartButton" id="zoomOutButton" onclick="setMouseMode(JsChartViewer.ZoomOut)"
                        ontouchstart="this.onclick(event); event.preventDefault();">
                        <img src="${loadResource}zoomOutIcon.gif" style="vertical-align:middle" alt="Zoom Out" />&nbsp;&nbsp;Zoom Out
                    </td>
                </tr>
            </table>
            <br /><br /><br /><br /><br />
            <div style="text-align:center;">
                <!-- ****** Here is the view port control ****** -->
                @{[$viewPortCtrl->renderHTML()]}
            </div>
        </td>
        <td style="border-left: black 1px solid; background-color: #c0c0ff; padding:5px">
            <!-- ****** Here is the chart image ****** -->
            @{[$viewer->renderHTML()]}
        </td>
    </tr>
</table>
</form>
</body>
</html>
EndOfHTML
;