The JsChartViewer control is a browser side Javascript control to support other advanced chart user interactions, including:
The JsChartViewer control includes special methods and events for supporting programmable track cursors. It includes methods for drawing track cursors and other dynamic contents on the browser side.
The JsChartViewer control includes special methods and events for supporting using mouse clicks and drags to control the "view port". There are also methods to facilitate using custom user interface to control the view port.
The JsChartViewer allows the chart, including the associated image map and data for programmable track cursor, to be updated without refreshing the web page. Custom parameters can also be passed during the AJAX chart update between the browser and the server.
In many applications, JsChartViewer needs to be used with WebChartViewer on the server side. For example, when JsChartViewer sends an AJAX chart update requests to the server, the server needs to use WebChartViewer to interpret the request and to send back the result.
To use JsChartViewer in a web page, it is necessary to include the ChartDirector Javascript Library "cdjcv.js" and other supporting files in the web page. Please refer to ChartDirector Javascript Library for details.
JsChartViewer is designed to work with IE 6.0 or above, FireFox 3.0 or above, Chrome 4.0 or above, and Safari 4.0 or above.
Properties
| Name | Description |
|---|---|
| Default | A constant equals to 0 to represent using the default mouse behaviour. |
| Scroll | A constant equals to 2 to represent using the mouse for drag scrolling. |
| ZoomIn | A constant equals to 3 to represent using the mouse for zoom in actions. |
| ZoomOut | A constant equals to 4 to represent using the mouse for zoom out actions. |
| Horizontal | A constant equals to 0 to represent that the zoom and/or scroll orientation is horizontal. |
| Vertical | A constant equals to 1 to represent that the zoom and/or scroll orientation is vertical. |
| HorizontalVertical | A constant equals to 2 to represent that the zoom and/or scroll orientation can be both horizontal and vertical. |
| BottomLeft | A constant equals to 1 to represent the bottom left position. |
| BottomCenter | A constant equals to 2 to represent the bottom center position. |
| BottomRight | A constant equals to 3 to represent the bottom right position. |
| Left | A constant equals to 4 to represent the left position. |
| Center | A constant equals to 5 to represent the center position. |
| Right | A constant equals to 6 to represent the right position. |
| TopLeft | A constant equals to 7 to represent the top left position. |
| TopCenter | A constant equals to 8 to represent the top center position. |
| TopRight | A constant equals to 9 to represent the top right position. |
| Bottom | A constant equals to 2 to represent the bottom position. |
| Top | A constant equals to 8 to represent the top position. |
| 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. |
| getValueAtViewPort | Converts a view port coordinate to a value of the specified data scale. |
| getViewPortAtValue | Converts a value of the specified data scale to a view port coordinate. |
| setPlotAreaMouseMargin | Sets all margins (left, right, top, and bottom) of the plot area mouse event region to the same value. |
| setPlotAreaMouseMargin2 | Sets the margins of the plot area mouse event region. |
| isMouseOnPlotArea | Checks if the mouse cursor is on the extended plot area. |
| getChartMouseX | Gets the mouse cursor x-coordinate in the chart pixel coordinate system. |
| getChartMouseY | Gets the mouse cursor y-coordinate in the chart pixel coordinate system. |
| getPlotAreaMouseX | Gets the mouse cursor x-coordinate on the plot area in the chart pixel coordinate system. |
| getPlotAreaMouseY | Gets the mouse cursor y-coordinate on the plot area in the chart pixel coordinate system. |
| setMouseUsage | Sets the mouse usage mode. |
| getMouseUsage | Gets the mouse usage mode. |
| 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. |
| raiseViewPortChangedEvent | Raises a JsChartViewer.ViewPortChanged event. |
| 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. |
| getChart | Gets the specified chart in the Javascript Chart Model. |
| getChartCount | Gets the number of charts in the Javascript Chart Model. |
| drawHLine | Draws a horizontal line on the chart. |
| drawVLine | Draws a vertical line on the chart. |
| showCrossHair | Displays the crosshair cursor. |
| showTextBox | Draws a textbox on the chart. |
| hideObj | Hides one or more objects drawn by JsChartViewer. |
| setAutoHide | Hides one or more objects drawn by JsChartViewer when a certain event occurs. |
| removeAutoHide | Cancels the automatic action sets up by JsChartViewer.setAutoHide. |
| htmlRect | Generates HTML code that represents an inline color box. |
| addEventListener | A utility to attach an event handler to a Javascript event. |
| removeEventListener | Removes an event handler attached via a previous call to JsChartViewer.addEventListener. |
| NTime | Converts a date/time in ChartDirector's date/time format to a Javascript Date object. |
| CTime | Converts a Javascript Date object to ChartDirector's date/time format. |
Events
| Name | Description |
|---|---|
| MouseMoveChart | This event occurs when the mouse cursor moves on the chart. |
| MouseOutChart | This event occurs when the mouse cursor leaves the chart. |
| MouseMovePlotArea | This event occurs when the mouse cursor moves on the extended plot area. |
| MouseOutPlotArea | This event occurs when the mouse cursor leaves the extended plot area. |
| 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. |