<?php
require_once("../lib/FinanceChart.php");

#
# Copyright 2006 Advanced Software Engineering Limited
#
# You may use and modify the sample code in this file in your application, provided the Sample Code
# and its modifications are used only in conjunction with ChartDirector. Usage of this software is
# subjected to the terms and condition of the ChartDirector license.
#
#
# We need to handle 3 types of request: - initial request for the full web page - partial update
# (AJAX chart update) to update the chart without reloading the page - full page update for old
# browsers that does not support partial updates
#

#
# Handles the initial request
#
function createFirstChart(&$viewer) {
    # Initialize the Javascript ChartViewer
    $viewer->setScrollDirection(DirectionHorizontal);
    $viewer->setZoomDirection(DirectionHorizontal);
    $viewer->setMouseUsage(MouseUsageScroll);

    $viewer->setCustomAttr("noOfSessions", 500);    
    $viewer->setViewPortLeft(0.75);
    $viewer->setViewPortWidth(0.25);
    
    # Draw the chart
    drawChart($viewer);
}

#
# Handles partial update (AJAX chart update)
#
function processPartialUpdate(&$viewer) {
    # In this demo, we just need to redraw the chart
    drawChart($viewer);
}

#
# Draw the chart
#
function drawChart(&$viewer) {

	# Get the visible trading sessions
	$noOfSessions = (int)($viewer->getCustomAttr("noOfSessions"));
	$viewPortStartSession = round($viewer->getViewPortLeft() * ($noOfSessions - 1));
	$viewPortEndSession = round(($viewer->getViewPortLeft() + $viewer->getViewPortWidth()) * ($noOfSessions - 1));
	
	# This is the random number generator that creates our random database table
	$rantable = new RanTable(9, 6, 1000);
	$rantable->setDateCol(0, chartTime(2008, 9, 4), 86400, true);
	$rantable->setHLOCCols(1, 100, -5, 5);
	$rantable->setCol(5, 50000000, 250000000);
	$timeStamps = $rantable->getCol(0);
	$highData = $rantable->getCol(1);
	$lowData = $rantable->getCol(2);
	$openData = $rantable->getCol(3);
	$closeData = $rantable->getCol(4);
	$volData = $rantable->getCol(5);
	
	# Get the visible trading session data from the random database table
	$startArrayIndex = count($timeStamps) - $noOfSessions + $viewPortStartSession;
	$visibleLength = $viewPortEndSession - $viewPortStartSession + 1;

	# To compute moving averages starting from the first day, we need to get extra data
	# points before the first day	
	$extraDays = 30;
	
	$viewPortTimeStamps = array_slice($timeStamps, $startArrayIndex - $extraDays, $visibleLength + $extraDays);
	$viewPortHighData = array_slice($highData, $startArrayIndex - $extraDays, $visibleLength + $extraDays);
	$viewPortLowData = array_slice($lowData, $startArrayIndex - $extraDays, $visibleLength + $extraDays);
	$viewPortOpenData = array_slice($openData, $startArrayIndex - $extraDays, $visibleLength + $extraDays);
	$viewPortCloseData = array_slice($closeData, $startArrayIndex - $extraDays, $visibleLength + $extraDays);
	$viewPortVolData = array_slice($volData, $startArrayIndex - $extraDays, $visibleLength + $extraDays);
	
	# Create a FinanceChart object of width 640 pixels
	$c = new FinanceChart(800);
	
	# Add a title to the chart
	$c->addTitle("Finance Chart Demonstration");
	
	# Set the data into the finance chart object
	$c->setData($viewPortTimeStamps, $viewPortHighData, $viewPortLowData, 
	    $viewPortOpenData, $viewPortCloseData, $viewPortVolData, $extraDays);
	
	# Add the main chart with 240 pixels in height
	$mainChart = $c->addMainChart(240);
	
	# Add a 5 period simple moving average to the main chart, using brown color
	$c->addSimpleMovingAvg(5, 0x663300);
	
	# Add a 20 period simple moving average to the main chart, using purple color
	$c->addSimpleMovingAvg(20, 0x9900ff);
	
	# Add an HLOC symbols to the main chart, using green/red for up/down days
	$c->addHLOC(0x008000, 0xcc0000);
	
	# Add 20 days bollinger band to the main chart, using light blue (9999ff) as the
	# border and semi-transparent blue (c06666ff) as the fill color
	$c->addBollingerBand(20, 2, 0x9999ff, 0xc06666ff);
	
	# Add a 75 pixels volume bars sub-chart to the bottom of the main chart, using
	# green/red/grey for up/down/flat days
	$c->addVolBars(75, 0x99ff99, 0xff9999, 0x808080);
	
	# Append a 14-days RSI indicator chart (75 pixels high) after the main chart. The
	# main RSI line is purple (800080). Set threshold region to +/- 20 (that is, RSI = 50
	# +/- 25). The upper/lower threshold regions will be filled with red (ff0000)/blue
	# (0000ff).
	$c->addRSI(75, 14, 0x800080, 20, 0xff0000, 0x0000ff);
	
	# Append a 12-days momentum indicator chart (75 pixels high) using blue (0000ff)
	# color.
	$c->addMomentum(75, 12, 0x0000ff);
	
	# Create the image
	$chartQuery = $c->makeSession($viewer->getId());
	
	# Set the chart URL, image map, and chart metrics to the viewer
	$viewer->setImageUrl("getchart.php?".$chartQuery);
	$viewer->setChartMetrics($c->getChartMetrics());
}

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

if ($viewer->isPartialUpdateRequest()) {
    # Is a partial update request (AJAX chart update)
    processPartialUpdate($viewer);
    # Since it is a partial update, there is no need to output the entire web page. We stream the
    # chart and then terminate the script immediately.
    print($viewer->partialUpdateChart());
    exit();
} else {
    # Is a initial request
    createFirstChart($viewer);
}
?>
<html>
<head>
    <title>ChartDirector Zoom and Scroll Demonstration (2)</title>
    <script type="text/javascript" src="cdjcv.js"></script>
    <style type="text/css">
        div.chartPushButtonSelected { padding:5px; background:#ccffcc; cursor:hand; }
        div.chartPushButton { padding:5px; cursor:hand; }
        td.chartPushButton { font-family:Verdana; font-size:9pt; cursor:pointer; border-bottom:#000000 1px solid; }
    </style>
</head>
<body style="margin:0px" onload="initJsChartViewer()">
<script type="text/javascript">
// Initialize browser side Javascript controls
function initJsChartViewer()
{
    // Check if the Javascript ChartViewer library is loaded
    if (!window.JsChartViewer)
        return;

    // Get the Javascript ChartViewer object
    var viewer = JsChartViewer.get('<?php echo $viewer->getId()?>');

    // Connect the mouse usage buttons to the Javascript ChartViewer object
    connectViewerMouseUsage('ViewerMouseUsage1', viewer);

    // Connect the view port change event to trigger a partial update
    viewer.attachHandler("ViewPortChanged", viewer.partialUpdate);
}
</script>
<form method="post">
<table cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td align="right" colspan="2" style="background:#000088">
            <div style="padding-bottom:2px; padding-right:3px; font-weight:bold; font-size:10pt; font-style:italic; font-family:Arial;">
                <a style="color:#FFFF00; text-decoration:none" href="http://www.advsofteng.com/">Advanced Software Engineering</a>
            </div>
        </td>
    </tr>
    <tr valign="top">
        <td style="width:130px; background:#e0e0e0; border-left:black 1px solid; border-top:black 1px solid; border-bottom:black 1px solid;">
            <!-- The following table is to create 3 cells for 3 buttons. The buttons are used to control
                 the mouse usage mode of the Javascript ChartViewer. -->
            <table id="ViewerMouseUsage1" cellspacing="0" cellpadding="0" width="100%" border="0">
                <tr>
                    <td class="chartPushButton">
                        <div class="chartPushButton" id="ViewerMouseUsage1_Scroll" title="Pointer">
                            <img src="pointer.gif" style="vertical-align:middle" width="16" height="16" alt="Pointer" />&nbsp;&nbsp;Pointer
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="chartPushButton">
                        <div class="chartPushButton" id="ViewerMouseUsage1_ZoomIn" title="Zoom In">
                            <img src="zoomInIcon.gif" style="vertical-align:middle" width="16" height="16" alt="Zoom In" />&nbsp;&nbsp;Zoom In
                        </div>
                    </td>
                </tr>
                <tr>
                    <td class="chartPushButton">
                        <div class="chartPushButton" id="ViewerMouseUsage1_ZoomOut" title="Zoom Out">
                            <img src="zoomOutIcon.gif" style="vertical-align:middle" width="16" height="16" alt="Zoom Out" />&nbsp;&nbsp;Zoom Out
                        </div>
                    </td>
                </tr>
            </table>
            <script type="text/javascript">
            // Connect the mouse usage buttons to the Javascript ChartViewer
            function connectViewerMouseUsage(controlId, viewer)
            {
                // A cross browser utility to get the object by id.
                function getObj(id) { return document.getElementById ? document.getElementById(id) : document.all[id]; }

                // Set the button styles (colors) based on mouse usage mode
                function syncButtons()
                {
                    getObj(controlId + "_Scroll").className = (viewer.getMouseUsage() == JsChartViewer.Scroll) ?
                        "chartPushButtonSelected" : "chartPushButton";
                    getObj(controlId + "_ZoomIn").className = (viewer.getMouseUsage() == JsChartViewer.ZoomIn) ?
                        "chartPushButtonSelected" : "chartPushButton";
                    getObj(controlId + "_ZoomOut").className = (viewer.getMouseUsage() == JsChartViewer.ZoomOut) ?
                        "chartPushButtonSelected" : "chartPushButton";
                }
                syncButtons();

                // Run syncButtons whenever the Javascript ChartViewer is updated
                viewer.attachHandler("PostUpdate", syncButtons);

                // Set the Javascript ChartViewer mouse usage mode if the buttons are clicked.
                getObj(controlId + "_Scroll").onclick = function() { viewer.setMouseUsage(JsChartViewer.Scroll); syncButtons(); }
                getObj(controlId + "_ZoomIn").onclick = function() { viewer.setMouseUsage(JsChartViewer.ZoomIn); syncButtons(); }
                getObj(controlId + "_ZoomOut").onclick = function() { viewer.setMouseUsage(JsChartViewer.ZoomOut); syncButtons(); }
            }
            </script>
        </td>
        <td style="border: black 1px solid;">
            <div style="padding:5px">
                <!-- ****** Here is the chart image ****** -->
                <?php echo $viewer->renderHTML()?>
            </div>
        </td>
    </tr>
</table>
</form>
</body>
</html>