ng-google-charts

What is it?

An AngularJS Component for Google Charts. This component uses Google’s ChartWrapper to draw charts.

Samples

demo/index-online.html

Stackblitz Sample

Installation

with bower:

bower install ng-google-charts --production

with npm:

npm install ng-google-charts --save

Usage requirement

  1. Declare the following dependency in your index.html or equivalent:
<script src="https://www.gstatic.com/charts/loader.js"></script>
  1. Also add the following declaration to your index.html or equivalent:
<script src="libs/ng-google-charts/dist/ng-google-charts.js"></script>
  1. Declare ngGoogleCharts dependency in your main module.
angular
  .module('yourModule', ['ngGoogleCharts'])...
  1. Insert the component where you want to use it:
<ng-google-charts data="chartOptions"></ng-google-charts>
  1. Format your data like this:
this.chartOptions = {
    chartType: 'Gantt',
    dataTable: [
      ['Task ID', 'TaskName', 'Resource', 'Start Date', 'End Date', 'Duration', 'Percent Complete', 'Dependencies'],
      ['Research', 'Find sources', 'teste', new Date(2015, 12, 1), new Date(2016, 3, 5), 0,  100,  null],
      ['Test', 'Find Test', 'run', new Date(2016, 1, 2), new Date(2016, 10, 5), 0,  100,  null]
    ]
  };

The chartType should be one of the following values:

The dataTable content should follow ChartWrapper format.

Development

  1. Clone the repo or download.
  2. npm install && bower install
  3. Setup E2E testing environment: npm install -g protractor && webdriver-manager update --standalone
  4. Run gulp watch and open http://localhost:8080/demo/index.html
  5. Use gulp test-unit or gulp test-e2e to execute your tests
  6. Finally, be sure that selenium driver is up: webdriver-manager start and run gulp build

License

MIT