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

Message ListMessage List     Post MessagePost Message

  ChartDirector zooming not working
Posted by Dilip Agarwal on Jul-30-2013 19:42
| Reply | Monitor
Hi I am using chartdirector asp library for drawing charts, I am using different asp files for
drawing chart and creating chart as below

<b>simplezoomscroll.asp for client side</b>

<%@ Language=VBScript %>


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
    <title>Simple Zooming and Scrolling</title>
    <script type="text/JavaScript" src="res/include/jquery.min.js"></script>
    <script type="text/javascript" src="asptestsamples/cdjcv.js"></script>

    <script type="text/javascript">

//
// Execute the following initialization code after the web page is loaded
    //

    var viewer;
    var viewerId;
    function loadDoc(){
        $.ajax({
            type: "POST",
            url: "getchart_simplezoom.asp",
            data: {
                container: "chartImg",

            }, success: function (result)
            {
                alert(result);
                var imgurl = result.split("::")[1];
                viewerId = result.split("::")[0].split("=")[1];
                alert(imgurl);
                $("#chartImg").attr("src", imgurl);

            },
            async: false

        });
        return true;
    }

    JsChartViewer.addEventListener(window, 'load', function ()
    {
        alert("injschartViewer");
        // Update the chart when the view port has changed (eg. when the user zooms in
using the mouse)
        viewer = JsChartViewer.get('chartImg');
        viewer.attachHandler("ViewPortChanged", viewer.partialUpdate);
        viewer.setZoomDirection(JsChartViewer.HorizontalVertical);
        viewer.setMouseUsage(JsChartViewer.ZoomIn);

        // Set the initial mouse usage to "scroll"
        //  viewer.setMouseUsage(JsChartViewer.Scroll);
        // document.getElementById("scrollChart").checked = true;
    });

function resetZoom()
{
    viewer = JsChartViewer.get('chart1');
    viewer.setViewPortLeft(0);
    viewer.setViewPortWidth(1);
    viewer.setViewPortTop(0);
    viewer.setViewPortHeight(1);
    viewer.partialUpdate();
    document.getElementById('zoomOutChart').disabled = true;
}

</script>

</head>
<body style="margin:0px;" onLoad="return loadDoc();">

<form method="post">
<table cellspacing="0" cellpadding="0" border="0">
    <tr>
        <td align="right" colspan="2" style="background:#000088">
            <div style="padding:0px 3px 2px 0px; font:italic bold 10pt 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:127px; background:#c0c0ff; border-right:black 1px solid;
border-bottom:black 1px solid;">
        <div style="font:9pt Verdana; padding:10px 0px 0px 3px; line-height:1.5;
width:127px">
            <input name="mouseUsage" value="Reset" id="zoomOutChart" type="button"
                onclick="resetZoom();" />
            <br />
        </div>
        </td>
        <td>
            <div style="font-weight:bold; font-size:20pt; margin:5px 0px 0px 5px; font-
family:Arial">
                Simple Zooming and Scrolling
            </div>
            <hr style="border:solid 1px #000080" />
            <img id="chartImg"/>
            <div style="padding:0px 5px 5px 10px">
                <!-- ****** Here is the chart image ****** -->

            </div>
        </td>
    </tr>
</table>
</form>
</body>
</html>


getchart_simplezoom.asp for creating chart

<%@ Language=VBScript %>
<%
'
set cd = CreateObject("ChartDirector.API")

Set viewer = cd.WebChartViewer(Request, "chartImg")

Sub initViewer(viewer)
    startDate = DateSerial(2007, 1, 1)
    endDate = DateSerial(2012, 1, 1)
    Call viewer.setFullRange("x", startDate, endDate)

   ' viewer.ViewPortWidth = 366.0 / 1826
    'viewer.ViewPortLeft = 1 - viewer.ViewPortWidth

    'viewer.ZoomInWidthLimit = 1.0 / 1826
End Sub

Sub drawChart(viewer)
    viewPortStartDate = cd.NTime(viewer.getValueAtViewPort("x", viewer.ViewPortLeft))
    viewPortEndDate = cd.NTime(viewer.getValueAtViewPort("x", viewer.ViewPortLeft + _
        viewer.ViewPortWidth))

    Set r = cd.RanTable(127, 4, 1828)
    Call r.setDateCol(0, DateSerial(2007, 1, 1), 86400)
    Call r.setCol(1, 150, -10, 10)
    Call r.setCol(2, 200, -10, 10)
    Call r.setCol(3, 250, -8, 8)

    Call r.selectDate(0, DateAdd("d", -1, viewPortStartDate), DateAdd("d", 1,
viewPortEndDate))

    timeStamps = r.getCol(0)
    dataSeriesA = r.getCol(1)
    dataSeriesB = r.getCol(2)
    dataSeriesC = r.getCol(3)

    Set c = cd.XYChart(600, 300, &Hf0f0ff, &H000000)
    Call c.setRoundedFrame()

    Call c.setPlotArea(55, 60, 520, 205, &Hffffff, -1, -1, &Hcccccc, &Hcccccc)

    Call c.setClipping()

    Call c.addTitle("Product Line International Market Price", "timesbi.ttf",
15).setBackground( _
        &Hccccff, &H000000, cd.glassEffect())
    Call c.addLegend(50, 33, False, "arialbd.ttf", 9).setBackground(cd.Transparent,
cd.Transparent)

    Call c.xAxis().setWidth(2)
    Call c.yAxis().setWidth(2)

    Call c.yAxis().setTitle("Price (USD)", "arialbd.ttf", 10)

    Set layer = c.addLineLayer2()
    Call layer.setLineWidth(2)

    Call layer.setFastLineMode()

    Call layer.setXData(timeStamps)
    Call layer.addDataSet(dataSeriesA, &Hff0000, "Product Alpha")
    Call layer.addDataSet(dataSeriesB, &H00cc00, "Product Beta")
    Call layer.addDataSet(dataSeriesC, &H0000ff, "Product Gamma")

    Call viewer.syncDateAxisWithViewPort("x", c.xAxis())

    Call c.xAxis().setTickDensity(75)
    Call viewer.syncLinearAxisWithViewPort("x", c.xAxis())
    Call viewer.syncLinearAxisWithViewPort("y", c.yAxis())
    chartQuery = c.makeSession(Session, viewer.Id)

    imageMap = c.getHTMLImageMap("", "", "title='[{dataSetName}] {x|mmm dd, yyyy}:
USD {value|2}'")

    viewer.ImageUrl = "aspdemo/getchart.asp?" & chartQuery
    viewer.ImageMap = imageMap
    viewer.ChartMetrics = c.getChartMetrics()
    Response.Write "viewerId="&viewer.Id&"::"&"getchart.asp?" & chartQuery
End Sub

If viewer.IsPartialUpdateRequest Then
    ' Is a partial update request. Draw the chart and perform a partial response.
    Call drawChart(viewer)
    Response.Write viewer.partialUpdateChart()
    Response.End
End If


initViewer viewer
drawChart viewer


%>

But it does not provide facility for zoom, please tell me where i am doing wrong