ChartDirector 7.1 (.NET Edition)

JsChartViewer


As ChartDirector charts are in standard image formats, and the hot spots are in standard HTML formats, the browser by itself can display the charts and support the hot spot tooltips and events.

The JsChartViewer control is a browser side Javascript control to support other advanced chart user interactions, including:

  • Programmable Track Cursor Support

    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.

  • Zoom and Scroll Support

    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.

  • AJAX chart update

    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
    NameDescription
    DefaultA constant equals to 0 to represent using the default mouse behaviour.
    ScrollA constant equals to 2 to represent using the mouse for drag scrolling.
    ReverseScrollA constant equals to 6 to represent using the mouse for drag scrolling in the reverse direction.
    ZoomInA constant equals to 3 to represent using the mouse for zoom in actions.
    ZoomOutA constant equals to 4 to represent using the mouse for zoom out actions.
    HorizontalA constant equals to 0 to represent that the zoom and/or scroll orientation is horizontal.
    VerticalA constant equals to 1 to represent that the zoom and/or scroll orientation is vertical.
    HorizontalVerticalA constant equals to 2 to represent that the zoom and/or scroll orientation can be both horizontal and vertical.
    BottomLeftA constant equals to 1 to represent the bottom left position.
    BottomCenterA constant equals to 2 to represent the bottom center position.
    BottomRightA constant equals to 3 to represent the bottom right position.
    LeftA constant equals to 4 to represent the left position.
    CenterA constant equals to 5 to represent the center position.
    RightA constant equals to 6 to represent the right position.
    TopLeftA constant equals to 7 to represent the top left position.
    TopCenterA constant equals to 8 to represent the top center position.
    TopRightA constant equals to 9 to represent the top right position.
    BottomA constant equals to 2 to represent the bottom position.
    TopA constant equals to 8 to represent the top position.
    updatingMsgGets or sets the HTML message displayed when partial chart update is in progress.
    serverErrorMsgGets or sets the HTML template for displaying server error messages.
    msgContainerGets or sets the default message container template.
    okButtonGets or sets the "OK" button for closing the chart message window.
    xButtonGets or sets the "X" button for closing the chart message window.

    Methods
    NameDescription
    getGets a JsChartViewer object that binds to the given <IMG> tag for chart display.
    getIdGets the id of the JsChartViewer.
    getChartMouseXGets the mouse or touch x-coordinate in the chart pixel coordinate system.
    getChartMouseYGets the mouse or touch y-coordinate in the chart pixel coordinate system.
    getPlotAreaMouseXGets the mouse or touch x-coordinate on the plot area in the chart pixel coordinate system.
    getPlotAreaMouseYGets the mouse or touch y-coordinate on the plot area in the chart pixel coordinate system.
    setPlotAreaMouseMarginSets all margins (left, right, top, and bottom) of the plot area mouse event region to the same value.
    setPlotAreaMouseMargin2Sets the margins of the plot area mouse event region.
    isMouseOnPlotAreaChecks if the mouse cursor is on the extended plot area.
    setViewPortLeftSets the position of the left side of the viewport.
    getViewPortLeftGets the position of the left side of the viewport.
    setViewPortTopSets the position of the top side of the viewport.
    getViewPortTopGets the position of the top side of the viewport.
    setViewPortWidthSets the width of the viewport.
    getViewPortWidthGets the width of the viewport.
    setViewPortHeightSets the height of the viewport.
    getViewPortHeightGets the height of the viewport.
    getValueAtViewPortConverts a viewport coordinate to a value of the specified data scale.
    getViewPortAtValueConverts a value of the specified data scale to a viewport coordinate.
    setMouseUsageSets the mouse usage mode.
    getMouseUsageGets the mouse usage mode.
    setZoomDirectionSets the zoom direction for mouse zoom in/out actions.
    getZoomDirectionGets the zoom direction for mouse zoom in/out actions.
    setScrollDirectionSets the scroll direction for mouse scroll actions.
    getScrollDirectionGets the scroll direction for mouse scroll actions.
    setZoomInRatioSets the magnification ratio for each zoom in click of the mouse.
    getZoomInRatioGets the magnification ratio for each zoom in click of the mouse.
    setZoomOutRatioSets the magnification ratio for each zoom out click of the mouse.
    getZoomOutRatioGets the magnification ratio for each zoom out click of the mouse.
    setZoomInWidthLimitSets the viewport width at maximum zoom in.
    getZoomInWidthLimitGets the viewport width at maximum zoom in for mouse zoom in actions.
    setZoomOutWidthLimitSets the viewport width at maximum zoom out.
    getZoomOutWidthLimitGets the viewport width at maximum zoom out for mouse zoom out actions.
    setZoomInHeightLimitSets the viewport height at maximum zoom in.
    getZoomInHeightLimitGets the viewport height at maximum zoom in for mouse zoom in actions.
    setZoomOutHeightLimitSets the viewport height at maximum zoom out.
    getZoomOutHeightLimitGets the viewport height at maximum zoom out for mouse zoom out actions.
    setMinimumDragSets the minimum mouse drag distance before it is considered as an intentional drag.
    getMinimumDragGets the minimum mouse drag distance before it is considered as an intentional drag.
    setSelectionBorderWidthSets the border width of the zoom selection box.
    getSelectionBorderWidthGets the border width of the zoom selection box.
    setSelectionBorderColorSets the border color of the zoom selection box as an HTML color.
    getSelectionBorderColorGets the border color of the zoom selection box.
    setZoomInCursorSets the mouse cursor to be used when the mouse is used for zoom in.
    getZoomInCursorGets the mouse cursor to be used when the mouse is used for zoom in.
    setZoomOutCursorSets the mouse cursor to be used when the mouse is used for zoom out.
    getZoomOutCursorGets the mouse cursor to be used when the mouse is used for zoom out.
    setNoZoomCursorSets the mouse cursor to be used when the mouse is used for zoom in/out, but the zoom in/out limits has been reached.
    getNoZoomCursorGets the mouse cursor to be used when the mouse is used for zoom in/out, but the zoom in/out limits has been reached.
    setScrollCursorSets the mouse cursor to be used when the mouse is used for scrolling.
    getScrollCursorGets the mouse cursor to be used when the mouse is used for scrolling.
    setCustomAttrSets a custom attribute.
    getCustomAttrGets a custom attribute.
    canSupportPartialUpdateChecks if the browser is capable of supporting partial chart updates (AJAX requests).
    partialUpdateSends a partial update request (AJAX request) to the server.
    partialUpdateAsAttachmentSends an attachment request using the partial update (AJAX request) mechanism.
    streamUpdateRefreshes the <IMG> that the JsChartViewer is bound to.
    isUpdatingDetermines if there is an outstanding partial update (JsChartViewer.partialUpdate or JsChartViewer.partialUpdateAsAttachment) or stream update (JsChartViewer.streamUpdate).
    abortUpdateAborts all outstanding partial updates and stream updates.
    raiseViewPortChangedEventRaises a JsChartViewer.ViewPortChanged event.
    attachHandlerAttaches a function as the handler of the specified event(s).
    detachHandlerDetaches a function from being an event handler for the specified event(s).
    applyHandlersCalls the handlers for an event.
    isInEventDetermines if the calling code is handling the specified event.
    isTouchEventDetermines if the calling code is handling a touch event.
    setDisableTouchSpecifies whether to disable touch support for zooming and scrolling.
    getChartGets the specified chart in the Javascript Chart Model.
    getChartCountGets the number of charts in the Javascript Chart Model.
    drawHLineDraws a horizontal line on the chart.
    drawVLineDraws a vertical line on the chart.
    showCrossHairDisplays the crosshair cursor.
    showTextBoxDraws a textbox on the chart.
    showClickableTextBoxDraws a clickable textbox on the chart.
    hideObjHides one or more objects drawn by JsChartViewer.
    setAutoHideHides one or more objects drawn by JsChartViewer when a certain event occurs.
    removeAutoHideCancels the automatic action sets up by JsChartViewer.setAutoHide.
    htmlRectGenerates HTML code that represents an inline color box.
    toCssHConvert vertical height from chart pixel unit to CSS pixel unit.
    toCssWConvert horizontal width from chart pixel unit to CSS pixel unit.
    setAutoResizeImageMapDetermines if the automatically resize the image map.
    addEventListenerA utility to attach an event handler to a Javascript event.
    removeEventListenerRemoves an event handler attached via a previous call to JsChartViewer.addEventListener.
    NTimeConverts a date/time in ChartDirector's date/time format to a Javascript Date object.
    CTimeConverts a Javascript Date object to ChartDirector's date/time format.

    Events
    NameDescription
    MouseMoveChartThis event occurs when the mouse cursor moves on the chart.
    MouseOutChartThis event occurs when the mouse cursor leaves the chart.
    TouchStartChartThis event occurs when a Javascript touch start event occurs on the chart.
    TouchMoveChartThis event occurs when a Javascript touch move event occurs on the chart.
    TouchEndChartThis event occurs when a Javascript touch end event occurs on the chart.
    TouchCancelChartThis event occurs when a Javascript touch cancel event occurs on the chart.
    MouseMovePlotAreaThis event occurs when the mouse cursor moves on the extended plot area.
    MouseOutPlotAreaThis event occurs when the mouse cursor leaves the extended plot area.
    TouchStartPlotAreaThis event occurs when a Javascript touch start event occurs on the extended plot area.
    TouchMovePlotAreaThis event occurs when a Javascript touch move event occurs on the extended plot area.
    TouchEndPlotAreaThis event occurs when a Javascript touch end event occurs on the extended plot area.
    TouchCancelPlotAreaThis event occurs when a Javascript touch cancel event occurs on the extended plot area.
    ChartMoveThis event occurs when the chart resizes or moves within the web page.
    ViewPortChangedThis event occurs when the viewport is changed through mouse actions (see JsChartViewer.setMouseUsage).
    PreUpdateThis event occurs immediately before a partial chart update request is sent to the server (see JsChartViewer.partialUpdate).
    PostUpdateThis event occurs after a partial update response is received from the server and is processed successfully.
    UpdateErrorThis event occurs if an error occurs in during a partial update.
    NowThis event occurs immediately when it is used in JsChartViewer.attachHandler.