Navigating the Charting Interface

The ChartIQ library produces interactive charts. The chart's navigational features have been carefully designed by ChartIQ's user experience (UX) team to be intuitive yet flexible. Performance, accuracy and responsiveness combine to give the charts a "tactile" sensation. This tutorial provides a tour of ChartIQ's navigational features and reveals some of the nuances and considerations that went into the interface design.

Symbol input

The syntax for each symbol will depend on your data Feed. The chart will allow both a single symbol or an equation composed of multiple symbols. To allow equations to be used on a chart, the CIQ.ChartEngine#allowEquations parameter must be set to true and the equation needs to be preceded by an equals sign (=) in order for it to be parsed as an equation. For example:

stxx.newChart("=2*IBM-GM");

See CIQ.formatEquation and CIQ.computeEquationChart for more details on allowed syntax.

Panning

In general, navigation of the chart is similar to navigation of Google maps. A chart is panned (scrolled) by "dragging" the chart. On desktop devices a user grabs the chart with the mouse and can drag it left, right, up, or down. On touch devices a single finger touch will move the chart from side to side or up and down.

On laptop touchpads a two-finger horizontal stroke will pan the chart left or right. On all devices, a "swipe" action will rapidly scroll the chart in the swipe direction, slowing with an easing animation.

When a chart is panned so that the most recent bar is hidden, a "home" icon appears on the screen. Pressing this icon will animate the chart back to the home position. This can also be accomplished programmatically by calling stxx.home().

It is possible to programmatically move the chart left or right and to animate to specifc locations with the CIQ.ChartEngine#scrollTo method. Using this technique, it is relatively easy to set up keyboard shortcuts for panning. The provided sample templates include support for panning left and right using the arrow keys.

Note: On touch devices, when the crosshair is enabled, two fingers can be used to pan the chart

Zooming

The mousewheel or touchpad is the primary interface for zooming a chart. A two finger up/down stroke on a laptop touchpad will zoom the chart. Likewise, mousewheel movement allows rapid zooming. On touch devices of course zooming is done by pinching the screen.

Zooming either the x or y axis can be accomplished by grabbing either axis with the mouse and moving to the desired zoom level.

(+) and (-) zoom buttons are placed on the screen as a final convenience for developers.

Zoom

The methods CIQ.ChartEngine#zoomIn and CIQ.ChartEngine#zoomOut allow developers to programmatically zoom the chart in or out. Each call will zoom the chart by approximately 10% (the same as clicking on the +/- buttons). Precise zooming can be accomplished programmatically through manipulation of candleWidth, by calling CIQ.ChartEngine#zoomSet.

Note: The world is divided on whether mousewheel/trackpad upward strokes should zoom in or zoom out. The default is that upward movement zooms out. This behavior can be reversed by setting stxx.reverseMouseWheel=true.

Drawing

Drawing is a modal activity. Drawing mode is activated by selecting a tool from the drawing toolbar (programmatically stxx.changeVectorType(tool)). Once drawing mode is activated, the crosshairs will automatically be displayed (regardless of the state of stxx.layout.crosshairs).

By default, drawing mode remains in effect until a user "unselects" drawing mode (by choosing "none" tool or by closing the drawing toolbar). Some product designers prefer a "one and done" interface where drawing mode is automatically deactivated after a drawing is completed. The following code will set the chart to "one and done" mode:

stxx.callbacks.drawing=function(){
    this.changeVectorType(null);
};

Developers can enable two possible modes for making drawings:

  • Default mode - The default method is a multi-click process. After a tool is selected, a user clicks once to begin a drawing (crosshairs will change color). The user then drags the mouse to the the drawing end-point and clicks again to finish the drawing. On touch devices, the user first positions the crosshair with their finger and then "taps" the screen to start the drawing and then, after dragging to the right position and size, taps again to complete it. This default mode is advantageous for two reasons. First, it gives the user more control, allowing them to carefully place their crosshairs and create accurate drawings. The second advantage is that this mode supports complex drawings that require more than two clicks (e.g., channels).

  • Drag to draw - The second method allows users to drag out drawings in a familiar way. Once a user selects a tool, they place their mouse or finger and create a drawing in a single stroke much as they would in a Paint program. This is often considered a more intuitive drawing method but lacks the accuracy and support for multi-point drawings.

Drawings retain their shape and scale across different periodicities. Clicking and dragging the body of a drawing will move it to another location. Hovering over a drawing, or tapping a drawing, will reveal its endpoints. The endpoints can be dragged to change the drawing's shape. To delete a drawing, hover to highlighted and right click. On touch devices, tap the drawing to highlight and then tap "the trash" can icon. (In the provided sample templates, hitting the "delete" or "backspace" key will also delete a highlighted drawing).

All drawings can be removed programmatically by calling CIQ.ChartEngine#clearDrawings. The drawing toolbar in the provided sample templates include a menu item to clear drawings.

Note: On touch devices, a user's crosshair will be positioned slightly up and to the left of the finger. This is important because it allows the user to see what they are highlighting.

Studies

Studies can be enabled either programmatically with CIQ.ChartEngine#addStudy or through a menu. In the provided sample templates, active studies are pinned to the study menu in a "study legend". The studies can be edited or deleted from this menu. Study legends can also be superimposed on the chart. An example is included in "chartiq.html".

Technical indicators (studies) come in two varieties: panel and overlay. Panel studies appear stacked in windows below (or above) the chart. When multiple panel studies are active, they can be repositioned by pressing the "up" or "down" icons. They can be expanded by pressing the fullscreen ("solo") icon. (Pressing the "solo" icon on the chart panel will hide all other panels). Study settings for panel studies can be modified by pressing the "gear” icon. Press the "X" icon on a panel to remove it and destroy it's underlying study.

The size of panels can be changed by dragging the horizontal borders.

It is possible to annotate and create drawings on panels.

Panel Study

Overlays (and underlays) are studies that are superimposed over the chart itself. Hovering over the line or shapes that make up a study will highlight that study. Right click a highlighted overlay to get a context menu that allows editing and deleting. On touch devices, highlight the study by tapping it, then tap the trash can icon to delete or the cog icon to edit.

Overlay Study

Periodicity & Range

It is very important to understand the difference between "periodicity" and "range". While periodicity is the period of time contained within each bar, the range is the total amount of time that is displayed on the chart canvas. Both range and periodicity are measured in units of time. Different combinations of periodcity and range allow the user to view the chart data in many different ways.

Periodicity

The chart natively supports minute, daily, weekly and monthly periods. It also supports any multiple or compound of each, such as 7-minute, 3-day or 2-week periods. This allows firms to support many more periodicities than might be available from their market data feed. For example, a 15-minute period can be made available by specifying 3 x 5 minute intervals. This specification can be done programmatically (CIQ.ChartEngine#setPeriodicity) or through a menu.

It is important to consider the data intervals that are available from your market data feed and to select periodicity settings that meet your users requirements. It is also crucial that periodicity settings are not selected that would negatively impact performance. For instance, we do not recommend compounding by more than a factor of 10 because it will create very large network requests.

This "period" is too large. Performance will be slow due to large network requests.

stxx.setPeriodicity({period:30, interval:1}); // don't do this!

It is important to remember that the time associated with a bar reflects the beginning of the interval. For example, a 1-minute bar starting at 09:30:00.00 covers all data up to 09:30:59.999.

For securities that trade during extended hours sessions (pre and post market), it is possible to enable an extended hour display with the CIQ.ExtendedHours add on. Extended hours display only affects intraday charts (bars in minutes). To support flipping back and forth between display of extended hours, your quote server should accept a flag that will filter out the extra sessions.

Periodicity

Range

Range is the total amount of time that is displayed on the chart. For example, if you have 60 one-minute bars visibile in your chart window, you are viewing a range of one hour (1H).

Using a range finder, such as the one found in the sample templates, users can easily snap the chart to a desired range. It is important to note that range finders often manipulate the period in order to neatly fit the bars in the chart window. The period adjustment will vary depending on how much chart canvas is available (i.e., the size of your browser window). For example, selecting a 5D range may adjust the period to 1H at one window size, but the same 5D range may adjust the period to 1.5H at a smaller window size to accomodate the bars.

Range Finder

Chart Styles and Types

A variety of chart styles (candle, bar, line, etc.) and aggregation types (Heiken-Ashi, Kagi, Point & Figure, etc.) can be set programmatically (CIQ.ChartEngine#setChartType) or through a menu system. The sample files demonstrate how to incorporate the different types in your menus. These chart styles and types are covered more in-depth in the Chart Styles and Types tutorial.

Log scale can be set programmatically by calling CIQ.ChartEngine#setScale.

Chart Styles and Types

Heads-up Display (HUD)

A heads-up display (HUD) is a method of displaying detailed information for a specific bar on the chart itself. The information for the bar that the mouse is currently hovering over is presented in the HUD. There are three types of HUDs included in the sample file "template-advanced.html", and developers are able to create customuzed HUDS to display information.

Crosshair HUD

The crosshair HUD appears when the crosshairs are enabled. This HUD is a transparent rectangle that follows the mouse. It displays the highlighted bar's date/time, close, open, high, low, and volume. If a study is enabled, information pertaining to the study will also be displayed in this HUD. See CIQ.Tooltip for implementation and customization details.

Crosshair HUD

Info HUD ('Bubble')

The 'bubble' HUD is enabled by pressing the "Info" button on the top bar (next to the Crosshair icon). This HUD resembles a speech bubble follows the mouse and points to the current bar on the chart. This HUD displays the highlighted bar's current price, date/time, close, open, high, low, and estimated volume. The volume is also displayed graphically on a meter above the amount.

Info HUD Bubble

Info HUD (Window)

The 'window' HUD is enabled by pressing the "Info" button twice. This HUD appears in the top-left of the chart canvas, and does not move. This HUD displays the highlighted bar's current price, open, close, high, low, and estimated volume.

Info HUD Window

Implementing Custom HUDs

Developers can create and implement their own HUDs using our injection API. The code below will inject modify the DOM with the high price for the bar that the user is hovering over.

//Example assumes a global stxx;
//priorBar is there so that we don't run the expensive dom manipulations
//unecessarily.
var priorBar=null;
function fillInHUD(){
    //stxx.cx is the crosshairX position
    var bar=stxx.barFromPixel(stxx.cx);
    if(bar==priorBar) return;
    priorBar=bar;    
    var barData=stxx.chart.xaxis[bar];
    if(barData==null){
        priorBar=-1;
    } else {
        var barHigh = barData.data.High;
        //assumes High is returned from your quotefeed.
       if(barHigh){
           //replace dom with updated high.
             $("#hud-high").html(barHigh);   
       }else{
               //make DOM empty.
            $("#hud-high").html('');
       }
   }
}

CIQ.ChartEngine.prototype.prepend('headsUpHR', fillInHUD);

Next Steps: