ng-google-charts
What is it?
An AngularJS Component for Google Charts. This component uses Google’s ChartWrapper to draw charts.
Samples
Installation
with bower:
bower install ng-google-charts --production
with npm:
npm install ng-google-charts --save
Usage requirement
- Declare the following dependency in your index.html or equivalent:
<script src="https://www.gstatic.com/charts/loader.js"></script>
- Also add the following declaration to your index.html or equivalent:
<script src="libs/ng-google-charts/dist/ng-google-charts.js"></script>
- Declare
ngGoogleCharts
dependency in your main module.
angular
.module('yourModule', ['ngGoogleCharts'])...
- Insert the component where you want to use it:
<ng-google-charts data="chartOptions"></ng-google-charts>
- 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
- Clone the repo or download.
npm install && bower install
- Setup E2E testing environment:
npm install -g protractor && webdriver-manager update --standalone
- Run
gulp watch
and open http://localhost:8080/demo/index.html - Use
gulp test-unit
orgulp test-e2e
to execute your tests - Finally, be sure that selenium driver is up:
webdriver-manager start
and rungulp build
License
MIT