UI Development Methodologies
All of the following user interface development methodologies leverage the ChartIQ API. Your choice of methodology depends on how you want to architect your application.
A great way to start is to copy and modify one of our HTML templates. The template files are in the examples/templates folder of the library.
The primary templates are:
- sample-template-advanced.html — A full-featured chart application with a comprehensive user interface. Use sample-template-advanced.html on desktops and other devices with large screens.
- sample-template-basic.html — Similar to the advanced chart but with fewer drawing tools, studies, and display options. Use sample-template-basic.html to create a less complex chart application.
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.
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.
If you're programming in Angular, React, Vue, or a mobile framework, take a look at ChartIQ's public repos on GitHub.
Angular, React, and Vue
The Angular, React, and Vue projects are collections of sample applications that range from a basic chart with no UI to our Active Trader workstation. Clone or fork a project to get started building your own charting application:
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, the Chromium Embedded Framework (CEF), or other ways of encapsulating the library, see the WebViews and HTML5 Containers tutorial.
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 firstname.lastname@example.org if you have questions about your UI implementation.