andrewjbateman / ionic-angular-stock-data

:clipboard: Ionic app to chart historic stock prices from a financial data API. Take care if updating to ng16 or ng17 as chart.js and ng2-charts not Ivy compatible.

⚡ Ionic Angular Charts

• App to chart historic stock prices from the FMP financial data API using the Ionic framework.
• Includes tutorial from Simon Grimm at Devdactic - see 👏 Inspiration below. Changes added to show more API data using another http get request
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

• ⚡ Ionic Angular Charts
  • 📄 Table of contents
  • 📚 General info
  • 📷 Screenshots
  • 📶 Technologies
  • 💾 Setup
  • 💻 Code Examples
  • 🆒 Features
  • 📋 Status & To-do list
  • 👏 Inspiration
  • 📁 License
  • ✉️ Contact

📚 General info

• Tutorial code changed to show example financial data on initialisation and clear the stock entry field (TSLA is shown) as I preferred this to initially seeing an empty graph.
• Tutorial code changed to avoid use of string literals - const history = res['historical']; caused a typescript error.
• Note: I had to reverse both x and y array values (date & stock price) so data would not display backwards.
• Important note on versions: This only works with ng2-charts v2.4.2, chart.js v2.9.4 and chartjs-plugin-zoom v0.7.7. Updating to the latest versions of these chart-based dependencies will mean this app does NOT work without major reconfiguration.
• FMP financial data API free plan limited to 250 requests a day.

📷 Screenshots

📶 Technologies

• Ionic v6 framework.
• Ionic/angular v6
• Angular framework v15
• rxjs library v7 reactive prrogramming.
• ng2-charts v2 line & bar charts.
• chart.js v2 datasets.
• chartjs-plugin-zoom v0.7.7
• FMP financial data API

💾 Setup

• Install dependencies using npm i
• API key: sign up with FMP financial data API to get an API key.
• Add API key to environments files
• To start the server on localhost://8100 type: 'ionic serve -o'
• Run npm run build to build the project. The build artifacts will be stored in the dist/ directory.

💻 Code Examples

• function to get data from API. Only stock variable is defined by user.

getData() {
  this.http
    .get(`
      https://financialmodelingprep.com/api/v3/historical-price-full/
      ${this.stock}?to=2022-02-02&from=2017-02-02`).subscribe(res => {
        const history = res['historical'];

        this.chartLabels = [];
        this.chartData[0].data = [];

        for (const entry of history) {
          this.chartLabels.push(entry.date);
          this.chartData[0].data.push(entry.close);
        }
      });
}

🆒 Features

• ng2-charts has 10 types of charts: line, bar, doughnut, radar, pie, polarArea, bubble, scatter, dynamic & financial. In this app the user can choose between line (default) and bar charts.

📋 Status & To-do list

• Status: Working
• To-do: Nothing

👏 Inspiration

• Simon Grimm Devdactic Youtube video 'How to Build Ionic 4 Apps with Chart.js'
• Written version of tutorial: How to Build Ionic 4 Apps with Chart.js
• Github repo: antoinevulcain/Financial-Modeling-Prep-API
• JavaScript Array reverse() Method

📁 License

• This project is licensed under the terms of the MIT license.

✉️ Contact

• Repo created by ABateman, email: [email protected]