{"id":69194,"date":"2022-04-30T11:12:22","date_gmt":"2022-04-30T09:12:22","guid":{"rendered":"https:\/\/drafts.code-maze.com\/?p=69194"},"modified":"2024-01-31T15:17:00","modified_gmt":"2024-01-31T14:17:00","slug":"google-charts-angular-aspnetcore-webapi","status":"publish","type":"post","link":"https:\/\/code-maze.com\/google-charts-angular-aspnetcore-webapi\/","title":{"rendered":"Google Charts With Angular and ASP.NET Core Web API"},"content":{"rendered":"

In this article, we are going to look at using charts with Angular and ASP.NET Core Web API to visualize the relationship between data.<\/p>\n

We’ll use Google Charts to create the visualization. It is a Javascript-based library used for data charting and visualization. We can create various types of charts using user-supplied data with the help of the Google Chart API. These charts are highly interactive and customizable.<\/p>\n

To download the source code for this article, you can visit our GitHub repository<\/a>.<\/div>\n

Let’s get going.<\/p>\n

<\/a>Configuring the ASP.NET Core Web API<\/h2>\n

Before we implement the google charts in our Angular app, we need to configure our API to get the data from the database.\u00a0<\/p>\n

Let’s create a model class named Language<\/code>:<\/p>\n

public class Language\r\n{\r\n    public int Id { get; set; }\r\n    public string Name { get; set; }\r\n    public int SpeakersInMillions { get; set; }\r\n}<\/pre>\n
Let’s use Entity Framework Core to create a table “Languages” using this model class:<\/p>\n
public class DataContext : DbContext\r\n{\r\n    public DataContext(DbContextOptions options) : base(options)\r\n    {\r\n    }\r\n\r\n    public DbSet<Language> Languages { get; set; }\r\n}<\/pre>\n
This takes care of the creation of the table. However, it’s still empty.<\/p>\n
Let’s create a seeding method to create the required data in the database:<\/p>\n
public void SeedData()\r\n{\r\n    var languageData = File.ReadAllText(\"Data\/LanguageSeedData.json\");\r\n    var languages = JsonSerializer.Deserialize<List<Language>>(languageData);\r\n\r\n    if (!_context.Languages.Any())\r\n    {\r\n        _context.Languages.AddRange(languages);\r\n    }\r\n\r\n    _context.SaveChanges();\r\n}<\/pre>\n
Now, let’s call the method SeedData()<\/code> at the application startup so that we have some data in our database as soon as the application starts:<\/p>\n
using (var scope = app.Services.CreateScope())\r\n{\r\n    var dataContext = scope.ServiceProvider.GetRequiredService<DataContext>();\r\n    dataContext.Database.Migrate();\r\n\r\n    new Seed(dataContext).SeedData();\r\n}<\/pre>\n
The final step towards having our API ready to send data is to add a controller.<\/p>\n
Let’s add a method named GetLanguageStats()<\/code> in the LanguagesController<\/code> that returns a 200 status code with a list of Language<\/code> objects as a response when languageStats<\/code> does exist:<\/p>\n
[HttpGet(\"[action]\")]\r\npublic IActionResult GetLanguageStats()\r\n{\r\n    var languageStats = _repo.GetLanguages().ToList();\r\n\r\n    if (languageStats != null && languageStats.Count > 0)\r\n        return Ok(languageStats);\r\n\r\n    return BadRequest();\r\n}<\/pre>\n
We can now receive the data from this method into our Angular application.<\/p>\n
<\/a>Configure the Angular Application<\/h2>\n
Now that we have our API ready to send the language data, let’s start configuring our Angular app to receive the data.<\/p>\n
Let’s add a service named LanguageService<\/code>:<\/p>\n
export class LanguageService {\r\n  constructor(private http: HttpClient) {}\r\n\r\n  private languageApiUrl = environment.apiUrl + 'languages\/GetLanguageStats';\r\n\r\n  GetLanguageStatistics() {\r\n    return this.http.get<any>(this.languageApiUrl).pipe(\r\n      map((result) => {\r\n        return result;\r\n      })\r\n    );\r\n  }\r\n}<\/pre>\n
This class uses HttpClientModule<\/code> to establish communication and retrieve the data from the Web API.<\/p>\n
At this point, we have been able to fill the database table with data, use our ASP.NET Core Web API to retrieve that data, and have an HTTP request in the service to get the data to our Angular application.<\/p>\n
<\/a>Display the Data From the API on the UI<\/h2>\n
We have an open-source Angular-based wrapper for Google Charts called angular-google-charts<\/a><\/strong>\u00a0that we’ll use in our application for the Google Charts visualizations.<\/p>\n
To use the module, let’s first install it in the src\u00a0<\/strong>directory of the application:<\/p>\n
npm i angular-google-charts<\/code><\/p>\n
Once installed, we’ll need to import the GoogleChartsModule<\/code> in the app.module.ts<\/code> class:<\/p>\n
import { GoogleChartsModule } from 'angular-google-charts';\r\n\r\nimports: [\r\n   ...\r\n   GoogleChartsModule\r\n],<\/pre>\n
We can customize the Google Charts using multiple configuration settings:<\/p>\n
<\/a>Title<\/h3>\n
We use the title<\/em> property to set the title of the graph. It takes string<\/code> as a value:<\/p>\n
title=\"Bar Chart\"<\/code><\/p>\n
<\/a>Type<\/h3>\n
The type\u00a0<\/em>property determines the type of graph for visualizing data. It takes an enum ChartType<\/code> as the value. The enum has values like AreaChart, BarChart, PieChart, etc.<\/p>\n
<\/a>Data<\/h3>\n
The data\u00a0<\/em>property contains the actual data based on which we populate the graph:<\/p>\n
data = [\r\n   ['English', 1132],\r\n   ['Mandarin', 1117],\r\n   ['Hindi', 665],\r\n   ['Spanish', 534],\r\n   ['French', 280],\r\n   ['Arabic', 274] \r\n];<\/pre>\n
<\/a>Column Names<\/h3>\n
The column names<\/em> property takes an array of strings as its value. This configures the column names to display in the graph:<\/p>\n
columnNames = ['Language', 'Speakers (millions)'];<\/code><\/p>\n
<\/a>Options<\/h3>\n
We use the options\u00a0<\/em>property to configure other miscellaneous options in the graph:<\/p>\n
options = {\r\n  is3D: true\r\n}<\/pre>\n
Let’s look at the app.component<\/code> changes to understand the configuration better.<\/p>\n
To create a donut chart, we’ll need to make changes in the app.component.ts<\/code> file:<\/p>\n
export class AppComponent implements OnInit {\r\n  pieChart = ChartType.PieChart;\r\n\r\n  data: any[] = [];\r\n\r\n  columnNames = ['Language', 'Speakers (millions)'];\r\n\r\n  width = 600;\r\n\r\n  height = 400;\r\n\r\n  donutOptions = {\r\n    pieHole: 0.5\r\n  }\r\n\r\n  constructor(private languageService: LanguageService) {}\r\n\r\n  ngOnInit(): void {\r\n    this.languageService.GetLanguageStatistics().subscribe((result) => {\r\n      this.data = [];\r\n\r\n      for (let row in result) {\r\n        this.data.push([\r\n          result[row].name.toString(),\r\n          result[row].speakersInMillions,\r\n        ]);\r\n      }\r\n    });\r\n  }\r\n}<\/pre>\n
Here, we can inject the LanguageService<\/code> class as a dependency and call the GetLanguageStatistics()<\/code> method. In addition to that, we can implement the OnInit<\/code> interface and subscribe to the result on ngOnInit()<\/code> and assign the result data to the data<\/code> property of Google Charts.<\/p>\n
And, in the app.component.html<\/code> file, we provide the configuration settings:<\/p>\n
<google-chart\r\n  title=\"Donut Chart\"\r\n  [type]=\"pieChart\"\r\n  [data]=\"data\"\r\n  [columns]=\"columnNames\"\r\n  [width]=\"width\"\r\n  [height]=\"height\"\r\n  [options]=\"donutOptions\"\r\n>\r\n<\/google-chart><\/pre>\n
With the changes applied, we can now see the data visualized as a donut chart:<\/p>\n
\"Donut<\/a><\/p>\n
<\/a>Commonly Used Charts<\/h2>\n
Similar to the Pie Chart, Google Charts also provides other types of graphs like Area Chart, Geo Chart, Bar Chart, Column Chart, Histograms, etc.<\/p>\n
Let’s look at some of the commonly used graphs:<\/p>\n
<\/a>Bar Chart<\/h3>\n
We use bar charts to visualize comparative data organized into different categories. The y-axis represents the categories and the x-axis represents the numerical values associated with the categories:<\/p>\n
<google-chart\r\n  title=\"Bar Chart\"\r\n  [type]=\"barChart\"\r\n  [data]=\"data\"\r\n  [columns]=\"columnNames\"\r\n  [width]=\"width\"\r\n  [height]=\"height\"\r\n>\r\n<\/google-chart><\/pre>\n
\"bar<\/a><\/p>\n
<\/a>Column Chart<\/h3>\n
A column chart is similar to bar charts in its mode of data presentation. It is the vertical version of a bar chart where the x-axis represents the categories and the y-axis represents the numerical values of the categories:<\/p>\n
<google-chart\r\n  title=\"Column Chart\"\r\n  [type]=\"columnChart\"\r\n  [data]=\"data\"\r\n  [columns]=\"columnNames\"\r\n  [width]=\"width\"\r\n  [height]=\"height\"\r\n>\r\n<\/google-chart><\/pre>\n
\"column<\/a><\/p>\n
<\/a>Pie Chart<\/h3>\n
A pie chart breaks the data into parts. Each part (or slice) represents one category and it provides us with the perspective of how each part relates to the whole data:<\/p>\n
<google-chart\r\n  title=\"Pie Chart\"\r\n  [type]=\"pieChart\"\r\n  [data]=\"data\"\r\n  [columns]=\"columnNames\"\r\n  [width]=\"width\"\r\n  [height]=\"height\"\r\n>\r\n<\/google-chart><\/pre>\n
\"pie<\/a><\/p>\n
We can also create a 3D pie chart by using is3D: true<\/code> in the options<\/code> property of the google-chart<\/code> component:<\/p>\n
options = {\r\n  is3D: true,\r\n};<\/pre>\n
The donut chart is also a type of pie chart we can create with the pieHole<\/code> option set to a number between 0 and 1. However, the is3D<\/code> and pieHole<\/code> options do not work together and the pieHole<\/code> option is ignored if we use them together.<\/p>\n
<\/a>Line Chart<\/h3>\n
We use line charts to show the change in the numerical value of one variable over the progression of the other variable. They are best used to show the trends in data over time and are not necessarily the best choice for categorical data:<\/p>\n
<google-chart\r\n  title=\"Line Chart\"\r\n  [type]=\"lineChart\"\r\n  [data]=\"data\"\r\n  [columns]=\"columnNames\"\r\n  [width]=\"width\"\r\n  [height]=\"height\"\r\n>\r\n<\/google-chart><\/pre>\n
\"line<\/a><\/p>\n
<\/a>Area Chart<\/h3>\n
Area charts are a combination of line charts and bar charts. We use them to show how a group’s numerical value changes with the progression of the other variable. These charts, similar to line charts are best used to visualize the change in data over time:<\/p>\n
<google-chart\r\n  title=\"Area Chart\"\r\n  [type]=\"areaChart\"\r\n  [data]=\"data\"\r\n  [columns]=\"columnNames\"\r\n  [width]=\"width\"\r\n  [height]=\"height\"\r\n>\r\n<\/google-chart><\/pre>\n
\"area<\/a><\/p>\n
<\/a>Conclusion<\/h2>\n
We’ve learned about using Google Charts in an Angular application with ASP.NET Core Web API as the data provider. We made use of the angular-google-charts<\/strong> wrapper to display the charts in our application and went through different types of commonly used charts.<\/p>\n","protected":false},"excerpt":{"rendered":"
In this article, we are going to look at using charts with Angular and ASP.NET Core Web API to visualize the relationship between data. We’ll use Google Charts to create the visualization. It is a Javascript-based library used for data charting and visualization. We can create various types of charts using user-supplied data with the […]<\/p>\n","protected":false},"author":6,"featured_media":62187,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","_et_gb_content_width":"","footnotes":""},"categories":[168,2079],"tags":[23,586,783,1241,45],"class_list":["post-69194","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular","category-web-api","tag-angular","tag-asp-net-core-web-api","tag-charts","tag-google-charts","tag-web-development","et-has-post-format-content","et_post_format-et-post-format-standard"],"yoast_head":"\nGoogle Charts With Angular and ASP.NET Core Web API<\/title>\n<meta name=\"description\" content=\"Let's learn how to use Google Charts for data visualization with angular and ASP.NET Core Web API through examples.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/code-maze.com\/google-charts-angular-aspnetcore-webapi\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Google Charts With Angular and ASP.NET Core Web API\" \/>\n<meta property=\"og:description\" content=\"Let's learn how to use Google Charts for data visualization with angular and ASP.NET Core Web API through examples.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/code-maze.com\/google-charts-angular-aspnetcore-webapi\/\" \/>\n<meta property=\"og:site_name\" content=\"Code Maze\" \/>\n<meta property=\"article:published_time\" content=\"2022-04-30T09:12:22+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2024-01-31T14:17:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/code-maze.com\/wp-content\/uploads\/2021\/12\/social-aspnetcore.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1100\" \/>\n\t<meta property=\"og:image:height\" content=\"620\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Code Maze\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@https:\/\/twitter.com\/CodeMazeBlog\" \/>\n<meta name=\"twitter:site\" content=\"@CodeMazeBlog\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Code Maze\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"7 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":[\"Article\",\"BlogPosting\"],\"@id\":\"https:\/\/code-maze.com\/google-charts-angular-aspnetcore-webapi\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/code-maze.com\/google-charts-angular-aspnetcore-webapi\/\"},\"author\":{\"name\":\"Code Maze\",\"@id\":\"https:\/\/code-maze.com\/#\/schema\/person\/09d29b223012c8e94a68ba62861d0b04\"},\"headline\":\"Google Charts With Angular and ASP.NET Core Web API\",\"datePublished\":\"2022-04-30T09:12:22+00:00\",\"dateModified\":\"2024-01-31T14:17:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/code-maze.com\/google-charts-angular-aspnetcore-webapi\/\"},\"wordCount\":937,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/code-maze.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/code-maze.com\/google-charts-angular-aspnetcore-webapi\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/code-maze.com\/wp-content\/uploads\/2021\/12\/social-aspnetcore.png\",\"keywords\":[\"Angular\",\"asp.net core web api\",\"Charts\",\"Google Charts\",\"web development\"],\"articleSection\":[\"Angular\",\"Web API\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/code-maze.com\/google-charts-angular-aspnetcore-webapi\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/code-maze.com\/google-charts-angular-aspnetcore-webapi\/\",\"url\":\"https:\/\/code-maze.com\/google-charts-angular-aspnetcore-webapi\/\",\"name\":\"Google Charts With Angular and ASP.NET Core Web API\",\"isPartOf\":{\"@id\":\"https:\/\/code-maze.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/code-maze.com\/google-charts-angular-aspnetcore-webapi\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/code-maze.com\/google-charts-angular-aspnetcore-webapi\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/code-maze.com\/wp-content\/uploads\/2021\/12\/social-aspnetcore.png\",\"datePublished\":\"2022-04-30T09:12:22+00:00\",\"dateModified\":\"2024-01-31T14:17:00+00:00\",\"description\":\"Let's learn how to use Google Charts for data visualization with angular and ASP.NET Core Web API through examples.\",\"breadcrumb\":{\"@id\":\"https:\/\/code-maze.com\/google-charts-angular-aspnetcore-webapi\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/code-maze.com\/google-charts-angular-aspnetcore-webapi\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/code-maze.com\/google-charts-angular-aspnetcore-webapi\/#primaryimage\",\"url\":\"https:\/\/code-maze.com\/wp-content\/uploads\/2021\/12\/social-aspnetcore.png\",\"contentUrl\":\"https:\/\/code-maze.com\/wp-content\/uploads\/2021\/12\/social-aspnetcore.png\",\"width\":1100,\"height\":620,\"caption\":\"ASP.NET Core\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/code-maze.com\/google-charts-angular-aspnetcore-webapi\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/code-maze.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Google Charts With Angular and ASP.NET Core Web API\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/code-maze.com\/#website\",\"url\":\"https:\/\/code-maze.com\/\",\"name\":\"Code Maze\",\"description\":\"Learn. Code. Succeed.\",\"publisher\":{\"@id\":\"https:\/\/code-maze.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/code-maze.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/code-maze.com\/#organization\",\"name\":\"Code Maze\",\"url\":\"https:\/\/code-maze.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/code-maze.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/01\/Code-Maze-Only-Logo-Transparent-HRez.png\",\"contentUrl\":\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/01\/Code-Maze-Only-Logo-Transparent-HRez.png\",\"width\":3511,\"height\":3510,\"caption\":\"Code Maze\"},\"image\":{\"@id\":\"https:\/\/code-maze.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/CodeMazeBlog\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/code-maze.com\/#\/schema\/person\/09d29b223012c8e94a68ba62861d0b04\",\"name\":\"Code Maze\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/code-maze.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/01\/Code-Maze-Only-Logo-Transparent-HRez-150x150.png\",\"contentUrl\":\"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/01\/Code-Maze-Only-Logo-Transparent-HRez-150x150.png\",\"caption\":\"Code Maze\"},\"description\":\"This is the standard author on the site. Most articles are published by individual authors, with their profiles, but when several authors have contributed, we publish collectively as a part of this profile.\",\"sameAs\":[\"https:\/\/www.linkedin.com\/company\/codemaze\/\",\"https:\/\/x.com\/https:\/\/twitter.com\/CodeMazeBlog\"],\"url\":\"https:\/\/code-maze.com\/author\/codemazecontributor\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Google Charts With Angular and ASP.NET Core Web API","description":"Let's learn how to use Google Charts for data visualization with angular and ASP.NET Core Web API through examples.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/code-maze.com\/google-charts-angular-aspnetcore-webapi\/","og_locale":"en_US","og_type":"article","og_title":"Google Charts With Angular and ASP.NET Core Web API","og_description":"Let's learn how to use Google Charts for data visualization with angular and ASP.NET Core Web API through examples.","og_url":"https:\/\/code-maze.com\/google-charts-angular-aspnetcore-webapi\/","og_site_name":"Code Maze","article_published_time":"2022-04-30T09:12:22+00:00","article_modified_time":"2024-01-31T14:17:00+00:00","og_image":[{"width":1100,"height":620,"url":"https:\/\/code-maze.com\/wp-content\/uploads\/2021\/12\/social-aspnetcore.png","type":"image\/png"}],"author":"Code Maze","twitter_card":"summary_large_image","twitter_creator":"@https:\/\/twitter.com\/CodeMazeBlog","twitter_site":"@CodeMazeBlog","twitter_misc":{"Written by":"Code Maze","Est. reading time":"7 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":["Article","BlogPosting"],"@id":"https:\/\/code-maze.com\/google-charts-angular-aspnetcore-webapi\/#article","isPartOf":{"@id":"https:\/\/code-maze.com\/google-charts-angular-aspnetcore-webapi\/"},"author":{"name":"Code Maze","@id":"https:\/\/code-maze.com\/#\/schema\/person\/09d29b223012c8e94a68ba62861d0b04"},"headline":"Google Charts With Angular and ASP.NET Core Web API","datePublished":"2022-04-30T09:12:22+00:00","dateModified":"2024-01-31T14:17:00+00:00","mainEntityOfPage":{"@id":"https:\/\/code-maze.com\/google-charts-angular-aspnetcore-webapi\/"},"wordCount":937,"commentCount":2,"publisher":{"@id":"https:\/\/code-maze.com\/#organization"},"image":{"@id":"https:\/\/code-maze.com\/google-charts-angular-aspnetcore-webapi\/#primaryimage"},"thumbnailUrl":"https:\/\/code-maze.com\/wp-content\/uploads\/2021\/12\/social-aspnetcore.png","keywords":["Angular","asp.net core web api","Charts","Google Charts","web development"],"articleSection":["Angular","Web API"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/code-maze.com\/google-charts-angular-aspnetcore-webapi\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/code-maze.com\/google-charts-angular-aspnetcore-webapi\/","url":"https:\/\/code-maze.com\/google-charts-angular-aspnetcore-webapi\/","name":"Google Charts With Angular and ASP.NET Core Web API","isPartOf":{"@id":"https:\/\/code-maze.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/code-maze.com\/google-charts-angular-aspnetcore-webapi\/#primaryimage"},"image":{"@id":"https:\/\/code-maze.com\/google-charts-angular-aspnetcore-webapi\/#primaryimage"},"thumbnailUrl":"https:\/\/code-maze.com\/wp-content\/uploads\/2021\/12\/social-aspnetcore.png","datePublished":"2022-04-30T09:12:22+00:00","dateModified":"2024-01-31T14:17:00+00:00","description":"Let's learn how to use Google Charts for data visualization with angular and ASP.NET Core Web API through examples.","breadcrumb":{"@id":"https:\/\/code-maze.com\/google-charts-angular-aspnetcore-webapi\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/code-maze.com\/google-charts-angular-aspnetcore-webapi\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/code-maze.com\/google-charts-angular-aspnetcore-webapi\/#primaryimage","url":"https:\/\/code-maze.com\/wp-content\/uploads\/2021\/12\/social-aspnetcore.png","contentUrl":"https:\/\/code-maze.com\/wp-content\/uploads\/2021\/12\/social-aspnetcore.png","width":1100,"height":620,"caption":"ASP.NET Core"},{"@type":"BreadcrumbList","@id":"https:\/\/code-maze.com\/google-charts-angular-aspnetcore-webapi\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/code-maze.com\/"},{"@type":"ListItem","position":2,"name":"Google Charts With Angular and ASP.NET Core Web API"}]},{"@type":"WebSite","@id":"https:\/\/code-maze.com\/#website","url":"https:\/\/code-maze.com\/","name":"Code Maze","description":"Learn. Code. Succeed.","publisher":{"@id":"https:\/\/code-maze.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/code-maze.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/code-maze.com\/#organization","name":"Code Maze","url":"https:\/\/code-maze.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/code-maze.com\/#\/schema\/logo\/image\/","url":"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/01\/Code-Maze-Only-Logo-Transparent-HRez.png","contentUrl":"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/01\/Code-Maze-Only-Logo-Transparent-HRez.png","width":3511,"height":3510,"caption":"Code Maze"},"image":{"@id":"https:\/\/code-maze.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/CodeMazeBlog"]},{"@type":"Person","@id":"https:\/\/code-maze.com\/#\/schema\/person\/09d29b223012c8e94a68ba62861d0b04","name":"Code Maze","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/code-maze.com\/#\/schema\/person\/image\/","url":"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/01\/Code-Maze-Only-Logo-Transparent-HRez-150x150.png","contentUrl":"https:\/\/code-maze.com\/wp-content\/uploads\/2020\/01\/Code-Maze-Only-Logo-Transparent-HRez-150x150.png","caption":"Code Maze"},"description":"This is the standard author on the site. Most articles are published by individual authors, with their profiles, but when several authors have contributed, we publish collectively as a part of this profile.","sameAs":["https:\/\/www.linkedin.com\/company\/codemaze\/","https:\/\/x.com\/https:\/\/twitter.com\/CodeMazeBlog"],"url":"https:\/\/code-maze.com\/author\/codemazecontributor\/"}]}},"_links":{"self":[{"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/posts\/69194","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/comments?post=69194"}],"version-history":[{"count":7,"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/posts\/69194\/revisions"}],"predecessor-version":[{"id":75813,"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/posts\/69194\/revisions\/75813"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/media\/62187"}],"wp:attachment":[{"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/media?parent=69194"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/categories?post=69194"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/code-maze.com\/wp-json\/wp\/v2\/tags?post=69194"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}