User Interface

This charting engine displays interactive charts on an HTML5 canvas. Developers must provide a DOM element (div) "container" which will contain the canvas (in the samples see id=chartContainer). The library does the rest. The basic interface supports:

Panning

Screen controls are provided to pan the view (left and right keys). The home hey will take you back to the end of the chart (most current bar) and the end key will take you to the front of the chart (oldest bar). You can also grab with the mouse and pan the chart in the same manner as Google Maps. On touch devices use one finger to pan the chart. If crosshairs are enabled (such as when drawing) then a single finger moves the crosshairs while two fingers pan the chart.

Zooming

Screen controls are provided to zoom in and out (plus and minus keys / up and down keys) or the mousewheel may be used to zoom. Users can also grab either axis to zoom in or out (compress the axis). On touch devices users may pinch to zoom or expand. Users may zoom out to any level. Zoom-In is limited to the pixel dimensions of the canvas.

Drawing

Crosshairs are automatically enabled whenever a drawing tool is active (drawing tools are activated programmatically such as enabling through a menu selection). To make a drawing in a browser, click once to begin the drawing, move, and then click again to finish. On touch devices, first position the crosshairs and then single tap to begin a drawing. Position the crosshairs a second time and then single tap again to finish the drawing. Tap twice to abandon the drawing. To delete a drawing with a mouse, highlight the drawing and then right click. On touch devices, highlight the drawing and then tap twice or press the trashcan icon that appears when the drawing is highlighted.

Editing drawings

Mousing over a drawing, or tapping on a drawing on a touch device, will highlight the drawing. The drawing may then be grabbed and moved to another location. For drawings that are composed of multiple points, little circles will appear which can be dragged to change the angle or dimension of the drawing.

Panels

Studies appear in panels that are stacked on the canvas. Panels may be repositioned by pressing the "up" or "down" icons. They may be removed by pressing the "X" icon or modified by pressing the "options" icon. Panels can be resized by grabbing the panel's border and dragging to the desired size.

Overlays

Supplemental series (comparisons) and some studies and render as overlays on the main chart window.

Mousing over the corresponding line, or tapping on it on a touch device, will highlight it. To delete it, right click when highlighted. On touch devices, highlight the drawing and then tap twice or press the trashcan icon that appears when the drawing is highlighted.

Periodicity

STXChart natively supports minute, daily, weekly and monthly periods. It also supports any compound aggregate of each (such as 7 minute, 3 day or 2 week periods). For instance to display a 15 minute period you could specify 3 x 5 minute intervals. Periodicity can be set programmatically or through a menuing system. The sample files demonstrate how to switch between periods and how to compound periods.

Chart types, styles and scales

A variety of chart types (Heiken Ashi, Kagi, Point & Figure, etc.), styles(candle, bar, line, etc.) and scales (log, etc) can be set programmatically or through a menuing system. The sample files demonstrate how to incorporate the different types in your menus. Available choices depend on purchased package.

Personalization Options

Users can select one of the built in color themes, or to create a custom color theme. There is also a selection to choose your own time zone for the chart. This will 'pin' all date and times to the selected time zone.

Configuration options can be set programmatically or through a menuing system. The sample files demonstrate how to incorporate the different options in your menus.

Views

The advanced package includes the ability to save 'Views'. This is done by first laying out the actual view on the screen. Set your desired chart type, studies and interval; then clicking the '+' button on the bottom right of the chart. Add a name for your view and click on the 'save' button. The view will now be listed in the 'Views toolbar'; also located at the bottom of the screen. To activate a view, just click on its name. Do delete a view, right click on its name.

Please note that saved views are not the same as saved charts (which can be done by the 'Chart Sharing' tool) . Views are not intended to remember the symbol or symbol specific elements such as comparisons or drawings, but rather how the chart displays. So for example, you would set up a view display a mountain chart, with 3 preset studies with a weekly periodicity. At any time, you can activate the view to see it with the current symbol.

Chart Sharing

The advanced package includes the ability to save and share charts. In essence, a picture of the current chart will be taken and stored for future use. This is done by simply clicking on the 'Share' button located on the upper right hand corner of the GUI. You'will be given the option of opening the picture of your chart on a new browser window, of using a link to share it a reference.