Blog

Nov 27 2019

Our responsive JavaScript Charting Library for stocks

Our high performance, responsive, and lightweight Charting Library provides firms with a powerful, yet developer-friendly, toolkit that can be easily integrated across platforms. In our latest webinar, our Chief Technology Officer - Chris Harrison, and Senior Sales Director - Mark Wator, gave a detailed look at our interactive Charting Library. Didn’t catch the webinar? You can watch it here. We’ll also go over what was covered below.

Why the need for a new charting solution?

Prior to creating our own JavaScript Charting Library, we relied on off-the-shelf third party charting services. These solutions had issues with performance and lacked the functionality we needed. We tried looking for other charting providers but found that there wasn’t a solution out there that could deliver the high performance and responsive charting library we needed to power our products. We thought, “If you want something done right - do it yourself,” so we did.

While the core driver in creating a new charting solution was to eliminate 3rd party dependencies, we soon realized this was an industry-wide issue. To solve this, we wanted to develop a framework that would not only fit our needs but one that could serve many hosts and offer various private-label solutions.

cmdtyView Market Data Platform

Technical Overview of the new Charting Library

Our responsive Charting Library was built from the ground up in plain vanilla JavaScript, which means there are no 3rd party library dependencies - but it’s compatible with all popular frameworks if you prefer to use one. The library is transparent and well-documented to ensure success. You can view our documentation here.

The library is 100% API-based and supports different data types, including real-time streaming data and snapshot - everything from end-of-day pricing to something that updates once a month, every five minutes, etc. We also chose to utilize HTML5 Canvas instead of SVG as HTML5 Canvas charts are more equipped to handle the thousands of data points that real-time financial charting and in-depth historical data analysis can require.

The library supports all modern-day browsers including:

  • Chrome 61
  • Firefox 60
  • Safari 11
  • Edge 15
  • Electron 2

Functional Overview of the new Charting Library

Currently, the Charting Library has over 100 studies, written in our own scripting language, which can be added to your charts. We will be adding additional studies, annotations, and plot types in the future.

JaveScript Charting Library Studies

The library also supports basic or complex expressions. You can type an individual symbol or root into the chart, or you can type something complex like a crush spread or a spark spread. Essentially, any mathematical expression you can type within excel will work in the Charting Library.

In addition to all of the basic things you see in charts such as panning and zooming, we also use dynamic data retrieval, which is an efficient way in which we grab additional data from our servers. Primarily we grab enough data to build the screen, then as the user scrolls, we grab additional chunks of data. All of that is based around the desire to create something that’s high performance.

Additional features include any interval (ticket, intra-day, etc.) or range (1 day, 5 day, 15 year, 20 year, etc.), multi-scale support, multiple panes, and real-time trading execution through CQG.

You can explore the functionality of the Charting Library on our demo website.

How to implement this charting into your own products

Our next-generation Charting Library provides firms with a powerful, yet developer-friendly, toolkit that can be easily integrated across all of your platforms - allowing you to spend more time on customer acquisition and conversion.

Our library works with the data you already have or can be powered by Barchart’s data ecosystem. You can seamlessly package charting into a Digital Solution to power customer-facing applications with dynamic data, tools, and market intelligence.

We even use this Charting Library across our own platforms, from our financial portal Barchart.com, to our flagship commodity trading platform, cmdtyView.


cmdtyView featuring our HTML5 Charting Library.jpg

What lies ahead?

Our Charting Library is a high-priority initiative going forward. We will continue to enhance and add features with the goal of building the best charting solutions in the commodity space.

Some improvements we already have in the queue:

  • Additional studies, annotations, and plot types
  • Intersection alerts
  • Seasonals and Forward Curves
  • Expose our own scripting language
  • Supporting for additional brokers / execution platforms
  • Adjust features based on customer feedback

If you’re interested in learning more about our Charting Library please contact us at solutions@barchart.com. To demo Barchart’s interactive Charting Library, please click here.

VIEW ALL POSTS