Skip to content

📋 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.

License

Notifications You must be signed in to change notification settings

AndrewJBateman/ionic-angular-stock-data

Repository files navigation

⚡ Ionic Angular Charts

GitHub repo size GitHub pull requests GitHub Repo stars GitHub last commit

📄 Table of contents

📚 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

screenshot

📶 Technologies

💾 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

📁 License

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

✉️ Contact

About

📋 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.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published