Options
All
  • Public
  • Public/Protected
  • All
Menu

Interface PublicEngine

Interface for end user API of the LCJS engine. It provides some useful capabilities over the area enclosed by a single LCJS context (which can be just a single chart, or a Dashboard with several charts).

Commonly used properties:

Index

Properties

container

container : HTMLDivElement

HTML Div element that contains the rendering Engine.

restoreMouseStyle

restoreMouseStyle : function

Restore Mouse style.

param

Key generated using 'setMouseStyle'

    • Parameters

      • key: undefined | number

      Returns void

scale

scale : LinearScaleXY

Coordinate system that encloses entire LCJS context in pixels starting from bottom left.

Referenced usually by chart.engine.scale.

The engine scale is used as an intermediary step when translating locations from the web page into LCJS coordinates, or vice versa.

See clientLocation2Engine for translating web page coordinate to engine.scale and engineLocation2Client for translating engine.scale coordinate to web page.

To further translate a location on engine.scale to another coordinate system, like axis, use translatePoint function.

This feature is extremely powerful since it allows combining of LCJS and HTML/CSS or any web UI framework.

setMouseStyle

setMouseStyle : function

Set Mouse style.

param

Name of a Mouse preset in js.

param

Key for existing request to refresh

returns

Key that can be used to restore Mouse style

    • Parameters

      • presetName: string
      • existingKey: undefined | number

      Returns number

Methods

captureFrame

  • captureFrame(type?: undefined | string, encoderOptions?: undefined | number): Blob
  • Capture state of rendering Engines canvas. Returns the captured image as a Blob-object.

    Has two optional parameters which directly reference JavaScript API HTMLCanvasElement.toDataURL:

    https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL

    Parameters

    • type: undefined | string

      A DOMString indicating the image format. The default format type is image/png.

    • encoderOptions: undefined | number

      A Number between 0 and 1 indicating the image quality to use for image formats that use lossy compression such as image/jpeg and image/webp. If this argument is anything else, the default value for image quality is used. The default value is 0.92. Other arguments are ignored.

    Returns Blob

    JavaScript Blob whose 'type' depends on what was passed to 'type' parameter of this method. Defaults to image/png

clientLocation2Engine

  • clientLocation2Engine(x: number, y: number): Point
  • Translates a coordinate on the web page (for example, MouseEvent.clientX, MouseEvent.clientY) that originates from browser top-left, to PublicEngine.scale.

     // Example usage, listen to chartXY background mouse move and console the location on default axis.
     chart.onSeriesBackgroundMouseMove((_, event) => {
         // Translate mouse location to LCJS coordinate system for solving data points from series, and translating to Axes.
         const mouseLocationEngine = chart.engine.clientLocation2Engine(
             event.clientX,
             event.clientY
         );
    
         // Translate LCJS coordinate to default chart axes.
         const mouseLocationAxis = translatePoint(mouseLocationEngine, chart.engine.scale, { x: chart.getDefaultAxisX(), y: chart.getDefaultAxisY() })
         console.log('axis', mouseLocationAxis)
     })
    

    To further translate a location on engine.scale to another coordinate system, like axis, use translatePoint function.

    This feature is extremely powerful since it allows combining of LCJS and HTML/CSS or any web UI framework.

    Parameters

    • x: number

      Location of X in browser

    • y: number

      Location of Y in browser

    Returns Point

    Respective coordinate on engine.scale

engineLocation2Client

  • engineLocation2Client(x: number, y: number): Point
  • Translates a coordinate on engine.scale that originates from LCJS bottom-left to respective location on the web page currently.

    This coordinate can, for example, be used with absolute CSS positioning:

     // Example usage, absolute position a HTML element on a coordinate along two LCJS Axes.
     const element = document.createElement('span')
     chart.engine.container.append(element)
     element.style.position = 'absolute'
     element.style.display = 'block'
     element.innerHTML = 'hello'
     element.style.color = 'red'
    
     const repositionElement = () => {
         // Position HTML element with CSS by translating LCJS Axis location to web page.
         const locationAxis = { x: chart.getDefaultAxisX().getInterval().start, y: chart.getDefaultAxisY().getInterval().end }
         const locationEngine = translatePoint(locationAxis, { x: chart.getDefaultAxisX(), y: chart.getDefaultAxisY() }, chart.engine.scale)
         const locationDocument = chart.engine.engineLocation2Client(locationEngine.x, locationEngine.y)
         element.style.left = `${locationDocument.x}px`
         element.style.top = `${locationDocument.y}px`
     }
    
     // NOTE: Axis -> Document translation is invalid if one of many things changes:
     // 1. Axis interval, style or ticks change.
     // 2. Web page is scrolled, zoomed or resized.
     // 3. Dashboard splitter is resized.
     // In this example, the element is repositioned continuously, which might not always be for the best.
     setInterval(repositionElement)
    

    This feature is extremely powerful since it allows combining of LCJS and HTML/CSS or any web UI framework.

    Parameters

    • x: number

      Location of X in engine

    • y: number

      Location of Y in engine

    Returns Point

getBackgroundFillStyle

  • Get Fill Style of engine background.

    Returns FillStyle

    FillStyle

getBackgroundStrokeStyle

  • Get Stroke Style of engine background.

    Returns LineStyle

    LineStyle

layout

  • layout(): void
  • Calculate the layout again. This should be called when the container of chart is resized.

     // Example syntax, trigger chart resize on user event.
     myResizeEventCallback(() => {
         // Trigger chart resize manually.
         chart.engine.layout()
     })
    

    Returns void

renderFrame

  • renderFrame(width: number, height: number, noFlip?: undefined | false | true): Uint8Array
  • Render a frame of specific size to a ArrayBuffer.

    Mainly for Node JS usage. In browser the chart itself will not be resized correctly.

    Parameters

    • width: number

      Horizontal resolution

    • height: number

      Vertical resolution

    • noFlip: undefined | false | true

      Leave the image upside down

    Returns Uint8Array

setBackgroundFillStyle

  • Set Fill Style of engine background.

    Parameters

    Returns this

    Object itself

setBackgroundStrokeStyle