UI Development Methodologies

The following user interface development methodologies use the same underlying library API. Your choice of methodology depends on how you want to architect your application.

Sample templates

A great way to start is to copy and modify a sample HTML template.

The library contains two main sample templates in the examples/templates directory:

  • sample-template-advanced.html — A full-featured chart and user interface intended for desktops and other large screens. Use sample-template-advanced.html if you want a complete, ready-made chart application.
  • sample-template-basic.html — A chart with a simplified user interface. Use sample-template-basic.html to create a less complex application with a minimum of UI clutter.

Both tempates are built using W3C Web Components.

To learn more about ChartIQ's web components, see the Web Component Interface tutorial.

The templates are provided as sample code to illustrate how web components can be used to create a user interface. But the example templates are also fully functional applications; use them as is, modify them to suit your requirements, or just refer to them for guidance while creating your own UI.

To use a sample HTML template, copy it from the examples/templates directory into the root directory of the library. Customize the functionality by adding, removing, or modifying web components. Customize the look and feel with CSS.

Customization guidelines and instructions can be found in the Customization Basics tutorial.

See the WebComponents namespace API documentation for details on the web components provided with the library.

webpack

A webpack bundling example of the charting library together with an advanced webpack template is located in the src directory of the library. A webpack.config.js file is in the chartiq folder along with a package.json file. For more on webpack, see the Module Bundlers tutorial.

GitHub projects

If you're programming in Angular, React, or a mobile framework, take a look at ChartIQ's public repos on GitHub.

Angular and React

The Angular and React projects are full-featured sample applications that are the equivalent of our sample-template-advanced.html template. Clone or fork a project to get started building your own charting UI:

See the Integrating the Library with Frameworks tutorial for more information.

iOS and Android

Get a head start on iOS and Android development with our mobile projects:

See the Getting Started on Mobile tutorial for information on mobile integrations.

Note: If you're using Java, .NET, Electron, CEF, or other ways of encapsulating the library, see the WebViews and HTML5 Containers tutorial.

Library API

Craft a custom UI using the library API in your programming environment.

With the library API, you can completely control the chart from the user interface. Use the API to retrofit an existing UI or build your own UI from scratch.

The helloworld.html template (in the root folder of your library) demonstrates how to create a chart with just a few lines of API code.

See the Implementing a Chart UI tutorial for more information.

We're happy to help. Contact support@chartiq.com if you have questions about your UI implementation.


Next Steps: