Category: angular Googlecharts

Discuss Angular Google Charts ”; Previous Next angular-google-charts is a open source angular based wrapper for Google Charts to provides an elegant and feature rich Google Charts visualizations within an Angular application and can be used along with Angular components seamlessly. There are chapters discussing all the basic components of Google Charts with suitable examples within a Angular application. Google Charts is a pure JavaScript based charting library meant to enhance web applications by adding interactive charting capability. Google Charts provides a wide variety of charts. For example, line charts, spline charts, area charts, bar charts, pie charts and so on. This tutorial will teach you the basics of Google Charts. Angular is a JavaScript framework for building web applications and apps in JavaScript, html, and TypeScript, which is a superset of JavaScript. Angular provides built-in features for animation, http service, and materials which in turn has features such as auto-complete, navigation, toolbar, menus, etc. The code is written in TypeScript, which compiles to JavaScript and displays the same in the browser. Print Page Previous Next Advertisements ”;

Angular Google Charts – Useful Resources ”; Previous Next The following resources contain additional information on Angular Google Charts. Please use them to get more in-depth knowledge on this. Useful Video Courses Angular – The Complete Course 14 Lectures 48 mins Ganesh Kavhar More Detail Angular JS Full Stack: Create and Host Listing/Classified Site 59 Lectures 4 hours Jay R More Detail Full-Stack web app development with Angular 12, .NET Core Web API & Mongo DB Most Popular 20 Lectures 49 mins Vinay Kumar More Detail Angular 12, .NET Core Web API & Microsoft SQL Full Stack Web Development 21 Lectures 55 mins Vinay Kumar More Detail Angular 12, .NET Core Web API and MySQL Web Development 21 Lectures 51 mins Vinay Kumar More Detail Angular 12, .NET Core Web API & PostgreSQL Full Stack Web Development 5 Lectures 51 mins Vinay Kumar More Detail Print Page Previous Next Advertisements ”;

Angular Google Charts – Quick Guide ”; Previous Next Angular Google Charts – Overview Google Charts is a pure JavaScript based charting library meant to enhance web applications by adding interactive charting capability. It supports a wide range of charts. Charts are drawn using SVG in standard browsers like Chrome, Firefox, Safari, Internet Explorer(IE). In legacy IE 6, VML is used to draw the graphics. angular-google-charts is a open source angular based wrapper for Google Charts to provides an elegant and feature rich Google Charts visualizations within an Angular application and can be used along with Angular components seamlessly. There are chapters discussing all the basic components of Google Charts with suitable examples within a Angular application. Features Following are the salient features of Google Charts library. Compatability − Works seemlessly on all major browsers and mobile platforms like android and iOS. Multitouch Support − Supports multitouch on touch screen based platforms like android and iOS. Ideal for iPhone/iPad and android based smart phones/ tablets. Free to Use − Open source and is free to use for non-commercial purpose. Lightweight − loader.js core library, is extremely lightweight library. Simple Configurations − Uses json to define various configuration of the charts and very easy to learn and use. Dynamic − Allows to modify chart even after chart generation. Multiple axes − Not restricted to x, y axis. Supports multiple axis on the charts. Configurable tooltips − Tooltip comes when a user hover over any point on a charts. googlecharts provides tooltip inbuilt formatter or callback formatter to control the tooltip programmatically. DateTime support − Handle date time specially. Provides numerous inbuilt controls over date wise categories. Print − Print chart using web page. External data − Supports loading data dynamically from server. Provides control over data using callback functions. Text Rotation − Supports rotation of labels in any direction. Supported Chart Types Google Charts library provides following types of charts: Sr.No. Chart Type / Description 1 Line Charts Used to draw line/spline based charts. 2 Area Charts Used to draw area wise charts. 3 Pie Charts Used to draw pie charts. 4 Sankey Charts, Scatter Charts, Stepped area charts, Table, Timelines, TreeMap, Trendlines Used to draw scattered charts. 5 Bubble Charts Used to draw bubble based charts. 6 Dynamic Charts Used to draw dynamic charts where user can modify charts. 7 Combinations Used to draw combinations of variety of charts. 8 3D Charts Used to draw 3D charts. 9 Angular Gauges Used to draw speedometer type charts. 10 Heat Maps Used to draw heat maps. 11 Tree Maps Used to draw tree maps. In next chapters, we”re going to discuss each type of above mentioned charts in details with examples. Licence Google Charts is open source and is free to use. Follow the link − Terms of Service. Angular Google Charts – Environment Setup This tutorial will guide you on how to prepare a development environment to start your work with Google Charts and Angular Framework. In this chapter, we will discuss the Environment Setup required for Angular 6. To install Angular 6, we require the following − Nodejs Npm Angular CLI IDE for writing your code Nodejs has to be greater than 8.11 and npm has to be greater than 5.6. Nodejs To check if nodejs is installed on your system, type node -v in the terminal. This will help you see the version of nodejs currently installed on your system. C:>node -v v8.11.3 If it does not print anything, install nodejs on your system. To install nodejs, go the homepage https://nodejs.org/en/download/ of nodejs and install the package based on your OS. Based on your OS, install the required package. Once nodejs is installed, npm will also get installed along with it. To check if npm is installed or not, type npm -v in the terminal. It should display the version of the npm. C:>npm -v 5.6.0 Angular 6 installations are very simple with the help of angular CLI. Visit the homepage https://cli.angular.io/ of angular to get the reference of the command. Type npm install -g @angular/cli, to install angular cli on your system. You will get the above installation in your terminal, once Angular CLI is installed. You can use any IDE of your choice, i.e., WebStorm, Atom, Visual Studio Code, etc. Install Google Charts Wrapper Run the following command to install Google Charts Wrapper module in the project created. googleChartsApp> npm angular-google-charts + [email protected] added 2 packages in 20.526s Add the following entry in app.module.ts file import { GoogleChartsModule } from ”angular-google-charts”; imports: [ … GoogleChartsModule ], Angular Google Charts – Configuration Syntax In this chapter, we will showcase the configuration required to draw a chart using the Google Chart API in Angular. Step 1 – Create Angular Application Follow the following steps to update the Angular application we created in Angular 6 – Project Setup chapter − Step Description 1 Create a project with a name googleChartsApp as explained in the Angular 6 – Project Setup chapter. 2 Modify app.module.ts, app.component.ts and app.component.html as explained below. Keep rest of the files unchanged. 3 Compile and run the application to verify the result of the implemented logic. Following is the content of the modified module descriptor app.module.ts. import { BrowserModule } from ”@angular/platform-browser”; import { NgModule } from ”@angular/core”; import { AppComponent } from ”./app.component”; import { GoogleChartsModule } from ”angular-google-charts”; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule,GoogleChartsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { } Following is the content of the modified HTML host file app.component.html. <google-chart #chart [title]=”title” [type]=”type” [data]=”data” [columnNames]=”columnNames” [options]=”options” [width]=”width” [height]=”height”> </google-chart> We”ll see the updated app.component.ts in the end after understanding configurations. Step 2 – Use Configurations Set Title title = ”Browser market shares at a specific website, 2014”; Set Chart Type type=”PieChart”; data Configure the data to be displayed on the chart. data = [ [”Firefox”, 45.0], [”IE”, 26.8], [”Chrome”, 12.8], [”Safari”, 8.5], [”Opera”, 6.2], [”Others”, 0.7] ]; column names Configure the column

Angular Google Charts – Organization Charts ”; Previous Next Following is an example of a Organization Chart. Organization chart helps in rendering a hierarchy of nodes, used to portray superior/subordinate relationships in an organization. For example, A family tree is a type of org chart. We have already seen the configurations used to draw a chart in Google Charts Configuration Syntax chapter. Now, let us see an example of a Organization Chart. Configurations We”ve used OrgChart class to show a Organization Chart. type=”OrgChart”; Example app.component.ts import { Component } from ”@angular/core”; @Component({ selector: ”app-root”, templateUrl: ”./app.component.html”, styleUrls: [”./app.component.css”] }) export class AppComponent { title = ””; type = ”OrgChart”; data = [ [{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”, ””] ]; columnNames = [“Name”,”Manager”,”Tooltip”]; options = { allowHtml: true }; width = 550; height = 400; } Result Verify the result. Print Page Previous Next Advertisements ”;

Angular Google Charts – Line Charts ”; Previous Next Line charts are used to draw line based charts. In this section we”re going to discuss following types of line based charts. Sr.No Chart Type / Description 1 Basic line Basic line chart. 2 With visible points Chart with visible data points. 3 Customizable background color Chart with customized background color. 4 Customizable line color Chart with customized line color. 5 Customizable axis and tick labels Chart with customized axis and tick labels. 6 Crosshairs Line charts showing crosshairs at data point on selection. 7 Customizable line style Chart with customized line color. 8 Line Charts with curved lines Chart with smooth curve lines. Print Page Previous Next Advertisements ”;

Angular Google Charts – Candlestick Charts ”; Previous Next Candlestick charts are used to show opening and closing value over a value variance and are normally used to represent stocks. In this section we”re going to discuss following types of candlestick based charts. Sr.No Chart Type / Description 1 Basic Candlestick Basic Candlestick chart. 2 Candlestick with customized colors Customized Candlestick Chart. Print Page Previous Next Advertisements ”;

Angular Google Charts – Map Charts ”; Previous Next A Google Map Chart uses Google Maps API to display Map. Data values are displayed as markers on the map. Data values may be coordinates (lat-long pairs) or actual addresses. The map will be scaled accordingly so that it includes all the identified points. Sr.No Chart Type / Description 1 Basic Map Basic Google Map. 2 Map using Latitude/Longitude Map having locations specified using Latitude and Longitude. Print Page Previous Next Advertisements ”;

Angular Google Charts – Stepped Charts ”; Previous Next A stepped area chart is a step based area chart. We”re going to discuss following types of stepped area charts. Sr.No Chart Type / Description 1 Basic Stepped Chart Basic Stepped Area Chart. 2 Stacked Stepped Chart Stacked Stepped Area Chart. Print Page Previous Next Advertisements ”;

Angular Google Charts – Table Charts ”; Previous Next Table chart helps in rendering a table which can be sorted and paged. Table cells can be formatted using format strings, or by directly inserting HTML as cell values. Numeric values are right-aligned by default; boolean values are displayed as check marks or cross marks. Users can select single rows either with the keyboard or the mouse. Column headers can be used for sorting. The header row remains fixed during scrolling. The table fires events corresponding to user interaction. We have already seen the configurations used to draw a chart in Google Charts Configuration Syntax chapter. Now, let us see an example of a Table Chart. Configurations We”ve used Table class to show a Table chart. type = ”Table”; Example app.component.ts import { Component } from ”@angular/core”; @Component({ selector: ”app-root”, templateUrl: ”./app.component.html”, styleUrls: [”./app.component.css”] }) export class AppComponent { title = “”; type = ”Table”; data = [ [”Mike”, {v: 10000, f: ”$10,000”}, true], [”Jim”, {v:8000, f: ”$8,000”}, false], [”Alice”, {v: 12500, f: ”$12,500”}, true], [”Bob”, {v: 7000, f: ”$7,000”}, true] ]; columnNames = [“Name”, “Salary”,”Full Time Employee”]; options = { alternatingRowStyle:true, showRowNumber:true }; width = 550; height = 400; } Result Verify the result. Print Page Previous Next Advertisements ”;

Angular Google Charts – Scatter Chart ”; Previous Next Following is an example of a Scatter Chart. We have already seen the configurations used to draw a chart in Google Charts Configuration Syntax chapter. Now, let us see an example of a Scatter Chart. Configurations We”ve used ScatterChart class to show a Scatter chart. type = ”ScatterChart”; Example app.component.ts import { Component } from ”@angular/core”; @Component({ selector: ”app-root”, templateUrl: ”./app.component.html”, styleUrls: [”./app.component.css”] }) export class AppComponent { title = ”Age vs Weight”; type=”ScatterChart”; data = [ [8,12], [4, 5.5], [11,14], [4,5], [3,3.5], [6.5,7] ]; columnNames = [”Age”, ”Weight”]; options = { }; width = 550; height = 400; } Result Verify the result. Print Page Previous Next Advertisements ”;