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

Message ListMessage List     Post MessagePost Message

  event handler
Posted by em on Nov-08-2012 16:01
| Reply | Monitor
My client side code sent multiple requests quickly to update the chart, and it looks like the some updates are always dropped.

Our program uses checkbox to decide if a line is going to be displayed and when I check off several checkboxes quickly, it won't update the chart and display the lines according to the checkbox.

Here's the code.Could you let me know how to fix this?

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()?>');

    viewer.attachHandler("ViewPortChanged", viewer.partialUpdate);

    // The Update Chart can also trigger a view port changed event to update the chart.
    <?php /*?><?php
        for($i =0; $i < $num_line; $i++){ ?>
            document.getElementById("data<?php echo $i ?>CheckBox").onchange = function() { viewer.raiseViewPortChangedEvent(); $("#data<?php echo $i ?>Title").show(); return false; };
        <?php }
    ?><?php */?>
    document.getElementById("data0CheckBox").onchange = function() { viewer.raiseViewPortChangedEvent(); $("#data0Title").show(); return false; };
    document.getElementById("data1CheckBox").onchange = function() { viewer.raiseViewPortChangedEvent(); $("#data1Title").show(); return false; };
    document.getElementById("data2CheckBox").onchange = function() { viewer.raiseViewPortChangedEvent(); $("#data2Title").show(); return false; };
    document.getElementById("data3CheckBox").onchange = function() { viewer.raiseViewPortChangedEvent(); $("#data3Title").show(); return false; };
    document.getElementById("data4CheckBox").onchange = function() { viewer.raiseViewPortChangedEvent(); $("#data4Title").show(); return false; };
    document.getElementById("data5CheckBox").onchange = function() { viewer.raiseViewPortChangedEvent(); $("#data5Title").show(); return false; };
    document.getElementById("data6CheckBox").onchange = function() { viewer.raiseViewPortChangedEvent(); $("#data6Title").show(); return false; };


    // Before sending the update request to the server, we include the state of the check boxes as custom
    // attributes. The server side charting code will use these attributes to decide the data sets to draw.
    viewer.attachHandler("PreUpdate", function() {

        //var checkBoxes = ["data0CheckBox", "data1CheckBox", "data2CheckBox", "data3CheckBox", "data4CheckBox", "data5CheckBox", "data6CheckBox"];
        var checkBoxes = [
        <?php
            for($i =0; $i < $num_line; $i++){
                echo '"data'.$i.'CheckBox"';
                if($i < $num_line - 1) echo ',';
            }
        ?>
        ];
//alert('ssss'+checkBoxes.length);
        //for (var i = 0; i < checkBoxes.length; ++i)
for (var i = 0; i < 7; ++i)
            viewer.setCustomAttr(checkBoxes[i], document.getElementById(checkBoxes[i]).checked ? "T" : "F");
    });


    // Draw track cursor when mouse is moving over plotarea
    viewer.attachHandler("MouseMovePlotArea", function(e) {
        trackLineLegend(viewer, viewer.getPlotAreaMouseX());
    });

    trackLineLegend(viewer, viewer.getChart().getPlotArea().getRightX());


    // Connect the mouse usage buttons to the Javascript ChartViewer object
    connectViewerMouseUsage('ViewerMouseUsage1', viewer);
    // Connect the xy zoom mode buttons to the Javascript ChartViewer object
    connectViewerZoomControl('ViewerZoomControl1', viewer);

    // Detect if browser is capable of support partial update (AJAX chart update)
    if (JsChartViewer.canSupportPartialUpdate())
    {
        // Browser can support partial update, so connect the view port change event and
        // the submit button to trigger a partial update

        viewer.attachHandler("ViewPortChanged", viewer.partialUpdate);
        document.getElementById('SubmitButton').onclick = function() {viewer.partialUpdate(); return false; };

        // For partial updates, we need to pass the start date / end date select boxes values to/from
        // the server via Javascript ChartViewer custom attributes
        var controlsToSync = ['StartYear', 'StartMonth', 'StartDay', 'EndYear', 'EndMonth', 'EndDay'];
        viewer.attachHandler("PreUpdate", function() { copyToViewer(viewer, controlsToSync); });
        viewer.attachHandler("PostUpdate", function() { copyFromViewer(viewer, controlsToSync); });
    }
    else
        // Browser cannot support partial update - so use full page update
        viewer.attachHandler("ViewPortChanged", function() { document.forms[0].submit(); });
}

  Re: event handler
Posted by Peter Kwan on Nov-08-2012 23:27
| Reply | Monitor
Hi em,

In your code, the checkboxes directly call raiseViewPortChangedEvent. This triggers the ViewPortChanged event. The ViewPortChanged event handler then called viewer.partialUpdate to send an AJAX request to update the chart.

The raiseViewPortChangedEvent will always raise the ViewPortChanged event. No events should be dropped. However, viewer.partialUpdate may not send out another AJAX request if there is already an outstanding AJAX request (that is, the browser has already requested the server to update the chart, and the server has not yet responded). Otherwise, it is easy for the browser to send a huge number of requests to the server, overloading the server.

For your case, in fact, the browser can send a large number of requests to the server if the user keeps on checking and unchecking the checkboxes. Only the final request is really needed. So I suggest you use the following method:


(a) When the checkbox is clicked, set a updateFlag to 1.

(b) Create a timer that checks the updateFlag once per second (or once per 100ms or any suitable time). If the updateFlag is 1, call raiseViewPortChangedEvent.

(c) In the "PreUpdate" handler, reset the updateFlag to 0.


In the above code, the checkboxes request the update by setting the updateFlag to 1. The timer will call raiseViewPortChangedEvent periodically as long as there is an outstanding update request. When the update request is really serviced, the PreUpdate handler clears the updateFlag.

Hope this can help.

Regards
Peter Kwan