WARNING: AngularJS is no longer supported
If you are looking start a new project it is STRONGLY advised to not use AngularJS. Development on the AngularJS framework has ended and it is currently in a Long Term Support period. For more inforation see the official support notice. If you are looking to start a new Angular project, take a look at Angular and TypeScript. Instead of this project, it is highly recommended that you look at our Anguar Seed project
Questions and support
If you have questions or get stuck using this project or the ChartIQ library, the dev support team can be reached through email@example.com.
A basic build of the ChartIQ library within the Angular 1.5.7 framework. This provides an example of how to implement the most common elements in the charting library. This is not a comprehensive example, more like a good starting point for an Angular developer.
This is broken up into three different examples.
Demonstrates how to implement a chart as an angular component. This example has a preset symbol and shows how to access a "quotefeed" through an angular service. (The quotefeed in this example uses fake market data. You would write a replacement quotefeed to connect with your data).
Takes example-1 and adds some basic UI. This UI includes shows how to change the symbol, periodicity, and chart type. It demonstrates how to create a toggle control that turns crosshairs of and on. It shows how to add a comparison symbol to a chart.
Takes example-2 and adds more advanced UI features that require user input (dialogs). This UI demonstrates how to add a study, make custom themes, and change the timezone.
These examples provide a good overview of how to use ChartIQ the "Angular way". Angular components are nested and communicate with each other.
A copy of the ChartIQ library, version 3.0+ is required for this to work out of the box. To get your copy, visit https://www.chartiq.com/products/html5-charting-library/ to see a demo and get in touch with us.
Copy (or symlink) the ChartIQ library's js and css folders inside
npm install # This will install all dependencies npm start # This will start the local dev server
This browser will automatically launch with the url
You can change the 1 in
angular-example-1.html to preview the other examples.
Contributing to this project
If you wish to contribute to this project, fork it and send us a pull request. We'd love to see what it is you want to do with our charting tools!