Integrating the Library with Frameworks

JavaScript frameworks have become widely utilized over the last few years. The ChartIQ library can be integrated with a range of different frameworks. This tutorial will cover best practices for integrating the ChartIQ library with frameworks in general. For specific examples, check out one of our seed projects:

React

AngularJS

Angular

There are several reasons why you might want to integrate the ChartIQ library with a framework:

  • You want a completely different look and feel from what the web components provide.
  • You're integrating the charts into an existing application that is already implemented in a framework
  • You prefer a deep integration with a UI framework for more control over the individual components.

Whatever your reason, integration with a framework is straightforward if you follow the best practices that are outlined in this tutorial.

Best Practices

  1. We recommend that developers do not use the built in web components we provide with the ChartIQ library when using a framework (sample-template-advanced.html).

The web components are tempting because they have built in style and functionality, but unless your framework has inherent support for W3C web components, they will more than likely complicate your project. Instead of using ChartIQ's web components, build your own components using your preferred framework by interfacing directly with the core functionality of the library. Use the seed projects for a head start. Note: even if you're using a framework that we don't provide a seed project, you should still review the seed projects to get an understanding for how to build components.

  1. Utilize callbacks appropriately to ensure the UI is in sync with the chart.

One of the most common issues when integrating the library with a framework is that the UI and the chart get out of sync after the user changes something. Many frameworks rely on digest loops that often only run under certain circumstances. If you run into this problem, read the documentation for your framework and identify what you can do to manually trigger a digest loop to force the UI to update. Built in callbacks in many ChartIQ library functions are a perfect place to manually trigger a digest loop. You can also use an injection on "draw" in order to ensure that you have the most accurate library state. Please contact our support if you have any trouble!

  1. When utilizing data binding features from your framework, bind directly to the library wherever possible.

In other words, try to avoid using an intermediary "store". For instance, bind directly to stx.layout.chartType rather than to your own chartType variable. This removes an often useless layer of computation or data reassignment, making your program more efficient. Binding directly to the data in the library will also lessen the chance of your UI getting out of sync.

  1. Follow the best practices for your framework.

This is sometimes refered to as programming "idiomatically". Once you choose a framework, you should commit to doing things their way. This will make your code more consistent and readable, much easier to debug, and ensure that you are getting the most out of your framework. For example, different data flow differs among frameworks. Frameworks also often have their own way of looping through collections of data. Whatever way is considered to be most in line with your framework is the way you should do it. Treat the library as a pure JavaScript library (not a UI library) and make calls when needed.

  1. Utilize any debugging tools that are specifically for your framework.

Most popular frameworks have debugging tools made specifically for that framework. Some examples of these are chrome extensions for Vue.js and Angular. Consider adding these tools to your development environment to make it easier to view changes within your framework components.

Next Steps:

  • Clone a seed project!

React

AngularJS

Angular