Code Monkey home page Code Monkey logo

angular-charts-data's Introduction

โšก Angular Charts Data

  • Angular app using Chart.js to display free Coinranking API data
  • Tutorial code from The Code Angle with additional chart, pan/zoom and some other code changes
  • Note: to open web links in a new window use: ctrl+click on link

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

๐Ÿ“„ Table of contents

๐Ÿ“š General info

  • To get temporary access to the CORS proxy url it is necessary to click a request button at https://cors-anywhere.herokuapp.com/corsdemo
  • Chart types: ArcElement, LineElement, BarElement, PointElement, BarController, BubbleController, DoughnutController, LineController, PieController, PolarAreaController, RadarController, ScatterController, CategoryScale, LinearScale, LogarithmicScale, RadialLinearScale, TimeScale, TimeSeriesScale, Decimation, Filler, Legend, Title, Tooltip, SubTitle
  • toPromise used; a constructor that resolves to ZoneAwarePromise() from zone.js at run time in the browser.

๐Ÿ“ท Screenshots

Example screenshot

๐Ÿ“ถ Technologies

๐Ÿ’พ Setup

  • Run npm i to install dependencies
  • Create an account & get a Developers API key from Coinranking
  • Add API key to services\authService
  • Enables temporary CORS issue workaround via https://cors-anywhere.herokuapp.com/corsdemo
  • 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 'ng build' to create a build file

๐Ÿ’ป Code Examples

  • extract from app.component.ts to create chart2 data
this.chart2 = new Chart('canvas2', {
  type: 'bar',
  data: {
    labels: this.coinName,
    datasets: [
      {
        data: this.coinPrice,
        borderColor: '#0d47a1',
        label: 'Bar Chart: Crypto Prices',
        backgroundColor: 'rgba(93, 175, 89, 0.1)',
        borderWidth: 1,
      },
    ],
  },
});

๐Ÿ†’ Features

  • Charts.js has other types of charts and lots of options that can be configured.

๐Ÿ“‹ Status & To-Do List

  • Status: Working
  • To-Do: Could add data types to replace 'any'

๐Ÿ‘ Inspiration

๐Ÿ“ License

  • N/A

โœ‰๏ธ Contact

angular-charts-data's People

Contributors

andrewjbateman avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.