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

  Re: ChartDirector zooming not working
Posted by Peter Kwan on Jul-31-2013 01:50
| Reply | Monitor
Hi Dilip,

Your code have not displayed the chart image using ChartDirector. There is no "<%=viewer.renderHTML()%>" line.

Instead, it seems your code attempts to create the chart using ChartDirector, but displays the chart using JQuery. JQuery does not support zooming and scrolling for ChartDirector charts. To solve the problem, please use ChartDirector to display the charts created by ChartDirector.

Hope this can help.

Regards
Peter Kwan

  Re: ChartDirector zooming not working
Posted by Dilip Agarwal on Jul-31-2013 17:03
| Reply | Monitor
Thanks For reply, actually in my case data comes from another page. This page is called with parameters , which are decided at runtime at the basis of some fields value.

So Is this possible for ChartDirector to plot on a IMG tag by giving the ID of that IMG container

  Re: ChartDirector zooming not working
Posted by Peter Kwan on Jul-31-2013 23:40
| Reply | Monitor
Hi Dilip,

Actually, I am not too sure how is your system structured. Where and how the data comes from should not be important (the data can come from a database, another page, XML, text file, and can be based on some runtime parameters, etc).

In your system, there must be a web page you want the chart to appear. I suggest you to put both the chart generation and display code on that page.

In the "Zooming and Scrolling with Track Line (Web)" sample code, you can see that the chart depends on some runtime parameters (notice the check boxes on the left and several buttons allowing the user to choose the time range). The data depends on these user selections. The charting code (both generation and display) is on the same page.

If you want the checkboxes or other user interface elements to be in a separate page, and when the update button is pressed, it goes to second page that shows the chart, then the code can be structure like the followings:

(a) When the update button in the first page is pressed, the parameters are posted to the second page.

(b) The second page can be structured almost exactly the same as the "Zooming and Scrolling with Track Line (Web)" sample code, except the checkbox can be replaced with hidden fields, with the hidden values initialized to reflect the checkbox parameters posted from the first page.

Hope this can help.

Regards
Peter Kwan

  Re: ChartDirector zooming not working
Posted by Dilip Agarwal on Aug-01-2013 18:55
| Reply | Monitor
Thanks Peter, Now I am doing this with iFrame. Below is my code for the page used in
iFrame and I am unable to set date for x-axis in this and also zooming. Could you please
guide me that how can I set x-axis dates, and also zooming

<%@ Language=VBScript %>

<%

Set cd = CreateObject("ChartDirector.API")

Set viewer = cd.WebChartViewer(Request, "chartImg")
If viewer.IsPartialUpdateRequest Then
        ' Is a partial update request. Draw the chart and perform a partial response.
        Call generateChart(viewer)
        Response.Write viewer.partialUpdateChart()
        Response.End
else
    Dim baseData
    Dim graphTitle
    Dim graphStyle
    Dim chartType
    Dim baseDataArray
    Dim startTime
    Dim timeArray()
    Dim legendArray()
    Dim baseColorArray
    Dim container
    Dim URL
'   Dim viewer
    Dim Http

end if
'Dim cd


HouseKeepingChart

Private Sub HouseKeepingChart
    InitializeVariablesChart
    AnalyzeRequestChart
End Sub

Private Sub InitializeVariablesChart
    graphStyle = 1

    baseColorArray = Array(&H32cd32,&H57a9c4,&Ha020f0,&H808000,&H00ffff,
&Hffa500,&Hff69b4,&Hffff00,&H000080,   &Hf5deb3,_
                    &Ha8a8a8,
&H8a8a2a,&H804040,&H09860d,&Hff8080,&H8c8c8c,&Hc0b180,&H008080, &H0000ff,
&Hc048c0,_

&H8080ff,&H28c0c0,&Hd65aef,&H095aef,&Hf9860e,&He0518d,&H094b83,&Ha9f097,&Hcccc
cc,&Hfed6c5,_
                    &Hb5fbf5,&H75e2aa,&H0064c8, &Hafaf64,&He64b4b,&H00af09,
&Hc6da41,&Hd0e6d1,&Hdacee8,&Hfd4d33,_
                    &H4f278c,&Hb0998c,&H63ee4f,&H3ef0ff,&H000063,
&Hfa1212,&Hbf49c2,&Hf9ef31,&Hb5ff2b,&H0f684e,_
                    &Hd37332,&Ha6f07d)

End Sub

Private Sub AnalyzeRequestChart
    if (Request.ServerVariables("REQUEST_METHOD") = "POST") then
       ' ReadFormDataChart
         baseData="1,8,0,28380,28620,28680,34380,34440,41280,41340,'Total Processor
Time',null,7.32,7.76,null,9.66,null,8.56,null"
    graphTitle="CPU Utilization"
    graphStyle = 1
    chartType = 1
        populateDataIntoArrays
        generateChart(viewer)
        'chartType 1 -> Stacked Area Graph with Time
        'chartType 2 -> Stacked Bar Graph with Time
        'chartType 3 -> Pie Graph
        'chartType 4 ->Line Graph with Time
        'Create Arrays for the given data
    end if
End Sub

private sub generateChart(viewer)

'Set c = cd.XYChart(300, 210, &Hffffc0, &H000000)
'Call c.setPlotArea(50, 30, 240, 140).setBackground(&Hffffff)
'Call c.addLegend(50, 185, False, "", 8).setBackground(cd.Transparent)

Set c = cd.XYChart(1060, 370, &Hffffc0, &H000000)
Call c.setPlotArea(50, 30, 900, 280).setBackground(&Hffffff)

    Call c.addLegend(50, 330, False, "", 8).setBackground(cd.Transparent)
    Call c.addTitle(graphTitle, "arialbd.ttf", 8).setBackground(&Hffff40, 0)
    Call c.yAxis().setLabelFormat("{value}")
    'Call c.xAxis().setLabels(timeArray)


    Set layer = c.addAreaLayer2(cd.Stack)

    layer.setXData(timeArray)
        Call c.xAxis().setMultiFormat(cd.StartOfDayFilter(), _
    "<*font=arialbd.ttf*>{value|mmm dd}", cd.AllPassFilter(), "{value|hh:nn}")

    Dim i
    for i=0 to UBound(legendArray)
        Call layer.addDataSet(baseDataArray(i), baseColorArray(i), legendArray(i))
    next
   ' Call c.xAxis().setTickDensity(UBound(timeArray) mod 10)

'chartQuery = c.makeSession(Session, container)


' Set the x-axis as a date/time axis with the scale according to the view port x range.
    Call viewer.syncDateAxisWithViewPort("x", c.xAxis())

    chartQuery = c.makeSession(Session, viewer.Id)
     imageMap = c.getHTMLImageMap("", "", "")

    ' Set the chart URL, image map and chart metrics to the viewer
    viewer.ImageUrl = "getchart.asp?" & chartQuery
    viewer.ImageMap = imageMap
    viewer.ChartMetrics = c.getChartMetrics()



end sub

private sub populateDataIntoArrays

    if chartType = 1 then
        populateArrayForStackedArea
    end if

end sub

private sub populateArrayForStackedArea
    Dim dataArray,LineCount,PointCount
    Dim nameArray
    Dim i,j,counter
    Dim dateStart
    counter = 0
    dataArray = split(baseData,",")
    LineCount = dataArray(counter)
    counter=counter +1
    PointCount = dataArray(counter)
    counter = counter +1
    Redim timeArray(PointCount)
    Redim legendArray(LineCount)
    Redim baseDataArray(LineCount)
    dateStart = CDate(startTime)
    for i=0 to PointCount-1
        timeArray(i) = cd.CTime(DateAdd("s",dataArray(counter),dateStart))
        counter = counter +1
    next

    for i = 0 to LineCount-1
        Dim d1
        redim d1(PointCount)
        legendArray(i)= dataArray(counter)
        counter = counter +1

        for j = 0 to PointCount-1
            if IsNumeric(dataArray(counter)) then
                d1(j) = CDbl(dataArray(counter))
            else
                d1(j) = null
            End if
            counter = counter +1
        next
        baseDataArray(i) = d1
    next

end sub



Private Sub ReadFormDataChart
    Dim startTimeArr

baseData = Request.Form("baseData")
overlayData = Request.Form("overlayData")
graphTitle = Request.Form("graphTitle")
    graphStyle = Request.Form("graphStyle")
    chartType = Request.Form("chartType")
    startTime =Request.Form("startTime")
    container = Request.Form("container")
    URL = Request.Form("URL")
    startTimeArr= Split(startTime,":")
    startTime = startTimeArr(1)&"/"&startTimeArr(2)&"/"&startTimeArr(3)

End Sub

%>

<html>
<head>
    <title>Simple Zooming and Scrolling</title>
    <script type="text/javascript" src="cdjcv.js"></script>
</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.Id%>');
        viewer.attachHandler("ViewPortChanged", viewer.partialUpdate);

        // Set the initial mouse usage to "scroll"
        viewer.setZoomDirection(JsChartViewer.HorizontalVertical);
        viewer.setMouseUsage(JsChartViewer.ZoomIn);

    });

</script>
            <div style="padding:0px 5px 5px 10px">
                <!-- ****** Here is the chart image ****** -->
                <%=viewer.renderHTML()%>
            </div>

</body>
</html>

  Re: ChartDirector zooming not working
Posted by Peter Kwan on Aug-02-2013 06:08
| Reply | Monitor
Hi Dilip,

There are a number of bugs in the code. If you display the contents of your data arrays (eg. the timeArray), then you can see they are not set up correctly.

For example, you use the line "ReDim timeArray(PointCount)", but then you use "for i=0 to PointCount-1", which is inconsistent. It should be "ReDim timeArray(PointCount - 1)" instead.

There are also other bugs. When you run the code, you may receive some error messages. This can help you to identify the issues.

For the session data stoarge, when your pass data to ChatDirector, ChartDirector will not store the data permanently. If you need to store the data (eg. in session variables), you may write code to put the data in session variables. Then in partial update request, your code can read the data back from the session variables and then provide the data to ChartDirector.

Hope this can help.

Regards
Peter Kwan

  Re: ChartDirector zooming not working
Posted by Dilip Agarwal on Aug-02-2013 13:33
| Reply | Monitor
Thanks Peter, Now zooming works but it takes a lot of time. When I go to debug then find
that below line takes very much time.
chartQuery = c.makeSession(Session, viewer.Id)

When I zoom second time then it takes much more then first third almost hang off. Can you
please tell me why this happen. Currently I am ploting data for almost 6 series with 1000
points. And our requirement may goes to 100 series with 1000 points and may be more.

So for these type of situation will ChartDirector work efficiently with zooming.

  Re: ChartDirector zooming not working
Posted by Dilip Agarwal on Aug-02-2013 18:11
| Reply | Monitor
Hi Peter, I found that this issue is due to time formating in timeArray. Below was the code
which when I use chart creation at line makeSession become slow.


dateStart = CDate(startTime)
for i=0 to PointCount-1

        timeArray(i) = CLng(DateDiff("s", "01/01/1970 00:00:00",
DateAdd("s",dataArray(counter),dateStart)))  '
cd.CTime(DateAdd("s",dataArray(counter),dateStart))
        counter = counter +1
    next



But Now when I use below code then chart created fast

dateStart = CDate(startTime)
    for i=0 to PointCount-1

        timeArray(i) = dataArray(counter)
        counter = counter +1
    next


but by this date was set from jan. So could you please tell me how should I set the date in
timeArray.

  Re: ChartDirector zooming not working
Posted by Dilip Agarwal on Aug-02-2013 21:32
| Reply | Monitor
Attachments:
Hi Peter, Thanks for your help. Now I am able to zoom the graph and also it does it
quickly.But the issue is that when I zoom then chart goes beyond the plotArea. I have
attach i pic for that. Could you please tell me how can I extract the data for the range
selected on the viewport.

As this is given in simplezoomscroll example by fetching viewportstartdate and
viewportenddate, but in that example data was threw randomtable. Now How can I fetch
that from My code. Code Is approx same as given before .
chartdirectorInvalidZoom.PNG

  Re: ChartDirector zooming not working
Posted by Dilip Agarwal on Aug-01-2013 21:43
| Reply | Monitor
Hi Peterr, could you please also tell me that is this mandatory to provide the data also in
partial update request or chart director can take that from viewer from session.

  Re: ChartDirector zooming not working
Posted by Peter Kwan on Aug-03-2013 01:26
| Reply | Monitor
Hi Dilip,

For plotting outside the plot area, you may use XYChart.setClipping to clip the content to the plot area. All our Zooming and Scrolling sample code use XYChart.setClipping.

Call c.setClipping()

ChartDirector cannot take data from anywhere, and so it cannot take data from session. Your code needs to pass data to ChartDirector. Also, ChartDirector will not store your data in a persistent storage (such as session variables, database, etc).

If you would like to store the data in session variables (so that you do not need to query the database for data in partial update), you may store the data in session variables with your own code. Then in partial update, pleaes read the data from the session variables with your own code, then pass the data to ChartDirector.

Hope this can help.

Regards
Peter Kwan

  Re: ChartDirector zooming not working
Posted by Dilip Agarwal on Aug-03-2013 11:44
| Reply | Monitor
Thanks a lot peter. It works.