search

vimalavinisha / angular2-google-chart

Angular 2 google chart
MIT License
59 stars 45 forks source link

This is how I successfully integrate this module to my angular2 project with Angular-CLI #25

Open jefhu opened 7 years ago

jefhu commented 7 years ago

Thank you for creating this wonderful NPM module. I am sharing my experience to benefit others.

Use angular2-google-chart

  1. npm i angular2-google-chart
  2. Index.html has
  3. App.component.ts import {GoogleChart} from 'angular2-google-chart/directives/angular2-google-chart.directive';
  4. App.module.ts import {GoogleChart} from 'angular2-google-chart/directives/angular2-google-chart.directive';

@NgModule({ declarations: [ AppComponent, GoogleChart ],

Includes Timeline chart in app.component.html, I have

Timeline Charts

<div sytle="width:100%, height:600px" id="timeline_chart" [chartData]="timeline_ChartData" [chartOptions]= "timeline_ChartOptions" chartType="Timeline" GoogleChart>

in app.component.ts , I have public timeline_ChartData ={ cols: [ {type: 'string', id: 'Executor'}, {type: 'string', id: 'Name'}, {type: 'string', id: 'Tooltip', role: 'tooltip', p: {html: true}}, {type: 'date', id: 'start_date'}, {type: 'date', id: 'finish_date'}, ], rows: [
{c:[{v: 'A'}, {v: 'John'}, {v: 'John Doe'}, {v: new Date(2016, 7, 31)}, {v: new Date(2016, 8, 1)}]}, {c:[{v: 'A'}, {v: 'Jane'}, {v: 'Jane Doe'}, {v: new Date(2016, 7, 27)}, {v: new Date(2016, 7, 31)}]}, {c:[{v: 'B'}, {v: 'John'}, {v: 'John Doe'}, {v: new Date(2016, 7, 30)}, {v: new Date(2016, 8, 1)}]}, {c:[{v: 'B'}, {v: 'Jane'}, {v: 'Jane Doe'}, {v: new Date(2016, 7, 29)}, {v: new Date(2016, 8, 5)}]}, {c:[{v: 'C'}, {v: 'John'}, {v: 'John Doe'}, {v: new Date(2016, 7, 25)}, {v: new Date(2016, 7, 29)}]}, {c:[{v: 'C'}, {v: 'Jane'}, {v: 'Jane Doe'}, {v: new Date(2016, 7, 27)}, {v: new Date(2016, 8, 1)}]}, {c:[{v: 'C'}, {v: 'Fred'}, {v: 'Fred Doe'}, {v: new Date(2016, 7, 21)}, {v: new Date(2016, 7, 26)}]} ] };

public timeline_ChartOption={ timeline: { colorByRowLabel: true }, backgroundColor: '#ffd', tooltip: {isHtml: true}, width: '100%', height: '600px', chartArea: { width: '80%', height: '80%' }, colors: ['red', 'blue', 'green'], avoidOverlappingGridLines: true };

danlesko commented 7 years ago

This helped me a lot. Just going to clean up some of what you wrote for others to see...

  1. npm install angular2-google-chart
  2. In index.html add the following between the header tags:
    <script src="https://www.gstatic.com/charts/loader.js"></script> <script> var googleLoaded = false; </script>
  3. In app.module.ts and app.component.ts add: import {GoogleChart} from 'angular2-google-chart/directives/angular2-google-chart.directive';
  4. Add GoogleChart to your declarations in app.module.ts @NgModule({ declarations: [ AppComponent, GoogleChart ],
  5. In app.component.html I have: <div id="pie_chart" [chartData]="pie_ChartData" [chartOptions]="pie_ChartOptions" chartType="PieChart" GoogleChart></div>
  6. In app.component.ts I have: public pie_ChartData = [ ['Task', 'Hours per Day'], ['Work', 11], ['Eat', 2], ['Commute', 2], ['Watch TV', 2], ['Sleep', 7] ]; public pie_ChartOptions = { title: 'My Daily Activities', width: 400, height: 400 };
liquidpizza commented 7 years ago

Thank you. Could someone post this to the overview page?

MorlaRamakrishna commented 7 years ago

I have followed the same steps in my application, but getting error like

image

ankitgoyani commented 7 years ago

I'm using barChart, I need to wrap the text from the x-axis, which options should I use to overcome this? here is the screenshot of it : https://prnt.sc/gq6wuq