Skip to content
📊 Dashboard for Angular (versions 4 +)
TypeScript CSS HTML JavaScript
Branch: master
Clone or download
Latest commit ec59a44 Jun 4, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
.idea Refactors Jul 13, 2017
dist Input data from code Jul 15, 2017
iframe Add toggle markers and area to linear charts menu Jun 12, 2017
src Refactors Jul 22, 2017
temp Refactors Jul 22, 2017
.angular-cli.json Initial commit May 29, 2017
.editorconfig Initial commit May 29, 2017
.gitignore Initial commit May 29, 2017
.travis.yml Fix typo en Jun 4, 2018
LICENSE.txt Initial commit May 29, 2017 Fix typo en Jun 4, 2018
browserstack-logo.png Initial commit May 29, 2017
package.json Remove unnecesary d3 dev dependency from package.json Sep 3, 2017
tslint.json Initial commit May 29, 2017

NG Dashboard

Dashboard for Angular (versions 4 +)

If you find this project useful and are going to use it, please give a star in the repo and credits to the author.


  • Use of asynchrony for responsiveness and fast rendering. Data loading is executed in asynchronous and sequential code blocks. This frees the main thread for rendering the user interface without blocking it, and allows fast TTI (Time To Interactive)
  • Includes MG Chart. An Angular component based on Metrics Graphics JS
  • Includes LMap. An Angular Directive based on Leaflet JS
  • UI was quickly assembled based on this component library: Material Light
  • ChartJS Component will be added soon. (ChartJS Website)



  • Latest versions of node, npm/yarn
  • Latest versions of Angular-CLI

Installation and Use

  • To install in a existing project generated with Angular-CLI, run: npm install YagoLopez/ng-dashboard --save
  • To copy and run this project: Clone or fork the repository
  • Install dependencies running npm install
  • IMPORTANT: Adjust the basePath in ngDashboardAppMod.ts to your environment
  • Run: ng serve from project directory
  • Metrics Graphics Chart Component is located in mgChart folder.
    • If you want to use this component, you can copy this folder to your app folder and import mgChartMod in your own module or
    • Import it directily from /node_modules/ng-dashboard/src/app/mgChart/mgChartMod.ts. IMPORTANT: d3.js must be in your root /src directory. This requirement is harcoded in metricsgraphics.js. It doesn't depend on this project.
  • Leaflet Map Directive is located in leafletMap folder. If you want to use this directive:
    • Copy this folder to your app folder and import NgLMapDir in your own component or
    • Import it directily from /node_modules/ng-dashboard/src/app/leafletMap/ngLMapDir.ts.

MetricsGraphics Chart Component API

<mg-chart [urlData]="urlDataString" [data]="dataArray" [request-options]="requestOptionsObject" 
  [config]="configObject" [preprocess-fn]="preprocessFn" [delay]="delayNumber"></mg-chart>
  • There are two ways to pass data into a chart and both are mutually exclusive
    1. [urlData]: Url pointing to a local/remote json file with data (Remote data might have CORS restrictions)
    2. [data]: Array of javascript objects with X and Y coordinates, typically coming from a service.
  • [request-options]: javascript object of type: RequestOptions Used for customized headers, etc.
  • [config]: Javascript object implementing IMGConfig interface. It contains configuration values for MetricsGraphics charts. (Full list of MG Chart Options)
  • [preprocess-Fn]: Applies Javascript transformations to input data (for example format dates, etc.)
  • [delay]: Delay the loading of data (ms). It could be useful when having serveral charts in same page
  • To use MetricsGraphics global object in your component class: declare var MG: any

Leaflet Map Directive API

<div l-map [l-token]="tokenString" [l-center]="centerTuple" [l-zoom]="zoomNumber" [l-options]="optionsObject"></div>
  • [l-token]: String with access token (Get a token in Leaflet website).
  • [l-center]: Tuple of type [number, number] with the coordinates of the map center (latitude and longitude)
  • [l-zoom]: Number with initial zoom
  • [l-options]: (Optional) Javascript object with additional configuration options. Check Leaflet documentation for more information on map options


Tests with the colaboration of:

Back to top

You can’t perform that action at this time.