ngc

ng-google-charts

An AngularJS Component for Google Charts

Showing:

Popularity

Downloads/wk

10

Maintenance

No Maintenance Data Available

Package

Dependencies

0

Size (min+gzip)

0.8KB

License

MIT

Type Definitions

Tree-Shakeable

No?

Categories

Readme

ng-google-charts

What is it?

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

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:

  • AnnotationChart

  • AreaChart

  • Bar

  • BarChart

  • BubbleChart

  • Calendar

  • CandlestickChart

  • ColumnChart

  • ComboChart

  • PieChart

  • Gantt

  • Gauge

  • GeoChart

  • Histogram

  • Line

  • LineChart

  • Map

  • OrgChart

  • Sankey

  • Scatter

  • ScatterChart

  • SteppedAreaChart

  • Table

  • Timeline

  • TreeMap

  • WordTree

    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

Rate & Review

Great Documentation0
Easy to Use0
Performant0
Highly Customizable0
Bleeding Edge0
Responsive Maintainers0
Poor Documentation0
Hard to Use0
Slow0
Buggy0
Abandoned0
Unwelcoming Community0
100