{"id":397,"date":"2015-09-03T09:08:27","date_gmt":"2015-09-03T07:08:27","guid":{"rendered":"http:\/\/blog.thecodecampus.de\/?p=397"},"modified":"2023-12-20T20:17:39","modified_gmt":"2023-12-20T19:17:39","slug":"charting-in-angular-js","status":"publish","type":"post","link":"https:\/\/www.thecodecampus.de\/blog\/charting-in-angular-js\/","title":{"rendered":"Charting in Angular.js"},"content":{"rendered":"<p>It is a common scenario in our projects to display tons of data in a nice, elegant and informative way. The tool to do so exists since many decades: charts. In This blog post I give an overview of angular.js directives that can easily be used to create all sorts of charts.<\/p>\n<p>There is a variety of JavaScript charting libraries out there and it feels like a new one pops up every month. At w11k we use some of these directives for over 2 years \u2013 of course also in production. I selected 4 directives that worked best for me in the past.<\/p>\n<ul>\n<li>angularjs-nvd3-directives (NVD3)<\/li>\n<li>angular-google-chart (Google Charts)<\/li>\n<li>w11k-highcarts (Highcharts)<\/li>\n<li>Angular-charts.js (Charts.js)<\/li>\n<\/ul>\n<h2>Overview<\/h2>\n<p>To give you a short overview of what the features (e.g. chart types) of the libraries are you can take a look at the following table.<\/p>\n<table class=\"table table-striped table-hover\">\n<tbody>\n<tr>\n<td><strong>Feature<\/strong><\/td>\n<td><strong>w11k-highchars<\/strong><\/td>\n<td><strong>angular-google-chart<\/strong><\/td>\n<td><strong>angular-nvd3-directives<\/strong><\/td>\n<td><strong>angular-charts.js<\/strong><\/td>\n<\/tr>\n<tr>\n<td><strong>Free<\/strong><\/td>\n<td>\u2716<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td><strong>Based on<\/strong><\/td>\n<td>Highcharts<\/td>\n<td>Google Charts<\/td>\n<td>NVD3<\/td>\n<td>Charts.js<\/td>\n<\/tr>\n<tr>\n<td><strong>Line Chart<\/strong><\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td><strong>Pie Chart<\/strong><\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td><strong>Area Chart<\/strong><\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td><strong>Bar Chart<\/strong><\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td><strong>Column Chart<\/strong><\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<td>\u2716<\/td>\n<\/tr>\n<tr>\n<td><strong>Scatter Chart<\/strong><\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<td>\u2716<\/td>\n<\/tr>\n<tr>\n<td><strong>Radar Chart<\/strong><\/td>\n<td>\u2714<\/td>\n<td>\u2716<\/td>\n<td>\u2716<\/td>\n<td>\u2714<\/td>\n<\/tr>\n<tr>\n<td><strong>Combined Chart Types<\/strong><\/td>\n<td>\u2714<\/td>\n<td>\u2714<\/td>\n<td>\u2716<\/td>\n<td>\u2716<\/td>\n<\/tr>\n<tr>\n<td><strong>Additional Chart Types<\/strong><\/td>\n<td>Gauge, Doughnut<\/td>\n<td>Maps<\/td>\n<td>Bullet<\/td>\n<td>Doughnut<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<p>&nbsp;<\/p>\n<h2>In-Depth View<\/h2>\n<h3><strong>w11k-highcharts<\/strong><\/h3>\n<p>w11k-highcharts is a directive we wrote at w11k about two years ago. We recently release it as OpenSource on Github (<a href=\"https:\/\/github.com\/w11k\/w11k-highcharts\">https:\/\/github.com\/w11k\/w11k-highcharts<\/a>).<\/p>\n<p>The directive wraps Highcharts, a library which translates a JSON configuration object into a nice looking SVG. The top features besides the huge amount of chart types are that it supports animations, built-in drilldown, customizable all the way \u2013 from colors, to tooltips, labels, sizing and all the beauty you can imagine.<\/p>\n<p><a href=\"https:\/\/blog.thecodecampus.de\/wp-content\/uploads\/2015\/06\/angular-charts.png\"><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-400 aligncenter\" src=\"https:\/\/blog.thecodecampus.de\/wp-content\/uploads\/2015\/06\/highcharts-300x170.png\" alt=\"highcharts\" width=\"401\" height=\"227\" srcset=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2015\/06\/highcharts-300x170.png 300w, https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2015\/06\/highcharts.png 716w\" sizes=\"auto, (max-width: 401px) 100vw, 401px\" \/><\/a><\/p>\n<p>With all the nice configuration options comes a obvious downer, you have to learn the Highcharts API, which is well documented, readable and filled with JSFiddle examples. The project is highly active and you can mostly find the solution to your problem on <a href=\"https:\/\/stackoverflow.com\/questions\/tagged\/highcharts\">Stackoverflow<\/a>, where some of the developers are active.<\/p>\n<p>&nbsp;<\/p>\n<h3><strong>angular-google-chart<\/strong><\/h3>\n<p>angular-google-chart wraps Google Chart and also accepts a configuration object, which gets rendered into a SVG. In my opinion angular-google-chart\u2019s API isn\u2019t as nice as for example the Highcharts API but can easily be used to display simple charts. Unlike the Google Charts JS Library the angular.js wrapper only supports 6 Chart Types including Area, Column, Pie, Line Charts. Nonetheless it is great if you want to dive right into creating simple Charts.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-401 aligncenter\" src=\"https:\/\/blog.thecodecampus.de\/wp-content\/uploads\/2015\/06\/nvd3-300x272.png\" alt=\"nvd3\" width=\"222\" height=\"201\" srcset=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2015\/06\/nvd3-300x272.png 300w, https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2015\/06\/nvd3.png 316w\" sizes=\"auto, (max-width: 222px) 100vw, 222px\" \/><\/p>\n<p>&nbsp;<\/p>\n<h3><strong>angular-nvd3-directives<\/strong><\/h3>\n<p>This module wraps around the most versatile visualization-library out there. Data-Driven-Documents (short: D3) is not a charting library but can pretty much display anything you want it to. With all that freedom comes a ton of complexity and a \u201cnot so easy to use\u201d API.<\/p>\n<p>Therefore some folks created NVD3 on top of D3 whose intention was to build re-usable chart components with all the power D3 has, but with far less complexity.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" size-medium wp-image-399 aligncenter\" src=\"https:\/\/blog.thecodecampus.de\/wp-content\/uploads\/2015\/06\/google-charts-300x293.png\" alt=\"google-charts\" width=\"300\" height=\"293\" srcset=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2015\/06\/google-charts-300x293.png 300w, https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2015\/06\/google-charts.png 511w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/p>\n<p>The angular-nvd3-directives module wraps NVD3 and consists of multiple directives, one for each chart type. In difference to the previously described modules where you have one generic chart directive that is customizable by a configuration object, you use attributes to set some configuration options of the angular-nvd3-directives. The API Documentation talks a lot about the attributes that can be controlled and is structured the way I would want it to be.<\/p>\n<p>&nbsp;<\/p>\n<h3><strong>angular-charts.js<\/strong><\/h3>\n<p>angular-charts.js is pretty basic, looks awesome and is fairly easy to use. I personally like the look and feel of the charts. Like angular-nvd3-directives it requires you to use attribute rather than a huge configuration object in order to display a chart.<\/p>\n<p>It is a wrapper around Charts.js that only supports 6 chart types and makes a good job in hiding complexity from the developer.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\" wp-image-398 aligncenter\" src=\"https:\/\/blog.thecodecampus.de\/wp-content\/uploads\/2015\/06\/angular-charts-300x204.png\" alt=\"angular-charts\" width=\"376\" height=\"256\" srcset=\"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2015\/06\/angular-charts-300x204.png 300w, https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2015\/06\/angular-charts.png 570w\" sizes=\"auto, (max-width: 376px) 100vw, 376px\" \/><\/p>\n<p>If you want to create a chart with basically no effort and no high requirements, like drilldown or instructiveness I recommend you use this library.<\/p>\n<p>&nbsp;<\/p>\n<h2>Summary and Recommendation<\/h2>\n<p>After we took a brief look at the different charting libraries it\u2019s time to give you a little guideline on which library is best for you.<\/p>\n<p>If you don\u2019t want to spend any money on licenses and you have limited time &#8211; which seems to be the scenario in many cases \u2013 I would go with angular-charts.js. It has a small overhead of only a few Kilobytes and works pretty much out of the box and looks awesome in the default configuration. Another neat detail is, that it uses the HTML5 Canvas element if the Browser supports it \u2013 obviously fallbacks are provided for IE7\/8.<\/p>\n<p>But I found that in many other situations (mainly client projects) you need a more powerful charting library. After playing a bit with several D3-Wrappers we figured it wasn\u2019t exactly what we imagined, cause we couldn\u2019t create interactive charts without having to re-invent the wheel.<\/p>\n<p>That was when we started to use Highcharts a bit more extensively. At this point I should tell you that Highcharts is free of charge if you use it in a non-commercial website, but if you use it for client projects you probably want to purchase a license. We wrote our own wrapper, because none existed at the time and the more we got used to Highcharts the more we loved it. \u00a0It allows you to modify pretty much everything, including<\/p>\n<ul>\n<li>Adjusting colors to match the Corporate Identity of the client<\/li>\n<li>Combining multiple chart types<\/li>\n<li>Customizable tooltips<\/li>\n<li>Event handlers<\/li>\n<li>Drilldown\/Rollup support<\/li>\n<li>Support down to IE8<\/li>\n<\/ul>\n<p>If you want to find out how easy it is to integrate w11k-highcharts into your project head over to <a href=\"https:\/\/github.com\/w11k\/w11k-highcharts\">https:\/\/github.com\/w11k\/w11k-highcharts<\/a> and take a look at our directive. Furthermore I recommend you take a look at all the possibilities Highcharts offers at their demo page <a href=\"https:\/\/www.highcharts.com\/demo\">https:\/\/www.highcharts.com\/demo<\/a><\/p>\n<p>&nbsp;<\/p>\n<h2>Further Reading<\/h2>\n<ul>\n<li><a href=\"https:\/\/github.com\/w11k\/w11k-highcharts\">w11k-highcarts<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/angular-google-chart\/angular-google-chart\">angular-google-chart<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/angularjs-nvd3-directives\/angularjs-nvd3-directives\">angularjs-nvd3-directives<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/jtblin\/angular-chart.js\">Angular-charts.js<\/a><\/li>\n<li><a href=\"https:\/\/www.highcharts.com\/demo\">Highcharts Demos<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>It is a common scenario in our projects to display tons of data in a nice, elegant and informative way. The tool to do so exists since many decades: charts. In This blog post I give an overview of angular.js directives that can easily be used to create all sorts of charts. There is a [&#8230;]<br \/><a class=\"meta-big\" href=\"https:\/\/www.thecodecampus.de\/blog\/charting-in-angular-js\/\"> READ MORE<\/a><\/p>\n","protected":false},"author":6,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[62,51,52,53,54],"class_list":["post-397","post","type-post","status-publish","format-standard","hentry","category-angularjs","tag-angularjs","tag-charting","tag-charts","tag-graphs","tag-visualization"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.7 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Charting in Angular.js - Web Development Blog<\/title>\n<meta name=\"description\" content=\"Revolutionize data visualization! Charting in Angular JS made easy. Elevate your UI with dynamic and interactive charts. Boost insights\u2014explore now!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.thecodecampus.de\/blog\/charting-in-angular-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Charting in Angular.js - Web Development Blog\" \/>\n<meta property=\"og:description\" content=\"Revolutionize data visualization! Charting in Angular JS made easy. Elevate your UI with dynamic and interactive charts. Boost insights\u2014explore now!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.thecodecampus.de\/blog\/charting-in-angular-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Development tips and tricks - theCodeCampus Blog\" \/>\n<meta property=\"article:published_time\" content=\"2015-09-03T07:08:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-12-20T19:17:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/blog.thecodecampus.de\/wp-content\/uploads\/2015\/06\/highcharts-300x170.png\" \/>\n<meta name=\"author\" content=\"Kai Henzler\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Kai Henzler\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/charting-in-angular-js\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/charting-in-angular-js\\\/\"},\"author\":{\"name\":\"Kai Henzler\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/person\\\/b9decc610011ed03b2117b5e02032132\"},\"headline\":\"Charting in Angular.js\",\"datePublished\":\"2015-09-03T07:08:27+00:00\",\"dateModified\":\"2023-12-20T19:17:39+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/charting-in-angular-js\\\/\"},\"wordCount\":980,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/charting-in-angular-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/blog.thecodecampus.de\\\/wp-content\\\/uploads\\\/2015\\\/06\\\/highcharts-300x170.png\",\"keywords\":[\"AngularJS\",\"Charting\",\"Charts\",\"Graphs\",\"Visualization\"],\"articleSection\":[\"AngularJS 1\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/charting-in-angular-js\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/charting-in-angular-js\\\/\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/charting-in-angular-js\\\/\",\"name\":\"Charting in Angular.js - Web Development Blog\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/charting-in-angular-js\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/charting-in-angular-js\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/blog.thecodecampus.de\\\/wp-content\\\/uploads\\\/2015\\\/06\\\/highcharts-300x170.png\",\"datePublished\":\"2015-09-03T07:08:27+00:00\",\"dateModified\":\"2023-12-20T19:17:39+00:00\",\"description\":\"Revolutionize data visualization! Charting in Angular JS made easy. Elevate your UI with dynamic and interactive charts. Boost insights\u2014explore now!\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/charting-in-angular-js\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/charting-in-angular-js\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/charting-in-angular-js\\\/#primaryimage\",\"url\":\"https:\\\/\\\/blog.thecodecampus.de\\\/wp-content\\\/uploads\\\/2015\\\/06\\\/highcharts-300x170.png\",\"contentUrl\":\"https:\\\/\\\/blog.thecodecampus.de\\\/wp-content\\\/uploads\\\/2015\\\/06\\\/highcharts-300x170.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/charting-in-angular-js\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Charting in Angular.js\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\",\"name\":\"Web Development tips and tricks - theCodeCampus Blog\",\"description\":\"Tips, tricks, and experiences about developing web and mobile applications with Angular, TypeScript, and Testing.\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#organization\",\"name\":\"theCodeCampus\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch.jpg\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/01\\\/TCC-Logo-Bildmarke-quadratisch.jpg\",\"width\":156,\"height\":156,\"caption\":\"theCodeCampus\"},\"image\":{\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/#\\\/schema\\\/person\\\/b9decc610011ed03b2117b5e02032132\",\"name\":\"Kai Henzler\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/06\\\/kai-henzler-tcc-author-96x96.webp\",\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/06\\\/kai-henzler-tcc-author-96x96.webp\",\"contentUrl\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/wp-content\\\/uploads\\\/2024\\\/06\\\/kai-henzler-tcc-author-96x96.webp\",\"caption\":\"Kai Henzler\"},\"description\":\"I'm a web developer who is around since the AngularJS days (10+ years). My focus is on teaching others how to write simple and maintainable code.\",\"sameAs\":[\"https:\\\/\\\/www.linkedin.com\\\/in\\\/kai-henzler-58484599\\\/\"],\"url\":\"https:\\\/\\\/www.thecodecampus.de\\\/blog\\\/author\\\/khenzler\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Charting in Angular.js - Web Development Blog","description":"Revolutionize data visualization! Charting in Angular JS made easy. Elevate your UI with dynamic and interactive charts. Boost insights\u2014explore now!","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:\/\/www.thecodecampus.de\/blog\/charting-in-angular-js\/","og_locale":"en_US","og_type":"article","og_title":"Charting in Angular.js - Web Development Blog","og_description":"Revolutionize data visualization! Charting in Angular JS made easy. Elevate your UI with dynamic and interactive charts. Boost insights\u2014explore now!","og_url":"https:\/\/www.thecodecampus.de\/blog\/charting-in-angular-js\/","og_site_name":"Web Development tips and tricks - theCodeCampus Blog","article_published_time":"2015-09-03T07:08:27+00:00","article_modified_time":"2023-12-20T19:17:39+00:00","og_image":[{"url":"https:\/\/blog.thecodecampus.de\/wp-content\/uploads\/2015\/06\/highcharts-300x170.png","type":"","width":"","height":""}],"author":"Kai Henzler","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Kai Henzler","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.thecodecampus.de\/blog\/charting-in-angular-js\/#article","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/charting-in-angular-js\/"},"author":{"name":"Kai Henzler","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/person\/b9decc610011ed03b2117b5e02032132"},"headline":"Charting in Angular.js","datePublished":"2015-09-03T07:08:27+00:00","dateModified":"2023-12-20T19:17:39+00:00","mainEntityOfPage":{"@id":"https:\/\/www.thecodecampus.de\/blog\/charting-in-angular-js\/"},"wordCount":980,"commentCount":0,"publisher":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#organization"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/charting-in-angular-js\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.thecodecampus.de\/wp-content\/uploads\/2015\/06\/highcharts-300x170.png","keywords":["AngularJS","Charting","Charts","Graphs","Visualization"],"articleSection":["AngularJS 1"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.thecodecampus.de\/blog\/charting-in-angular-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.thecodecampus.de\/blog\/charting-in-angular-js\/","url":"https:\/\/www.thecodecampus.de\/blog\/charting-in-angular-js\/","name":"Charting in Angular.js - Web Development Blog","isPartOf":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.thecodecampus.de\/blog\/charting-in-angular-js\/#primaryimage"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/charting-in-angular-js\/#primaryimage"},"thumbnailUrl":"https:\/\/blog.thecodecampus.de\/wp-content\/uploads\/2015\/06\/highcharts-300x170.png","datePublished":"2015-09-03T07:08:27+00:00","dateModified":"2023-12-20T19:17:39+00:00","description":"Revolutionize data visualization! Charting in Angular JS made easy. Elevate your UI with dynamic and interactive charts. Boost insights\u2014explore now!","breadcrumb":{"@id":"https:\/\/www.thecodecampus.de\/blog\/charting-in-angular-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.thecodecampus.de\/blog\/charting-in-angular-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/charting-in-angular-js\/#primaryimage","url":"https:\/\/blog.thecodecampus.de\/wp-content\/uploads\/2015\/06\/highcharts-300x170.png","contentUrl":"https:\/\/blog.thecodecampus.de\/wp-content\/uploads\/2015\/06\/highcharts-300x170.png"},{"@type":"BreadcrumbList","@id":"https:\/\/www.thecodecampus.de\/blog\/charting-in-angular-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.thecodecampus.de\/blog\/"},{"@type":"ListItem","position":2,"name":"Charting in Angular.js"}]},{"@type":"WebSite","@id":"https:\/\/www.thecodecampus.de\/blog\/#website","url":"https:\/\/www.thecodecampus.de\/blog\/","name":"Web Development tips and tricks - theCodeCampus Blog","description":"Tips, tricks, and experiences about developing web and mobile applications with Angular, TypeScript, and Testing.","publisher":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.thecodecampus.de\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.thecodecampus.de\/blog\/#organization","name":"theCodeCampus","url":"https:\/\/www.thecodecampus.de\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch.jpg","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/01\/TCC-Logo-Bildmarke-quadratisch.jpg","width":156,"height":156,"caption":"theCodeCampus"},"image":{"@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.thecodecampus.de\/blog\/#\/schema\/person\/b9decc610011ed03b2117b5e02032132","name":"Kai Henzler","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/06\/kai-henzler-tcc-author-96x96.webp","url":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/06\/kai-henzler-tcc-author-96x96.webp","contentUrl":"https:\/\/www.thecodecampus.de\/blog\/wp-content\/uploads\/2024\/06\/kai-henzler-tcc-author-96x96.webp","caption":"Kai Henzler"},"description":"I'm a web developer who is around since the AngularJS days (10+ years). My focus is on teaching others how to write simple and maintainable code.","sameAs":["https:\/\/www.linkedin.com\/in\/kai-henzler-58484599\/"],"url":"https:\/\/www.thecodecampus.de\/blog\/author\/khenzler\/"}]}},"_links":{"self":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/397","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/users\/6"}],"replies":[{"embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/comments?post=397"}],"version-history":[{"count":10,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/397\/revisions"}],"predecessor-version":[{"id":2181,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/posts\/397\/revisions\/2181"}],"wp:attachment":[{"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/media?parent=397"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/categories?post=397"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.thecodecampus.de\/blog\/wp-json\/wp\/v2\/tags?post=397"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}