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 "viewport". There are also methods to facilitate using custom user interface to control the viewport.
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 or RazorChartViewer on the server side. For example, when JsChartViewer sends an AJAX chart update requests to the server, the server needs to use WebChartViewer or RazorChartViewer 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.
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. |
| ReverseScroll | A constant equals to 6 to represent using the mouse for drag scrolling in the reverse direction. |
| 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. |
| getChartMouseX | Gets the mouse or touch x-coordinate in the chart pixel coordinate system. |
| getChartMouseY | Gets the mouse or touch y-coordinate in the chart pixel coordinate system. |
| getPlotAreaMouseX | Gets the mouse or touch x-coordinate on the plot area in the chart pixel coordinate system. |
| getPlotAreaMouseY | Gets the mouse or touch y-coordinate on the plot area in the chart pixel coordinate system. |
| 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. |
| setViewPortLeft | Sets the position of the left side of the viewport. |
| getViewPortLeft | Gets the position of the left side of the viewport. |
| setViewPortTop | Sets the position of the top side of the viewport. |
| getViewPortTop | Gets the position of the top side of the viewport. |
| setViewPortWidth | Sets the width of the viewport. |
| getViewPortWidth | Gets the width of the viewport. |
| setViewPortHeight | Sets the height of the viewport. |
| getViewPortHeight | Gets the height of the viewport. |
| getValueAtViewPort | Converts a viewport coordinate to a value of the specified data scale. |
| getViewPortAtValue | Converts a value of the specified data scale to a viewport coordinate. |
| 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 viewport width at maximum zoom in. |
| getZoomInWidthLimit | Gets the viewport width at maximum zoom in for mouse zoom in actions. |
| setZoomOutWidthLimit | Sets the viewport width at maximum zoom out. |
| getZoomOutWidthLimit | Gets the viewport width at maximum zoom out for mouse zoom out actions. |
| setZoomInHeightLimit | Sets the viewport height at maximum zoom in. |
| getZoomInHeightLimit | Gets the viewport height at maximum zoom in for mouse zoom in actions. |
| setZoomOutHeightLimit | Sets the viewport height at maximum zoom out. |
| getZoomOutHeightLimit | Gets the viewport 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. |
| partialUpdateAsAttachment | Sends an attachment request using the partial update (AJAX request) mechanism. |
| streamUpdate | Refreshes the <IMG> that the JsChartViewer is bound to. |
| isUpdating | Determines if there is an outstanding partial update (JsChartViewer.partialUpdate or JsChartViewer.partialUpdateAsAttachment) or stream update (JsChartViewer.streamUpdate). |
| abortUpdate | Aborts all outstanding partial updates and stream updates. |
| raiseViewPortChangedEvent | Raises a JsChartViewer.ViewPortChanged event. |
| attachHandler | Attaches a function as the handler of the specified event(s). |
| detachHandler | Detaches a function from being an event handler for the specified event(s). |
| applyHandlers | Calls the handlers for an event. |
| isInEvent | Determines if the calling code is handling the specified event. |
| isTouchEvent | Determines if the calling code is handling a touch event. |
| setDisableTouch | Specifies whether to disable touch support for zooming and scrolling. |
| 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. |
| showClickableTextBox | Draws a clickable 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. |
| toCssH | Convert vertical height from chart pixel unit to CSS pixel unit. |
| toCssW | Convert horizontal width from chart pixel unit to CSS pixel unit. |
| setAutoResizeImageMap | Determines if the automatically resize the image map. |
| 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. |
| TouchStartChart | This event occurs when a Javascript touch start event occurs on the chart. |
| TouchMoveChart | This event occurs when a Javascript touch move event occurs on the chart. |
| TouchEndChart | This event occurs when a Javascript touch end event occurs on the chart. |
| TouchCancelChart | This event occurs when a Javascript touch cancel event occurs on 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. |
| TouchStartPlotArea | This event occurs when a Javascript touch start event occurs on the extended plot area. |
| TouchMovePlotArea | This event occurs when a Javascript touch move event occurs on the extended plot area. |
| TouchEndPlotArea | This event occurs when a Javascript touch end event occurs on the extended plot area. |
| TouchCancelPlotArea | This event occurs when a Javascript touch cancel event occurs on the extended plot area. |
| ChartMove | This event occurs when the chart resizes or moves within the web page. |
| ViewPortChanged | This event occurs when the viewport 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. |
| Now | This event occurs immediately when it is used in JsChartViewer.attachHandler. |