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

Message ListMessage List     Post MessagePost Message

  Unable to coexists 2 RealTime Chart in 1 page.
Posted by karen1603 on Jan-14-2011 16:24
| Reply | Monitor
Hi,

I have created 2 realtime charts to coexists in a single page. However, I realise the 2nd chart does not work well, whereby it refreshes the charts after the allocated time and replace the 2nd chart with the 1st chart image, which means it become 2 identical charts). The following is my code.

Kindly advise where could have gone wrong?

Thanks.

Sub Page_load(ByVal sender As Object, ByVal e As EventArgs)
Call GetData()
            If WebChartViewer.IsStreamRequest(Page) Then
                RT_MWChart1.StreamChart()
                RT_MWChart2.StreamChart()
            End If
End Sub

Sub GetData()
      //Data to populate the 1st chart
        RT_MWChart1.Image = c.makeWebImage(Chart.PNG)
        RT_MWChart1.ImageMap = c.getHTMLImageMap("", "", "alt='{dataSetName} = {value}'")
    //Data to populate the 2nd chart
      RT_MWChart2.Image = d.makeWebImage(Chart.PNG)
      RT_MWChart2.ImageMap = d.getHTMLImageMap("", "", "alt='{dataSetName} = {value}'")

End Sub

<html>
<head>
<title></title>
</head>
<script type="text/javascript" src="Scripts/cdjcv.js"></script>
<body>
   <form id="Form1_WPQ_" name="Form1_WPQ_" method="post" runat="server">
  <rt:mwData id="mwData1" runat="server" />
        <table align="center" cellpadding="0" cellspacing="0" border="0">
     <tr>
         <td>
            <div id="divChart_WPQ_">
                    <input id="UpdatePeriod" value="10" style="display:none;" type="text" />
                        <Chart:WebChartViewer id="RT_MWChart1" runat="server" />
           <Chart:WebChartViewer id="RT_MWChart2" runat="server" />
       </div>
                 </td>
</tr>
      </table>
        <script type="text/javascript">
            // The followings is executed once every second
            function updateDisplay() {
                // Utility to get an object by id that works with most browsers
                var getObj = function (id) { return document.getElementById ? document.getElementById(id) : document.all[id]; }

                // Get the configured update period
                var updatePeriodObj = getObj("UpdatePeriod");
                var updatePeriod = parseInt(updatePeriodObj.value);

                // Subtract 1 second for the remaining time - reload the counter if remaining time is 0
                if (!updatePeriodObj.timeLeft || (updatePeriodObj.timeLeft <= 0))
                    updatePeriodObj.timeLeft = updatePeriod - 1;
                else
                    updatePeriodObj.timeLeft = Math.min(updatePeriod, updatePeriodObj.timeLeft) - 1;

                // Update the chart if configured time has elasped
                if ((updatePeriodObj.timeLeft <= 0) && window.JsChartViewer)
                    JsChartViewer.get('<%=RT_MWChart1.ClientID%>').streamUpdate();
                    JsChartViewer.get('<%=RT_MWChart2.ClientID%>').streamUpdate();
                // Update the display to show remaining time
                //getObj("TimeRemaining").innerHTML = updatePeriodObj.timeLeft + ((updatePeriodObj.timeLeft > 1) ? " seconds" : " second");
            }
            window.setInterval("updateDisplay()", 1000);

</script>
</form>
</body>
</html>

  Re: Unable to coexists 2 RealTime Chart in 1 page.
Posted by Peter Kwan on Jan-15-2011 02:21
| Reply | Monitor
Hi karen1603,

In your current code, there are two charts, and they are each updated in realtime. On the server side, your code will try to stream both charts to the browser, irrespective of which chart is being updated. Also, as according to the HTML/HTTP standard, it is illegal to update two images in a single HTTP request. So for your code, in any case, only the first chart image can be sent out. This is why both WebChartViewer objects show the same chart image.

To solve the problem, please stream only one chart image at a time. The chart image to send should be based on the which chart is being updated.

If RT_MWChart1.IsStreamRequest(Page) Then
   If WebChartViewer.GetSenderClientId(Page) = RT_MWChart1.ClientId Then
           'draw the first chart
           GetData1()
           'stream the first chart to the browser
           RT_MWChart1.StreamChart()
    Else
           'If the request is not from the first chart viewer, it must be from the second chart viewer
           'Draw the second chart
           GetData2()
           'stream the second chart to the browser
           MWChart2.StreamChart()
    End If
Else
    'Non-streaming request - draw both charts
    GetData1()
    GetData2()
End If

Also, note that the above only updates the chart image. It will not update the image map. To update the image map, you would need to use the partialUpdate approach. There is some short Java/Javascript example below. The ASP.NET code should be very similar.

http://www.chartdir.com/forum/download_thread.php?bn=chartdir_support&thread=1251798926#N1252311620

Hope this can help.

Regards
Peter Kwan

  Re: Unable to coexists 2 RealTime Chart in 1 page.
Posted by karen1603 on Jan-19-2011 11:37
| Reply | Monitor
Hi Peter,

Thanks for your response, I am now able to stream 2 charts based on your suggestions. However I hit error while using the partialUpdate() to update the image map it mention that property/object does not exists. Am I missing anything?

Sub Page_Load()
     Call GetData()
            If WebChartViewer.IsStreamRequest(Page) Then
                If WebChartViewer.GetSenderClientId(Page) = RT_MWChart1.ClientID Then
                    RT_MWChart1.StreamChart()
                End If
            End If

End Sub


Sub GetData()

   //Codes to populate the chart

   RT_MWChart1.Image = d.makeWebImage(Chart.PNG)
        RT_MWChart1.ImageMap = d.getHTMLImageMap("", "", "alt='{dataSetName} = {value}'")

End Sub

  function updateDisplay() {

      var myViewer = JsChartViewer.get('<%=RT_MWChart1.ClientID%>').streamUpdate();
       myViewer.partialUpdate();

            }
            window.setInterval("updateDisplay()", '<%=sRefresh %>');

Thanks.

  Re: Unable to coexists 2 RealTime Chart in 1 page.
Posted by Peter Kwan on Jan-19-2011 18:50
| Reply | Monitor
Hi karen1603,

The code:

var myViewer = JsChartViewer.get('<%=RT_MWChart1.ClientID%>').streamUpdate();

should be:

var myViewer = JsChartViewer.get('<%=RT_MWChart1.ClientID%>');

Also, if you use partialUpdate on the client side, you would need to modify the server side to use partialUpdate as well. (Currently your server side code is using StreamChart, not PartialUpdateChart.

You may refer to the link in my last message for a reference. It contains the correct Javascript and server side code (although the server side code is in Java/JSP, the methods it called are the correct methods).

http://www.chartdir.com/forum/download_thread.php?bn=chartdir_support&thread=1251798926#N1252311620

The server side Java/JSP code, when translate to VB.NET, should be like (note: I have not tested the VB.NET code. You would need to test and debug it.)

If WebChartViewer.IsPartialUpdateRequest(Page) Then
    If WebChartViewer.GetSenderClientId(Page) = RT_MWChart1.ClientID Then
        MWChart1.PartialUpdateChart()
    End If
End If

Hope this can help.

Regards
Peter Kwan

  Re: Unable to coexists 2 RealTime Chart in 1 page.
Posted by karen1603 on Jan-20-2011 09:33
| Reply | Monitor
Thanks Peter, it is working!

  Re: Unable to coexists 2 RealTime Chart in 1 page.
Posted by karen1603 on Jan-20-2011 14:18
| Reply | Monitor
Attachments:
Hi Peter,

I realise for the coexist of RealTime Chart an error image is displayed upon refresh. Please refer to the image attached. Not sure why is this the case, as for 1 real time chart this does not happen.


Sub Page_load(sender as Object, e as EventArgs)

   If RT_GAS_Frame1.IsPartialUpdateRequest(Page) Then
            If WebChartViewer.GetSenderClientId(Page) = RT_GAS_Frame1.ClientID Then
                GetData()
                GetData2()
                RT_GAS_Frame1.PartialUpdateChart()
            ElseIf WebChartViewer.GetSenderClientId(Page) = RT_GAS_Frame2.ClientID Then
                GetData()
                GetData2()
                RT_GAS_Frame2.PartialUpdateChart()
            End If

        Else
             GetData()
            GetData2()
        End If
End Sub


  <script type="text/javascript">
          function updateDisplay() {

              var myViewer = JsChartViewer.get('<%=RT_GAS_Frame1.ClientID%>');
              var myViewer2 = JsChartViewer.get('<%=RT_GAS_Frame2.ClientID%>');
              myViewer.partialUpdate();
              myViewer2.partialUpdate();

          }
          window.setInterval("updateDisplay()", '<%=sRefresh %>');

</script>
chartdirector.png

  Re: Unable to coexists 2 RealTime Chart in 1 page.
Posted by Peter Kwan on Jan-21-2011 02:11
| Reply | Monitor
Hi karen1603,

I assume you mean the charts are updating normally, but you just get a broken image symbol in the "Updating" box.

For charts that use partial update with the "updating" box, you need copy the file "wait.gif" (in the ChartDirector sample code directory) to the directory of your ASPX file. (The broken image symbol is the icon "wait.gif". The broken image symbol appears because the server cannot find the file "wait.gif".)

If you do not want the updating pop up box to appear at all, you may use "JsChartViewer.updatingMsg = null;".

Hope this can help.

Regards
Peter Kwan