HTML5 Charting Library Technical Information

While there are many HTML5-based charting packages available to developers, ChartIQ stands alone in being purpose-built for high-end financial charting and technical analysis.

A primary difference between ChartIQ and generic charting packages is that those packages provide widgets as opposed to an API. Oftentimes APIs are exposed but generally the API is designed to accommodate configuration of the widget. ChartIQ, by contrast, offers a full-fledged API that allows developers to build custom applications that require professional grade charting componentry.

Selecting ChartIQ will allow your developers to spend their time on business integration and feature development rather than building out an intermediary infrastructure layer on top of a generic charting package.

High Performance

ChartIQ has been designed from the ground up for performance on the Canvas, eschewing lower-performing SVG. The results are easy to see. Designed first for high-resolution, low-power devices (Retina iPads, etc), ChartIQ’s effortless user experience is apparent on all devices and platforms.

Open a full-screen chart with ChartIQ zoomed out to show 5-10 years of daily candlesticks. Grab the chart with your mouse and pan back and forth. Now do the same with any competing HTML5 charting library. Compared with ChartIQ’s HTML5 canvas charting, SVG performance degrades exponentially as elements are added to the chart. Complex charts with indicators, drawings, and other visualizations cannot effectively be supported on SVG. ChartIQ has further maximized performance by tweaking rendering algorithms. The result is smooth scrolling even on today’s large display systems and underpowered mobile devices.

Mobile Performance

According to recent studies, the vast majority of traders rely on mobile access to stay in touch with the markets, across smartphones, tablet, or convertible ultrabook. While technically any HTML5 chart will display on a modern smartphone or tablet, only ChartIQ was developed mobile-first and supports effortless performance at full-screen resolution (including Apple Retina displays) with large data sets. ChartIQ also achieves excellent performance when embedded in to a native iOS, Android, or Windows 8 application, where most other libraries have performance degradation.

Touch User Interface

Smartphones, Tablets, and now desktop computers all share one key characteristic – a touchscreen. Microsoft predicts that 80% of all new PCs will have touchscreens by 2014. ChartIQ is the only charting library (HTML5 or otherwise) that has a completely touch-compatible user interface, and supports iOS, Android, and Microsoft Windows 8 touch APIs. While some charting systems support crude controls for touch zooming or tapping, only ChartIQ makes every feature – from menuing, to drawing, zooming, etc – fully available via a multi-touch interface that is currently used by thousands of mobile customers. ChartIQ is also the only charting tool that supports “All In One” computers so that users can seamlessly switch between mouse and touch control.

100% Code Injection API

Only ChartIQ provides a complete code injection API, which allows developers to customize and extend core functionality without altering the underlying source code. This architecture provides an easily extensible charting platform, which will remain compatible with frequent functionality updates from ChartIQ. With other charting libraries, extending functionality (beyond basic look/feel configuration) requires source alteration – resulting in manual merging and troubleshooting at upgrade time, often without developer support (as the source has been modified).

The following are a few examples of extensions that might easily be accomplished with ChartIQ’s architecture without source modification:

  • Trade from the chart
  • Building your own data visualizations with proprietary data sets
  • Plotting open positions (long/short, options, etc)

FinTech Developer Support

ChartIQ’s support is provided by developers with decades of trading system experience. The questions and engineering challenges that arise during development of a complex, chart-driven trading environment require the type of domain expertise not generally available from the all-purpose charting vendors. From handling new asset classes to building advanced drawing tools (Gann fans, etc), ChartIQ technical support has the domain depth and expertise required.

Periodicity Support

While all charting libraries support loading in of n-interval timeframe data, all but ChartIQ require you to have precalculated interval bars for each supported periodicity (1min, 3min, 5min, etc). With ChartIQ, n-interval periodicity is calculated on the fly requiring only End of Day and 1min intervals, dramatically reducing engineering work and data storage infrastructure. From an end user perspective, periodicity calculated on the fly means not reloading a data set from the server for every setting change, keeping performance at its peak.

Internationalization / Locale Support

While some charting libraries support internationalization, most require developers to manually build out and support per-locale translations. ChartIQ allows developers to simply specify the target locale, and we take care of the rest – translation, time/date and price formatting leveraging the ECMA-402 standard.

Chart Types

ChartIQ includes five chart types by default – candlestick, bar, colored bar, line and wave. ChartIQ also includes an API for developing custom and/or proprietary chart types, beyond the included chart types.

Drawing Tools and Drawing Infrastructure

ChartIQ comes standard with a full range of drawing and annotation tools not found in competing platforms. The current list includes 11 drawing tools and additional drawing tools are frequently built and included in quarterly updates.

True Drawing Vectors

As periodicity is changed by the user (from 1min to 1mon and any step in between), all drawings are kept mathematically true, ensuring that items like trend lines remain true.

Magnet Mode

Magnet mode allows users to precisely draw trend lines and other drawings, snapped exactly to the OHLC values of the chart.

Drawing Tool API

In addition, an API is provided to easily create your own custom drawing tools without requiring modifications to the underlying source (see 100% Code Injection API)

Server-Side Synchronization

The API releases events that can be captured whenever a user modifies their view or creates a drawing. Leveraging these events, ChartIQ can store watch lists as well as drawings and annotations server-side, synchronized to a users’ account. This allows users to access their annotated charts and watch lists from any device – regardless of where the annotations or watch lists were created.

Social Integration

ChartIQ includes two levels of social integration – Social Posting Library and Social Particpation Panel

Social Posting Library

ChartIQ includes a client-side library and server-side reference implementation to custom watermark and upload images from the charting application to the licensee’s servers. This can be used to publish to a social network, web page permalink, etc.

Social Participation Panel

ChartIQ’s Social Participation Panel includes a full Twitter-like client, including the ability to initiate messages, attached charts to messages, view message streams, search for users and symbols, follow, like, etc. By default, the panel is connected to StockTwits, but can be connected to open and proprietary social networks.

Indicators and Indicator Infrastructure

ChartIQ includes a robust library of technical indicators in addition to an extensible architecture to develop or port your own indicators.

Indicator Library

More than 100 technical indicators are included. See our Built-In Studies Reference Guide. New indicators are created regularly and provided to ChartIQ licensees as a part of their support package.

Indicator Infrastructure

More important than ChartIQ’s list of prebuilt indicators, is a full architecture to build your own. Indicators can be built as separate panels (e.g MACD), overlays (e.g. moving averages), and underlays (e.g. volume). This allows you to only focus your time on the underlying indicator algorithm itself, and have ChartIQ handle the complex visualizations.

As an exercise in how important this architecture is, we invite prospective licensees to have their developers scope out building Ichimoku clouds on any other charting platform.

CSS Styling

ChartIQ is able to derive its styling directly from CSS, with a clean separation from the code, which empowers developers to style the charts independent of developers and code cycles. “Decoration” objects (such as zoom controls or crosshairs) are all native HTML elements that can be customized by web designers.

Usability Features

  • Built in support for X and Y crosshairs
  • Resizeable study panels
  • Built in study dialog with color picker
  • Multiple Views / Layouts – user-defined saved views allow users to switch between multiple screen configurations (studies, periodicity, chart types, etc)

Professional-Grade Financial Calculations

  • Drawings remap themselves for split adjusted prices
  • Intraday drawings display correctly on daily charts and vice versa
  • Y-Axis automatically detects signficant digits in data sets, thus supporting very large (BRK.A) and very small (EURUSD) prices and price increments
  • The STX.Plotter widget maximizes canvas drawing efficiency allowing ChartIQ to support larger data sets and wider screens
  • Built in support for market holidays and half days
  • Built in support for forex trading hours
  • Ability to customize opening and closing times for international exchanges

Convenience Features for Developers

  • Date/tick/pixel translation functions – Developers can instantly derive the X canvas pixel given a date/time or vice versa.
  • Likewise, given a price a developer can instantly determine the Y canvas pixel. Such functionality is critical for any high-level integration efforts.
  • Programmatically zoom or pan the chart. Programmatically move the chart to the home, the end, or any number of bars from either side.
  • Support for loading additional chunks of historical data when a user scroll to the end of a chart.

Architecture Diagram

Browsers: IE8+, Mobile Safari, Android and all modern browsers. Devices: Phone, tablet, desktop, “all in one” computers. Native applications: iOS, Android, Windows, Java, C# and Chrome App.

ChartIQ HTML5 Developer Architecture Diagram


Looking for Dev Support?

Contact Us

Fill out the form and we will get back to you pronto!
  • This field is for validation purposes and should be left unchanged.

What’s better than a Charting Library demo?

A free 14-day Charting Library trial. That’s right, 14 days to do anything you want, including:

  • Connecting your own data feed
  • Allowing your team to test code
  • Customizing the UI to fit your brand
    …and more

Simply fill out the form and a ChartIQ representative will assist you with receiving your 14-day Charting Library trial.

14 Day Free Trial