- Provide user interface support for drag to scroll, drag to select zoom in region, and click to zoom in/out.
- Allow external controls to scroll and zoom the chart and requesting chart updates.
- Provide AJAX support for chart updates.
- Provide support for delayed and compressed image map.
To use JsChartViewer in a web page, it is necessary to include the "cdjcv.js" Javascript library in the HTML code. Typically, this is achieved by inserting a script block in the <HEAD> section of the HTML code:
<SCRIPT SRC="/path/to/cdjcv.js">
Note: Please replace
"/path/to" above to the actual path you put the "cdjcv.js" to.The "cdjcv.js" requires the following files, which must be located in the same directory as "cdjcv.js".
| Filename | Description |
|---|---|
| cdjcv.js | The main Javascript library file. |
| zoomin.cur | Zoom in cursor. |
| zoomin.cur | Zoom out cursor. |
| nozoom.cur | No zoom cursor. |
| wait.gif | Rotating clock wait symbol. |
During operation, "cdjcv.js" will detect the absolute URL of itself, and use it to load other files in the above table. (It cannot use relative URL, because the URL will be relative to the containing HTML web page, which may or may not be in the same directory as "cdjcv.js".) However, in some cases, you may want to explicitly specify the path for "cdjcv.js" to use. This can be by defining a global Javascript variable "cdjcv_path" that contains the URL directory that contains the files.
To create a JsChartViewer object, one should use the JsChartViewer.get method instead of using the "new" statement. The JsChartViewer.get method creates a JsChartViewer object and binds it the an <IMG> tag for displaying the chart.
JsChartViewer stores its state in a hidden field created by WebChartViewer.renderHTML. This allows a JsChartViewer object to transfer information to WebChartViewer on the server side using standard FORM POST or GET. This is useful for browsers that do not support partial chart update request (AJAX request). to enable using FORM POST or GET, one should include a HTML FORM in the web page, and the FORM should include the <IMG> tag associated with the JsChartViewer object.
JsChartViewer is designed to work with IE 4.0 or above, or any W3C DOM compliant browsers. However, as there are thousands of browser/version combinations in the market, it is practically impossible to test all of them. The followings are the browsers that have been tested as of the date this paragraph is written:
- IE 4.0
- IE 5.0
- IE 5.5
- IE 6.0
- FireFox 1.0.3
- FireFox 1.5
- Opera 8.0
- Safari 1.2.3
- Safari 2.0.3
Properties
| Name | Description |
|---|---|
| updatingMsg | Gets or sets the HTML message displayed when partial chart update is in progress. |
| serverErrorMsg | Gets or sets the HTML template for displaying server error messages. |
| msgContainer | Gets or sets the default message container template. |
| okButton | Gets or sets the "OK" button for closing the chart message window. |
| xButton | Gets or sets the "X" button for closing the chart message window. |
Methods
| Name | Description |
|---|---|
| get | Gets a JsChartViewer object that binds to the given <IMG> tag for chart display. |
| getId | Gets the id of the JsChartViewer. |
| setViewPortLeft | Sets the position of the left side of the view port. |
| getViewPortLeft | Gets the position of the left side of the view port. |
| setViewPortTop | Sets the position of the top side of the view port. |
| getViewPortTop | Gets the position of the top side of the view port. |
| setViewPortWidth | Sets the width of the view port. |
| getViewPortWidth | Gets the width of the view port. |
| setViewPortHeight | Sets the height of the view port. |
| getViewPortHeight | Gets the height of the view port. |
| setMouseUsage | Sets the mouse usage mode of the control. |
| getMouseUsage | Gets the mouse usage mode of the control. |
| setZoomDirection | Sets the zoom direction for mouse zoom in/out actions. |
| getZoomDirection | Gets the zoom direction for mouse zoom in/out actions. |
| setScrollDirection | Sets the scroll direction for mouse scroll actions. |
| getScrollDirection | Gets the scroll direction for mouse scroll actions. |
| setZoomInRatio | Sets the magnification ratio for each zoom in click of the mouse. |
| getZoomInRatio | Gets the magnification ratio for each zoom in click of the mouse. |
| setZoomOutRatio | Sets the magnification ratio for each zoom out click of the mouse. |
| getZoomOutRatio | Gets the magnification ratio for each zoom out click of the mouse. |
| setZoomInWidthLimit | Sets the view port width at maximum zoom in. |
| getZoomInWidthLimit | Gets the view port width at maximum zoom in for mouse zoom in actions. |
| setZoomOutWidthLimit | Sets the view port width at maximum zoom out. |
| getZoomOutWidthLimit | Gets the view port width at maximum zoom out for mouse zoom out actions. |
| setZoomInHeightLimit | Sets the view port height at maximum zoom in. |
| getZoomInHeightLimit | Gets the view port height at maximum zoom in for mouse zoom in actions. |
| setZoomOutHeightLimit | Sets the view port height at maximum zoom out. |
| getZoomOutHeightLimit | Gets the view port height at maximum zoom out for mouse zoom out actions. |
| setMinimumDrag | Sets the minimum mouse drag distance before it is considered as an intentional drag. |
| getMinimumDrag | Gets the minimum mouse drag distance before it is considered as an intentional drag. |
| setSelectionBorderWidth | Sets the border width of the zoom selection box. |
| getSelectionBorderWidth | Gets the border width of the zoom selection box. |
| setSelectionBorderColor | Sets the border color of the zoom selection box as an HTML color. |
| getSelectionBorderColor | Gets the border color of the zoom selection box. |
| setZoomInCursor | Sets the mouse cursor to be used when the mouse is used for zoom in. |
| getZoomInCursor | Gets the mouse cursor to be used when the mouse is used for zoom in. |
| setZoomOutCursor | Sets the mouse cursor to be used when the mouse is used for zoom out. |
| getZoomOutCursor | Gets the mouse cursor to be used when the mouse is used for zoom out. |
| setNoZoomCursor | Sets the mouse cursor to be used when the mouse is used for zoom in/out, but the zoom in/out limits has been reached. |
| getNoZoomCursor | Gets the mouse cursor to be used when the mouse is used for zoom in/out, but the zoom in/out limits has been reached. |
| setScrollCursor | Sets the mouse cursor to be used when the mouse is used for scrolling. |
| getScrollCursor | Gets the mouse cursor to be used when the mouse is used for scrolling. |
| setCustomAttr | Sets a custom attribute. |
| getCustomAttr | Gets a custom attribute. |
| canSupportPartialUpdate | Checks if the browser is capable of supporting partial chart updates (AJAX requests). |
| partialUpdate | Sends a partial update request (AJAX request) to the server. |
| streamUpdate | Refreshes the <IMG> that the JsChartViewer is bound to. |
| attachHandler | Attaches a function to be used as the event handler for an event. |
| detachHandler | Detaches a function from being an event handler for an event. |
| applyHandlers | Calls the handlers for an event. |
Events
| Name | Description |
|---|---|
| ViewPortChanged | This event occurs when the view port is changed through mouse actions (see JsChartViewer.setMouseUsage). |
| PreUpdate | This event occurs immediately before a partial chart update request is sent to the server (see JsChartViewer.partialUpdate). |
| PostUpdate | This event occurs after a partial update response is received from the server and is processed successfully. |
| UpdateError | This event occurs if an error occurs in during a partial update. |