UI Methodologies

Note: All of these methodologies use the same underlying library API. This is a decision on (1) how you want your app to look and (2) how you wish to architect your app.

1) Plug-and-play (Copy & Paste a sample HTML template)

The ChartIQ Library package (zip file) contains two main sample templates in the examples/templates directory:

  • sample-template-advanced.html, a fully functional chart and user interface intended for desktops and other large screens. Use sample-template-advanced.html if you don't want to build your own user interface.
  • sample-template-basic.html, a stripped down example. It is easier to understand how ChartIQ uses Web Components in this simplified example.

They are built using W3 Web Components and require JQuery.

Before you start working with the Web Components, please review the Web Component Interface tutorial.

The templates are provided as sample code to illustrate how the raw library API can be used to create web components for your UI. These examples are fully functional and can be used unchanged as provided. You can also just use them as reference to write other interfaces, or modified them as needed to meet your needs. We can provide all the code in plain text for you to review. Just ask!

To use a sample HTML template, copy it from the examples/templates directory into the root directory of the library package, and customize the look and feel with CSS and by adding, removing or modifying any Web Components functionality.

More details on the sample Web Components provided with your library package can be found here: WebComponents

Customization guidelines and instructions can be found here: Customization Basics

2) Starter Kit (Clone a ChartIQ "starter kit" or "sample application")

If you're programming in Angular, React, Java or developing a mobile application, and want to see some samples, you will probably want to review a ChartIQ starter kit. These are public Github repos that you can clone or fork. Each basic project contains examples to demonstrate ChartIQ's recommended approach for the framework and can be used for guidance to build your own.

Framework Starter kits:

Here is a good tutorial to review on framework integrations: Integrating with Frameworks.

Mobile Sample Apps:

Here is a good tutorial to review on mobile integrations: Getting Started on Mobile.

Note: Java, .Net, Electron, CEF, other ways to encapsulate the library? We got you covered! See Webviews and Containers.

3) Advanced (Use the raw API)

With the library API, you can control the chart any way that you desire. It is easy to retrofit an existing UI to use ChartIQ, or to build your own UI from scratch. This might be the best path if you have a complicated application (for instance an app that simultaneously display multiple interactive charts).

helloworld.html demonstrates how to create a chart with just a few lines of code.

See the Implementing UI tutorial for more information.


Next Steps: