Google Chart with AngularJS

Google Charts provides many chart types that is useful for data visualization. Charts are highly interactive and expose events that let you connect them to create complex dashboards. Charts are rendered using HTML5/SVG technology to provide cross-browser compatibility. All chart types are populated with data using the DataTable class, making it easy to switch between chart types. Google chart contains main five elements

• Chart has type
• Chart has data. Different data fomat will have for some charts but basic format will be same.
• Chart contains css style
• Chart has options where it says chart title, axis labels
• Chart format will focus on color format, date format and number format

Here I am trying to have one data set and try to switch my charts.
In data you will have columns and rows (first element will be the label).

 1 chart.data = {"cols": [
 2         {id: "month", label: "Month", type: "string"},
 3         {id: "usa-id", label: "USA", type: "number"},
 4         {id: "uk-id", label: "UK", type: "number"},
 5         {id: "asia-id", label: "Asia", type: "number"},
 6         {id: "other-id", label: "Other", type: "number"}
 7     ], "rows": [
 8         {c: [
 9             {v: "January"},
10             {v: 22, f: "22 Visitors from USA"},
11             {v: 12, f: "Only 12 Visitors from UK"},
12             {v: 15, f: "15 Asian Visitors"},
13             {v: 14, f: "14 Others"}
14         ]},
15         {c: [
16             {v: "February"},
17             {v: 14},
18             {v: 33, f: "Marketing has happen"},
19             {v: 28},
20             {v: 6}
21         ]},
22         {c: [
23             {v: "March"},
24             {v: 22},
25             {v: 8, f: "UK vacation"},
26             {v: 11},
27             {v: 0}
28 
29         ]}
30     ]};
31 

First we need to added google chart  for your angular project then to the html file.

1. Added "angular-google-chart": "~0.0.11" into the “dependencies” of the package.json

2. Added ‘ng-google-chart.js’  file for html page, and define a “div” for chart

<script src="..\node_modules\angular-google-chart\ng-google-chart.js"></script>

<div google-chart chart="chart" style="{{chart.cssStyle}}"/>

3. Build the Controller

 1 angular.module('google-chart-example', ['googlechart']).controller("ChartCtrl", function ($scope) {
 2 var chart1 = {};
 3 
 4     
 5     chart1.type = "BarChart";
 6     chart1.cssStyle = "height:400px; width:600px;";
 7     //used chart.data that I have show in above script
 8     chart1.data = {"cols": [
 9    //labels and types
10       ], "rows": [
11           //name and values
12       ]};
13 
14     chart1.options = {
15         "title": "Website Visitors per month",
16         "isStacked": "true",
17         "fill": 20,
18         "displayExactValues": true,
19         "vAxis": {
20             "title": "Visit Count", "gridlines": {"count": 6}
21         },
22         "hAxis": {
23             "title": "Date"
24         }
25     };
26 
27     chart1.formatters = {};
28 
29     $scope.chart = chart1;
30 
31 });

4. Let add few button for switching charts.

1 <button ng-click="switch('ColumnChart')">ColumnChart</button>
2 <button ng-click="switch('BarChart')">BarChart</button>
3 <button ng-click="switch('AreaChart')">AreaChart</button>
4 <button ng-click="switch('PieChart')">PieChart</button>
5 <button ng-click="switch('LineChart')">LineChart</button>
6 <button ng-click="switch('CandlestickChart')">CandlestickChart</button>
7 <button ng-click="switch('Table')">Table</button>

5. Now add the function for do the axis transformation and chart switching

 1 $scope.switch = function (chartType) {
 2     $scope.chart.type=chartType;
 3     AxisTransform()
 4 };
 5 
 6 AxisTransform = function () {
 7     tempvAxis = $scope.chart.options.vAxis;
 8     temphAxis = $scope.chart.options.hAxis;
 9     $scope.chart.options.vAxis = temphAxis;
10     $scope.chart.options.hAxis = tempvAxis;
11 };

6. Here we go!!!