andrewjbateman / angular-data-dashboard

:clipboard: Angular dashboard to display data using Google charts

⚡ Angular Data Dashboard

• Angular app using Google Charts to create a dashboard with a line-chart, pie-chart and table-chart.
• Tutorial code from Jay Raj at jscrambler - see 👏 Inspiration below.
• Note: to open web links in a new window use: ctrl+click on link

📄 Table of contents

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

📚 General info

• Google chart tools have a wide range of interactive charts and data tools.
• The Google Charts script files from https://www.gstatic.com/charts/loader.js are loaded into assets/js/loader.js and this path is included in the scripts section of the angular.json file.
• A google-chart.service module is added so the Google Charts script can be used by multiple charts in the app.

📷 Screenshots

📶 Technologies

• Angular framework v15
• Google Charts based on pure html/svg.

💾 Setup

• Run npm i to install dependencies.
• Run ng serve for a dev server. Navigate to http://localhost:4200/. The app will automatically reload if you change any of the source files.
• Run npm run build to build the project. The build artifacts will be stored in the docs/ directory.

💻 Code Examples

// method using the Google Charts library with the gLib variable
// create a new chart using the LineChart method, passing in the container div to show the line chart.
private drawChart() {
  const data = this.gLib.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses'],
    ['2004',  1000,      400],
    ['2005',  1170,      460],
    ['2006',  660,       1120],
    ['2007',  1030,      540]
  ]);

  const options = {
    title: 'Company Performance',
    curveType: 'function',
    legend: { position: 'bottom' }
  };

  const chart = new this.gLib.visualization.LineChart(document.getElementById('divLineChart'));

  chart.draw(data, options);
}j

🆒 Features

• Cross-browser compatibility.
• Dashboards can be used to manage multiple charts that share the same data.
• Data can also be fetched from a REST API endpoint or database service call.

📋 Status & To-Do List

• Status: Working & deployed to GitHub.
• To-Do: Nothing
• Note: App is designed for PC/tablet and does not resize well for phones - could use angular mat cards or flex-grid to make it fully responsive

👏 Inspiration

• jscrambler blog by Jay Raj: Creating a Sales Dashboard Using Angular and Google Charts
• Google Charts Developers Guide

📁 License

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

✉️ Contact

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