The ChartIQ Library: A Developer Overview


Introduction

A developer overview of the library is provided below; however, it's worth first clarifying some of the benefits of using our specific library.

Why Use Our Library

Financial charting for time series data is difficult and time consuming. It isn't practical for most development teams to build charting from the ground up. Furthermore, a "standards based" solution that runs across multiple platforms, browsers, and devices adds additional layers of complexity. Our library provides this level of sophistication. Develop with confidence, knowing that as your application grows, our charts and our company will be there to support you.

What Makes Our Library Distinct

The library provides developers and web designers with a complete HTML 5 stock-charting solution. This means it is now easier than ever to develop charts for a web site or web application that can be deployed on both desktop and mobile devices. The library is touch aware, allowing mobile users on tablets or smart phones to access all of the charting features. Built-in features include interactive chart navigation, drawing tools, and a full suite of technical indicators.

No external libraries are required to utilize the SDK although you may of course use any third party library to build your own code (jquery, Bootstrap, Angular, etc).

The library is a professional grade SDK that can be used to build both basic financial charts as well as advanced financial charts such as those found in professional workstations. The SDK is extensive and provides both high level convenience functions as well as low level access to core functionality.

Finally, we are here to help. Really! Consider our support desk to be your resource. We will provide sample code to solve your problem. If you are stuck, send us a link and we'll debug it for you. Need advice or industry insight? Just ask! Any and all help is available at dev@chartiq.com.

We're Our Own First Customer

Although we aim to place our customers' needs first, it's helpful to have a common perspective and goal. At ChartIQ, our own teams depend on the library for building web-based finanical applications. For example, our own technical analysis platform Technician is built using our own charting library. Charts are also central to our FX trading platform WebTrader.

Why Not Freeware or Mid-Range Charting Solutions

When it come to basic or general charting, an open-source or "lite" charting solution can be adequate. There are many to choose from. However, freeware won't come close to providing a professional-grade solution for financial charting. Even in the domain of commercial charting packages, no other solution truly competes with the ChartIQ library for time series data. The visualization of time series data is our forte.


For a Quick Look

Try it Out

Here's a demo showing some of what the charting library can do. Click around in the menus to explore the range of capabilities. How to interact with a chart's interface (e.g. zooming, panning, drawing) is explained in the User Interface tutorial.

Play With the Code

You'll want to read the section below on "The Basics" before going too far, but we've put the library with sample code on JSFiddle so anyone can experiment with it.

Browse through the Documentation.

The top menus on this page provide quick entry into the library's documentation: API, Tutorials, and the Lastest Release Information.


We'll Help You Quickly Integrate

Complete Examples Provided

When you download our library, we provide you with several complete examples (i.e. HTML5 + CSS3 + JavaScript) to help you get started. You can use these as coding templates to begin from, customizing from there to match your needs.

Tutorials

We provide Library Tutorials with code snippets for using different parts of the API. For example, here are tutorials for Custom Drawing Menu and Colors and Custom Drawing Tools.

JSFiddle Examples

As already mentioned, we also provide example code on JSFiddle that can be experimented with. Cut and paste into your own code!

Connecting to Your Data

Your first step is integrating your own market data into our charting library. We have several tutorials to help you integrate easily and quickly, whether it be by pushing data into charts, pulling it, or streaming it. The topic is introduced below under Integrating Data into Charts.

For more thorough coverage see Data Loading along with Adding custom data to dataSet and Integrating Third Party Data Feeds.

The JSFiddles examples also provide example code for integrating your own data.


Getting the Library

If you'd like to try out the library, send us an email at info@chartiq.com. We'll send you a zip file of the complete library.

Installing the Library

Unzip all the files and install into your web server. (We recommend also making a copy of your library for safe-keeping and reference.)

In the root directory, open chartiq.html in a browser. A sample chart should immediately appear. If a chart does not appear then a problem exists with one of the library components. Most likely it is running on an unauthorized domain. Open a browser debugger window (F12 on Internet Explorer, Firebug, Chrome or Safari development tools) and check the console for any errors. Email us at dev@chartiq.com for support.

After confirming the library is operational (i.e. chartiq.html displays a chart), Getting Started Using the Library below will walk you through the initial steps of using the library.

A Note on Console Messages

If you see the error Fail to load resource message in the developer console this means that a plugin is unavailable. This is normal and can be ignored. Plugins are loaded out of the "plugins" directory. You can simply remove the plugin loader from the sample code if you do not plan on using the plugin.

Licensing Notes on Time, Domain and Operating System Locks

Web permanent Licenses will be locked to the domains or IP addresses that were requested at the time of purchase. This means that the library will not function unless it is hosted by a web server on that domain/IP (if hosting in an iframe, the iframe domain must also match).

All copies of the library are unlocked for http://127.0.0.1 and http://localhost so that you develop on your personal machine.

Moble App permanent Licenses will be locked to the OS that was requested at the time of purchase. Please let us know if you intend to run the library within a native application (iOS, Android, Java JRE, .NET) and we will provide a compatible library.

Trial licenses are not domain or OS locked. As such they can run on any mobile device or by double clicking the sample pages from your desktop.

All licenses are time locked and will cease to operate past the expiration date.

We will send an email notice prior to expiration.

You can find licensed domains, OS and expiration date in the stxKernelOs.js file located in the js directory:

/* File generated on  Month Day Year Time */
/* Version xxxx-xx-xx */
/* Expires on YYYY/MM/DD */
/* Locked to domains ["127.0.0.1","localhost","domain1","domain2","domain3"] */
/* --This license will only work on android--  */

Developer Options: Chart SDK vs. Chart UI vs Native App

The library can be used either as a pure canvas-based charting SDK (running within your own UI) or as a "drop in chart" with a full blown user interface. By "user interface" we mean menus, dialogs, symbol lookup, etc.

The SDK

If you are placing charts into an existing interface or building your own interface using a popular framework then you should get comfortable using the charting library directly as a pure SDK.

stx-quickstart.html along with the below Getting Started Using the SDK should be your starting point. You will be adding chart instances to container <div> tags and calling JS functions to interact with the chart.

The SDK API Reference and Tutorials provide extensive documentation for applying the SDK directly.

stx-standard.html also provides a sample guide, showing more example of how API calls are commonly used -- we've tried to keep stx-standard.html very straightforward.

The Chart UI Drop-In

If you're looking for something that is closer to ready-made, use chartiq.html as your starting point. This is a fully functional, responsive charting tool, complete with animations and modern styling. Just hook up your market data (see Data Format) and you can use this application right out of the box. Of course you can also modify chartiq.html anyway you want to meet your specific UI needs.

chartiq.html is built using W3C Standard WebComponents. This means that you can cherry-pick just the components that you want to use for your project. For instance, you can use the <cq-lookup> component to create a symbol lookup input.

Native App (Mobile or Desktop)

If you plan on embedding ChartIQ into a native app you can still choose either approach, loading your html page into a self-contained "WebView" control. WebViews are supported in iOS, Android, Java and .NET, allowing you to use ChartIQ for desktop, mobile and web applications. Each operating system has its own WebView capability but they all essentially work the same way. A WebView can access either a web page on a remote server, or a web file that is bundled with the application. Such applications that combine HTML5 and Native Code are referrer to a "hybrid apps".

Decide up front whether your UI will use native controls (choose the SDK approach) or HTML5 controls (choose the Drop-In approach).

See the Integration with other applications tutorial for more explaination.


Getting Started Using the Library

You can use one of several sample templates (i.e. HTML files) as a starting point for trying out the library. Although the templates demonstrate how to interact with the charting API, they do not address every screen size and configuration, so feel free to modify the HTML or CSS as needed to experience with the library.

Here are the sample templates installed with the library under the htdocs/default directory:

  • chartiq.html provides a full example of a UI and chart (the right starting place for a drop-in solution).
  • chartiq-basic.html provides a stripped down variation of chartiq.html showing a basic UI and chart.
  • stx-quickstart.html provides the most basic example of using the SDK to display a chart.
  • stx-standard.html provides a more complete example showing how the SDK might be used.

STX_SAMPLE_DAILY.js is included in the same default directory. It provides sample data in the correct format for loading into a chart.

The library is partitioned into multiple Javascript files -- the key files are shown below. Note this is the correct relative ordering for each file.

  • js/stxThirdParty.js provides W3C support until all browsers internally support ECMA-402.
  • js/stxTimeZoneData.js provides timezone support.
  • js/stx.js provides portion of the core SDK and is always required.
  • js/stxLibrary.js provides functionality beyond the basic SDK, including studies and steaming-data.
  • js/stxKernelOs.js provides the SDK kernel and is always required.
  • js/stxAdvanced.js provides a variety of advanced library functionality.

Also required is the library's CSS file. The default is css/stx-chart.css, which can be used as is or customized. This file documents all the CSS style properties supported by the library.

Other Javascript and CSS files support optional UI functionality -- the different HTML templates show the combination of files to use depending on functionality.

The Internals

Before going very far describing how to use the SDK it is helpful to cover some library internals.

A chart is represented and rendered by a STXChart object. By convention we refer to instances of this object as stxx or stx. Each chart lives inside of a HTML container (<div>) that you provide. The chart automatically resizes itself to fill the container. Create a separate STXChart object for each chart you wish to display on the screen and devote a dedicated container div to each.

Charts are drawn on an HTML5 canvas (STXChart.chart.canvas). If you inspect your <div> container with a browser after a chart is displayed, you will see the canvas (there will actually be several canvases, each used for optimizing functionality).

Some DOM elements (HTML) are built dynamically and layered on top of the canvas and managed by the STXChart. These include the zoom buttons, the icons for managing panel position, the panel labels, and the "home" button that appears if you scroll leftward. The "handles" that control panel height are DOM elements as are the crosshairs and the floating price and date labels (floatHR, floatDate). These DOM elements are loaded with mouseover events that automatically hide the crosshairs when they are in focus and also respond to touch events. In order to ensure proper placement of these components it is critical that your container div is set with style position:relative or position:absolute.

Panning and zooming are really animations. The HTML5 canvas performs an animation loop (the "draw" loop Animation Loop outline). Modern browsers provide very high performance. Animation of the chart will appear smooth to end users. Overall performance depends on the amount of data displayed (width of chart & number of bars) and processing requirements (number of studies) and of course the user's hardware and browser choice.

Placing A Chart On Your Page

To place a chart on a HTML page, a DOM element must first be created to contain the chart. For example:

<div id="myContainer" style="width:600px;height:150px;"></div>

Next, the main chart object must be constructued with a reference to the DOM container object:

var stxx=new STXChart({container:$$$("#myContainer")});

STXChart will automatically expand the canvas size to the boundaries of the DOM element.

After declaring your object, the chart can be displayed, in this case using static data (see The Data Format below).

stxx.newChart(symbolName, data);

Your chart's container object can be a relative style, such as width=100%. The same is not true for height since HTML does not include the concept of 100% height for page size. To create a full screen chart you must manually set the height for your container using JavaScript. If however your chart container is nested inside of other divs you can use CSS to automatically control the width and height. This CSS snippet will cause the container to automatically expand to the dimensions of a containing element:

#container{
    position:absolute;
    top:0;
    bottom:0;
    left:0;
    right:0;
}

Integrating Data Into Charts

Every user must integrate their own data (or own source of data) with the library. A complete Data Loading tutorial goes into more depth with additional examples.

The required format along with a brief introduction to using your own data is covered below.

The Data Format

Data can be entered into a chart using different methods (i.e. pushed, pulled, or streamed), but the data format is always the same. Data is always entered as a JavaScript array of Open-High-Low-Close (OHLC) objects:

[
    {
        "Date":"1993-01-29",
        "Open":43.97,
        "High":43.97,
        "Low":43.75,
        "Close":43.94,
        "Volume":1003200,
        "Adj_Close":31.16
    },
    {
        "Date":"1993-02-01",
        "Open":43.97,
        "High":44.25,
        "Low":43.97,
        "Close":44.25,
        "Volume":480500,
        "Adj_Close":31.38
    }
]

Below is the breakdown of an OHLC object (i.e. a single array element) -- notice only the date and close values are always required.

Field Details
Date or DT Required The date in a year-month-day format. Alternately, DT can be used, representing a JavaScript Date() object or Epoch number (number of milliseconds since midnight January 1, 1970)). See notes 3, 4, and 5 immediately below for additional clarification on the formats.
Open Optional Price at market open.
High Optional High for the day.
Low Optional Low for the day.
Close Required The closing price. Setting this field to null will cause the candle to be hidden
Volume Optional Trading volume for the day.
Adj_Close Optional The closing price adjusted for splits or dividends.

Keep in mind these additional data-integration notes:

  1. The values of Open, High, Low, Close & Volume must be integers/floats, not strings. Use parseFloat() if your data server provides strings.
  2. Objects in the array must be ordered from oldest to newest. This means that your data[0] element will be the oldest in the set and your data[length-1] element will be the most current.
  3. The date format must follow 'US style' rather than 'European style'. As such the year or the month must lead the date instead of the day.
    Examples:
          'yyyymmddhhmm'
          'yyyymmdd'
          'yyyy-mm-dd'T'hh:mm:ss.SSS'
          'mm-dd-yyyy'T'hh:mm:ss.SSS'
          'yyyy-mm-dd hh:mm:ss'
          'mm-dd-yyyy hh:mm:ss'
          'yyyy-mm-dd hh:mm:ss AM/PM'
          'yyyy-mm-dd'
          'mm-dd-yyyy'
          ('-' or '/' are permitted).
  4. Hours, Minutes and Seconds can be excluded on daily monthly and weekly intervals.
  5. Providing a date in format 2015-01-01T09:10:00 or 2015-01-01T09:10:00.000 will produce a chart that assumes the dates are already in browser time zone ("static dates"). If however a ISO9601 string is passed in such as 2015-01-01T09:10:00Z or 2016-01-01T09:10:00-0500 then the date will be converted to UTC and dates displayed to the end user will be converted to their local timezone ("utc dates"). See TimeZones and Time Conversion for more details.
  6. While JavaScript getTime() returns milliseconds, note that standard Unix epoch is usually expression in seconds (1/1000 the value you get from JS). So please convert accordingly before setting DT.

Loading A Chart With Static Data ("Push")

STXChart can be statically initialized by explicitly including a properly formated data array when calling the function newChart(symbol,data). This will cause the chart to render using only the quotes stored in the data array.

For full implementation details, see the Push Method in the Data Loading tutorial.

Here's the most basic example of defining and loading a chart with static market data:

var myData=[
    {Date:"20140101", Close:100.3},{Date:"20140102", Close:100.4},{Date:"20140103", Close:100.2}
];

stxx.newChart("IBM", myData);

Attaching A QuoteFeed ("Pull")

The easiest way to support continuous on demand data (symbol change, streaming, pagination, comparisons) is to create a STX.QuoteFeed. This is an event driven model, where your code will receive callbacks whenever the chart requires data. This is all automatically handled, all you have to do is fill in the blanks by creating a "fetch" function and returning the requested data -- the same data format explained above is used.

For full implementation details, see the Pull Method in the Data Loading tutorial.

Streaming

If you have a streaming information service through a websocket, comet or other, see the Streaming Method in the Data Loading tutorial to learn how to push that data into the chart.

Styling The Chart

HTML5 canvases do not natively support CSS, but for convenience, STXChart has been developed so that rendered component styling can be controlled from a style sheet. For instance, the class stx_xaxis controls the font size, style and color of the text that is drawn in the x-axis. All "stx…" classes can be found in stx-chart.css. These classes must be accessible otherwise the chart will not render. Note that not every css capability is supported. Please see the CSS source code comments for specifics. Note that you can use STXChart#setStyle to programatically change chart styles.

Note, it is also possible to pass styles programatically. Either modify the STXChart#styles object or pass it in on initialization.

var stxx=new STXChart({container:..., styles:{"stx_xaxis":{"color":"red"}}});

A Complete Example

The following HTML example shows all the basic coding steps for displaying a chart.

First, a few housingkeeping steps are performed:

  • Link to the required CSS file, stx-chart.css or its equivalent. (Line 5)
  • Define a div container to hold the chart. (Line 12)
  • Include the charting library files. (Lines 15 and 16)

Next, the SDK is invoked as needed to display the chart:

  • Create a charting object. (Line 24)
  • Supply the charting data. (The data array is defined in Line 19 and used in line 28)
  • Display the chart. (Line 28)
<!doctype html>
<html>
<head>
<!-- Required - default style sheet -->
<link rel="stylesheet" type="text/css" href="css/stx-chart.css" media="screen"> 
</head>

<!-- On load, display the chart -->
<body onLoad="displayChart()">

<!-- This is your chart container. Position it anywhere, and in any way that you wish on your webpage. Please make position style=relative -->
<div class="chartContainer" style="width:800px;height:460px;position:relative;"></div>

<!-- include the charting library -->
<script src="js/stx.js"></script>
<script src="js/stxKernelOs.js"></script> 

<!-- statically define chart data in sampleData object -->
<script src="STX_SAMPLE_DAILY.js"></script>

<script>

// Create a STXChart object, the main object for drawing charts. 
var stxx=new STXChart({container:$$$(".chartContainer")}); 

// Display the chart (on-load callback)
function displayChart(){
    stxx.newChart("SPY", sampleData);
}

</script>
</body>
</html>

Also shown below, you can also place multiple charts on a page by simply providing each chart its own container (click on the JavaScript or HTML tags to see the underlying code).

Example:

More on Terminology

We use the term "interval" to describe the timeframe of the data that is sent into the charting engine (from your data server). Your market data server will probably provide 1 minute bars, 5 minute bars, daily bars, etc. Those are the intervals.

You can create any sort of bar by setting a "period" which compounds (multiplies) the interval. So for instance a 12 minute chart can be created with an interval of 3 (3 minute bars from your database) and then setting the "period" to 4 (3x4=12).

We use the term pushing data for taking a fixed set of local data and directly initializing the chart (i.e pushing the data into it).

We use the term pulling data for periodically fetching/pulling data from a remote source and augmenting the chart with it (either to the left or right side).

We use the term streaming data for asynchronously receiving "new" data, commonly from a socket, and adding it to the right side of the chart.

We use the term pagination for adding a new "page" of older data on the left side of the chart. Typically, an underlying "pagination event" (i.e. the endDate event) is delivered when the user has scrolled past the end of the chart to the left. Pagination can occur in different context, but usually it's by pulling data and augmenting the chart with a STX.QuoteFeed.

A STX.QuoteFeed object inserts data into the chart both for streaming and pagination. See Data Loading for details.

Within a chart instance (STXChart) we use the following terminology:

STXChart.Chart#masterData – The raw data loaded into the chart.

STXChart.Chart#dataSet – Data that the chart has consolidated (by periodicity) as well as comparisons series and calculated values such as indicators. dataSet represents all of the data available when the user pans from the beginning to the end of a chart (including sections of the chart that are off-screen).

STXChart.Chart#dataSegment – The "slice" of the dataSet that is displayed on the screen. As the user scrolls, the dataSegment is continually updated. It can be thought of as a "viewport" into the dataSet.

Studies are algorithms applied to the dataSet (the entire data, not just the displayed part) to provide an alternate view on (or measure of) of the dataset. They are computed infrequently so that scrolling is quick for the end user. Computed values are available programmatically by referencing either the dataSet or dataSegment.

A new dataSet is created whenever a new periodicity is selected. This allows indicators to automatically work with different periodicities.

We use $$$() as the shorthand for document.querySelector(). We use this to avoid conflict with jQuery style selectors $(). Of course feel free to use any kind of selector! Note that $$$(".selector") == $(".selector")[0]


Library Extensibility and Customization

The library supports many approaches for extending or customizing functionality. Which approach to apply depends on the goal and the context.

The Injection API: Prepend and Append

The most powerful and advanced way to extend or customize the libary is using the Injection API -- a core feature of the library.

The charting engine is essentially an animation engine. When a user scrolls or pans a chart, it is redrawn at animation speeds, providing the appearance of a smoothly moving chart in much the same way that a video game works. STXChart#draw is the rendering function that is called to animate the chart. Therefore, the most common method for extending chart functionality is to extend the draw() function itself. This can be done easily with the Injection API.

Why provide a high-powered injection API? A significant problem for API vendors is addressing the need for customization by each developer who licenses the API. Customization requests force an API to grow in size and complexity, potentially breaking other customizations and causing a proliferation of unit tests.

Traditionally, API vendors have taken a few approaches to this dilemma. Many vendors simple say "no" to any customization request that would take the API too far off course. Those who say "yes" end up creating complex configuration files, or the API ends up with hundreds of toggles and entitlements to turn custom functionality on or off.

Another approach is to urge customers to license and modify source code. The problem with source code modification is that it creates a huge burden on the customer development team when a new release arrives. Too often source code licensees end up years behind and do not benefit from new vendor releases.

The Injection API solves these problems by providing the same flexibility as source code modification without the risks or development effort. Each customer can create custom source code and still maintain forward compatibility with new releases. Ultimately it allows developers to become self-sufficient and less dependent on the vendor.

The "Injection API" provides prepend and append functionality to any built-in method. Essentially what this means is that a developer can write code that will be run either before (prepend) or after (append) any internal STXChart function (such as draw() or mouseMove()). This gives developers the ability to supplement, override or ignore any of the built in functionality.

User defined prepend or append functions are called with the same arguments as the built in function. "this" will also be set to the actual STXChart object (i.e. stxx). In this manner, the user defined function behaves exactly as if it were a member function of the object itself. A prepended function can choose to bypass the built in method entirely by returning "true", thus providing developers with the ability to completely override native behavior.

The syntax for the injection API is as follows. In this example a developer has chosen to do something every time the chart is drawn. The code in the attached function will be called after stxx.draw(). Here we simply move a global element so that it is aligned with the cursor X position (this.cx):

STXChart.prototype.append("draw", function(){

  myDiv.style.left=this.cx+"px";

});

In this example the developer has chosen to develop their own custom yaxis. By returning "true" the built-in stxx.createYAxis() functionality is completely bypassed:

STXChart.prototype.prepend("createYAxis",function(){

  // draw my own y axis
  return true;

});

Note that you may prepend or append multiple functions. Each injected function is stacked "outward" (daisy-chained) from the core function.

prepend >> prepend >> prepend >> function << append << append << append

You may prepend/append either to STXChart.prototype or directly to a STXChart instance.

Each injectable method in a class is clearly identified with an INJECTABLE tag in this documentation. Some of these methods can be called directly when designing your charting application, but some are only intended to be used internally by the library kernel and shouldn't be directly called by a developer. To this end, we have separated external methods from internal kernel methods. Internal methods can be found under the STXChart Class section. External methods have been grouped together under the Advanced Injections section.

See the Popular API injections, Customization Basics and Animation Loop outline tutorials for additional guidance and examples.

Change Callbacks

Developers may register to receive events whenever the user adjusts the layout of a chart or whenever a drawing (vector) is added or removed. This is accomplished by registering a callback:

stxx.addEventListener(eventType, yourCallbackFunction);

See STXChart#callbacks for a complete list. Common events include:

layout - A change to the layout of the screen has occurred.

drawing - A drawing operation has occurred.

symbolChange - The chart symbol has changed.

Suporting Dialogs

If you are building UI and want the chart to stop responding to mouse/touch events during a modal dialog, use STXChart#modalBegin to "turn off" chart interactivity. All mouse or touch events within the chart area will be ignored until STXChart#modalEnd is called.

Drawing

A full set of drawing tools is included with the library. See STX.Drawing for a complete list and full details. Custom drawing tools can also be created by following the API.

Drawings are anchored on the x-axis by the date and on the y-axis by the price. This ensures that drawings move as the chart is moved.

Most drawings (for instance a segment) require 2 sets of (date,price) to define the beginning and end points.

The following illustrates how simple it is to programmatically create a drawing:

stxx.createDrawing("segment",{
  "pnl":"chart",            // panel for the chart
  "d0":"201209230000",        // beginning x-axis date value
  "d1","201202230000",        // ending x-axis date value
  "v0": 144.90,                // beginning y-axis price value
  "v1" 142                    // ending y-axis price value
});

See Custom Drawing Tools for additional details on how to create custom drawings.

Customizing Market Defaults

By default, the system supports US Equity market holidays and hours as well as Forex and Futures markets that trade 24 hours.

See the Market Hours and the Charts tutorial if you need to adjust the market defaults for different trading sessions.

Internationalization ( Localization and Translation )

Localization is used to display prices and dates in locale specific format and is managed by the library using the ECMA-402 Intl standard. Although not yet natively supported by all browsers (Chrome and IE11 at the moment); localization can still be implemented to support all browsers through the inclusion of the Intl.js polyfill; packaged with this library.

Translation is used to display labels in different languages. By default the library supports the following : English (en) Arabic (ar) French (fr) German (de) Hungarian (hu) Italian (it), Portuguese (pu), Russian (ru) Spanish (es), Chinese (zh), Japanese (ja)

See the Internationalization -- How to guide for implementation details.

Comparisons and Series

The series capability allows developers to add multiple unrelated data sets as overlays or comparisons, including multiple y-axis.

See our Series and Comparisons tutorial for complete details.

Creating Custom Studies and Indicators

The Study library (STX.Studies.studyLibrary) provides an interface that developers can use to build custom Studies or Indicators. Studies and Indicators may be displayed in a dedicated panel or as overlays on the chart. Convenience functions are provided for drawing lines based on a series (STXStudies.displaySeriesAsLine) or histograms (STXStudies.createHistogram). Other visualizations can be coded with some knowledge of HTML5 canvas.

See our Studies tutorial for complete details.

Markers / Events

Markers provide developers with the ability to superimpose DOM (html) elements directly on the chart. Markers can be configured to move with the chart as a user scrolls and zooms.

See our Markers tutorial for complete implementation details and examples.

Trade From Chart

Trade from the chart (TFC) is a module that allows chart users to place trades directly from their charts. Users manipulate graphical tools with their mouse or fingers. Tools are available for placing market orders, limit and stop orders, and multi-leg orders. Unlike traditional "ticket" based online trading, users set their price level graphically and interactively in the context of the security. This is a quicker and more natural approach to trading.

For additional details on this feature see the Trade From Chart tutorial.

More on Customization

For more details on how to extend chart functionality, see the Customization Basics tutorial.


Compatibility

chartiq.html is compatible with Chrome, Firefox, Safari & Internet Explorer version 11 or greater.

stx-advanced.html is compatible down to IE 8 (using the included excanvas.js) as well as the native Android browser (Android versions 4.2 and earlier).

Note: See IE 8 Compatibility and Requirements if you will be running the demo template on IE8.


Contact

dev@chartiq.com