Nifty Procrastination Machine
    Wondering what’s next for npm?Check out our public roadmap! »

    angular2-google-chart
    TypeScript icon, indicating that this package has built-in type declarations

    2.3.0 • Public • Published

    Angular2/ Angular 4

    This module supports Both angular 2 and angular 4 versions
    

    The sources for this package are in (https://github.com/vimalavinisha/angular2-google-chart) repo. Please file issues and pull requests against this repo.

    Recently added Features:

    Event listener added when user select/deselect on the chart points. It is an optional.

    Demo Output

    google-chart-op

    Usage

    node install
    npm install angular2-google-chart
    

    1.In index.html page include following script

    <script src="https://www.gstatic.com/charts/loader.js"></script>
    <script>  
        // !important: You want to give this variable(var googleLoaded = false;). This is used to run multiple chart in your jade.
        var googleLoaded = false;
        // !important: Define which chart packages to preload.Because this package uses ChartWrappers you can use any chart type that Google supports, but if it // isn't loaded it will load it on demand. 
        var googleChartsPackagesToLoad = ['geochart'];
    </script>
    

    2.component file use like below

    import {Component} from '@angular/core';
    @Component({
        selector: 'my-app',
        template: `
        <h2>  Gaugh Chart</h2>
        <div id="gauge_chart" [chartData]="gauge_ChartData" [chartOptions]= "gauge_ChartOptions" chartType="Gauge" GoogleChart></div>
        <h2>  Area Chart</h2>
        <div id="area_chart" [chartData]="area_ChartData" [chartOptions]= "area_ChartOptions" chartType="AreaChart" GoogleChart></div>
        <h2>  Line Chart</h2>
        <div id="line_chart" [chartData]="line_ChartData" [chartOptions]= "line_ChartOptions" chartType="LineChart" GoogleChart></div>
        <h2>  Bubble Chart</h2>
        <div id="bubble_chart" [chartData]="bubble_ChartData"  [chartOptions] = "bubble_ChartOptions" chartType="BubbleChart" GoogleChart></div>
        <h2>  Scatter Chart</h2>
        <div id="scatter_chart" [chartData]="scatter_ChartData"  [chartOptions] = "scatter_ChartOptions" chartType="ScatterChart" GoogleChart></div>
        <h2>  CandlestickChart</h2>
        <div id="candle_chart" [chartData]="candle_ChartData" [chartOptions] = "candle_ChartOptions" chartType="CandlestickChart" GoogleChart></div>
        <h2>  Pie Chart</h2>
        <div id="pie_chart" [chartData]="pie_ChartData" [chartOptions] = "pie_ChartOptions" chartType="PieChart" GoogleChart></div>
        <h2>  Bar Chart</h2>
        <div id="bar_chart" [chartData]="bar_ChartData" [chartOptions] = "bar_ChartOptions" chartType="BarChart" GoogleChart></div>
        <h2>  Map Chart</h2>
        <div id="map_chart" [chartData]="map_ChartData" [chartOptions] = "map_ChartOptions" chartType="GeoChart" GoogleChart></div>
        <h2>  Organization Chart</h2>
        <div id="org_chart" [chartData]="org_ChartData" [chartOptions] = "org_ChartOptions" chartType="OrgChart" GoogleChart></div>
    
        `
    })
    export class AppComponent {
        public line_ChartData = [
            ['Year', 'Sales', 'Expenses'],
            ['2004', 1000, 400],
            ['2005', 1170, 460],
            ['2006', 660, 1120],
            ['2007', 1030, 540]];
        public bubble_ChartData = [
            ['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'],
            ['CAN', 80.66, 1.67, 'North America', 33739900],
            ['DEU', 79.84, 1.36, 'Europe', 81902307],
            ['DNK', 78.6, 1.84, 'Europe', 5523095],
            ['EGY', 72.73, 2.78, 'Middle East', 79716203],
            ['GBR', 80.05, 2, 'Europe', 61801570],
            ['IRN', 72.49, 1.7, 'Middle East', 73137148],
            ['IRQ', 68.09, 4.77, 'Middle East', 31090763],
            ['ISR', 81.55, 2.96, 'Middle East', 7485600],
            ['RUS', 68.6, 1.54, 'Europe', 141850000],
            ['USA', 78.09, 2.05, 'North America', 307007000]];
        public scatter_ChartData = [
            ['Date', 'Sales Percentage'],
            [new Date(2016, 3, 22), 78],
            [new Date(2016, 3, 21, 9, 30, 2), 88],
            [new Date(2016, 3, 20), 67],
            [new Date(2016, 3, 19, 8, 34, 7), 98],
            [new Date(2016, 3, 18, 15, 34, 7), 95],
            [new Date(2016, 3, 16, 7, 30, 45), 89],
            [new Date(2016, 3, 16, 15, 40, 35), 68]
        ];
        public candle_ChartData = [
            ['Day', 'Low', 'Opening value', 'Closing value', 'High'],
            ['Mon', 28, 28, 38, 38],
            ['Tue', 38, 38, 55, 55],
            ['Wed', 55, 55, 77, 77],
            ['Thu', 77, 77, 66, 66],
            ['Fri', 66, 66, 22, 22]
        ];
        public pie_ChartData = [
            ['Task', 'Hours per Day'],
            ['Work', 11],
            ['Eat', 2],
            ['Commute', 2],
            ['Watch TV', 2],
            ['Sleep', 7]];
        public bar_ChartData = [
            ['City', '2010 Population', '2000 Population'],
            ['New York City, NY', 8175000, 8008000],
            ['Los Angeles, CA', 3792000, 3694000],
            ['Chicago, IL', 2695000, 2896000],
            ['Houston, TX', 2099000, 1953000],
            ['Philadelphia, PA', 1526000, 1517000]];
        public map_ChartData = [
            ['Country', 'Popularity'],
            ['Germany', 200],
            ['United States', 300],
            ['Brazil', 400],
            ['Canada', 500],
            ['France', 600],
            ['RU', 700]
        ];
        public org_ChartData = [
            ['Name', 'Manager', 'ToolTip'],
            [{ v: 'Mike', f: 'Mike<div style="color:red; font-style:italic">President</div>' },
                '', 'The President'],
            [{ v: 'Jim', f: 'Jim<div style="color:red; font-style:italic">Vice President</div>' },
                'Mike', 'VP'],
            ['Alice', 'Mike', ''],
            ['Bob', 'Jim', 'Bob Sponge'],
            ['Carol', 'Bob', '']
        ];
        public line_ChartOptions = {
            title: 'Company Performance',
            curveType: 'function',
            legend: {
                position: 'bottom'
            }
        };
        public bubble_ChartOptions = {
            title: 'Correlation between life expectancy, fertility rate ' +
            'and population of some world countries (2010)',
            hAxis: { title: 'Life Expectancy' },
            vAxis: { title: 'Fertility Rate' },
            bubble: { textStyle: { fontSize: 11 } }
    
        };
        public candle_ChartOptions = {
            legend: 'none',
            bar: { groupWidth: '100%' }, // Remove space between bars.
            candlestick: {
                fallingColor: { strokeWidth: 0, fill: '#a52714' }, // red
                risingColor: { strokeWidth: 0, fill: '#0f9d58' }   // green
            }
        };
        public scatter_ChartOptions = {
            legend: {
                position: 'bottom'
            },
            title: 'Company Sales Percentage'
        };
        public bar_ChartOptions = {
            title: 'Population of Largest U.S. Cities',
            chartArea: { width: '50%' },
            hAxis: {
                title: 'Total Population',
                minValue: 0,
                textStyle: {
                    bold: true,
                    fontSize: 12,
                    color: '#4d4d4d'
                },
                titleTextStyle: {
                    bold: true,
                    fontSize: 18,
                    color: '#4d4d4d'
                }
            },
            vAxis: {
                title: 'City',
                textStyle: {
                    fontSize: 14,
                    bold: true,
                    color: '#848484'
                },
                titleTextStyle: {
                    fontSize: 14,
                    bold: true,
                    color: '#848484'
                }
            }
        };
        public pie_ChartOptions = {
            title: 'My Daily Activities',
            width: 900,
            height: 500
        };
        public gauge_ChartData = [
            ['Label', 'Value'],
            ['Systolic', 120],
            ['Diastolic', 80]];
        public gauge_ChartOptions = {
            width: 400, height: 120,
            redFrom: 90, redTo: 100,
            yellowFrom: 75, yellowTo: 90,
            minorTicks: 5
        };
        public area_ChartData = [
            ['Year', 'Sales', 'Expenses'],
            ['2013', 1000, 400],
            ['2014', 1170, 460],
            ['2015', 660, 1120],
            ['2016', 1030, 540]
        ];
    
        public area_ChartOptions = {
            title: 'Company Performance',
            hAxis: { title: 'Year', titleTextStyle: { color: '#333' } },
            vAxis: { minValue: 0 }
        };
        public map_ChartOptions = {};
        public org_ChartOptions = {
            allowHtml: true
        };
    }
    

    3 In app.module.ts, make the following additions

    import {GoogleChart} from 'angular2-google-chart/directives/angular2-google-chart.directive';
    
    @NgModule({
      declarations: [
        AppComponent,
        GoogleChart
      ],...
    

    4 Example Charts

    <img src="../app/assets/images/google-charts-output.png">
    

    Install

    npm i angular2-google-chart

    DownloadsWeekly Downloads

    239

    Version

    2.3.0

    License

    MIT

    Last publish

    Collaborators

    • avatar
    • avatar