{"id":448,"date":"2022-02-16T12:21:38","date_gmt":"2022-02-16T12:21:38","guid":{"rendered":"https:\/\/www.kindsonthegenius.com\/spring-boot\/?p=448"},"modified":"2022-02-16T12:21:38","modified_gmt":"2022-02-16T12:21:38","slug":"spring-boot-part-9-adding-graphs-and-charts","status":"publish","type":"post","link":"https:\/\/www.kindsonthegenius.com\/spring-boot\/spring-boot-part-9-adding-graphs-and-charts\/","title":{"rendered":"Spring Boot \u2013 Part 9 &#8211; Adding Graphs and Charts"},"content":{"rendered":"<p>This is Part 9 of our complete application in Spring Boot &#8211; FleetMS version 2. In this part, you will learn how to setup various type so of charts in your application. This would be quite interesting and clear since we already have\u00a0 the charts template in our application.<\/p>\n<ol>\n<li><a href=\"#t1\">Line Bar and Radar Charts<\/a><\/li>\n<li><a href=\"#t2\">Doughnut,\u00a0Polar, Radar Charts<\/a><\/li>\n<li><a href=\"#t3\">Getting Data Summary<\/a><\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<h4><strong id=\"t1\">1. Line, Bar and Radar Charts<\/strong><\/h4>\n<p>In this tutorial, we would add a line chart using the data in the Transactions table. The data in the transactions table include a transaction amount and purpose. The same procedure applies to Radar and Bar charts as well.<\/p>\n<p>Follow the steps below:<\/p>\n<p><strong>Step 1<\/strong> &#8211; Open the reportsController and add the code to pass the list of transactions to the view using a model object<\/p>\n<p><strong>Step 2<\/strong> &#8211; In the accounts.html page, create the transactions variable using the code below:<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #007700;\">&lt;script <\/span><span style=\"color: #0000cc;\">th:inline=<\/span><span style=\"background-color: #fff0f0;\">\"javascript\"<\/span><span style=\"color: #007700;\">&gt;<\/span>\r\n    <span style=\"color: #008800; font-weight: bold;\">var<\/span> transactions <span style=\"color: #333333;\">=<\/span> [[${<span style=\"color: #996633;\">transactions<\/span>}]]\r\n<span style=\"color: #007700;\">&lt;\/script&gt;<\/span>\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>Step 3<\/strong> &#8211; Open the\u00a0 <em>chartjs-custom.js<\/em> file and add the following to create your x and y data for the line graph. The data is coming from the <em><strong>purpose<\/strong><\/em> and <strong><em>amount<\/em><\/strong> fields of the transactions array.<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #008800; font-weight: bold;\">var<\/span> transaction_x <span style=\"color: #333333;\">=<\/span> expenses.map(x <span style=\"color: #333333;\">=&gt;<\/span> x[<span style=\"background-color: #fff0f0;\">\"amount\"<\/span>])\r\n<span style=\"color: #008800; font-weight: bold;\">var<\/span> transaction_y <span style=\"color: #333333;\">=<\/span> expenses.map(x <span style=\"color: #333333;\">=&gt;<\/span> x[<span style=\"background-color: #fff0f0;\">\"purpose\"<\/span>])\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>Step 4 &#8211;<\/strong> In the lineChartData area, replace the labels with <strong><em>transaction_x<\/em><\/strong> and the data with <strong><em>transactions_y<\/em><\/strong>. Fire up the application and see the chart show up! You can also add new transaction to the transaction table and see it update in the chart.<\/p>\n<p>&nbsp;<\/p>\n<h4><strong id=\"t2\">2. Doughnut, Pie and Polar Chart<\/strong><\/h4>\n<p>This three types of chart\u00a0 works a bit different than the previous three.\u00a0 In this case you need to specify individual values of the data points. For example, you need to change each value attribute of the chartData as well as the color. Follow the steps below:<\/p>\n<p><strong>Step 1<\/strong> &#8211; For each value attribute of the chart, replace the value with transaction_y[0], transaction_y[1] etc<\/p>\n<p><strong>Step 2<\/strong> &#8211; Test the application to see it works<\/p>\n<p>There are a lot more that can be done to customize the charts, but this would be easier using libraries that can integrate with Angular. I&#8217;ll have to reserve that for FleetMS version 3 where we&#8217;ll be using <em><strong>Angular<\/strong><\/em>, <em><strong>Node<\/strong><\/em> and <em><strong>Postgres<\/strong><\/em>.<\/p>\n<p>&nbsp;<\/p>\n<h4><strong id=\"t3\">3. Getting Data Summary<\/strong><\/h4>\n<p>Most times in chart reports, you would like to display some kind of summary. For example:<\/p>\n<ul>\n<li>How many employees were hired in a period<\/li>\n<li>The count of employees by country<\/li>\n<li>How much was spent by month\u00a0 and so on<\/li>\n<\/ul>\n<p>In this example, we would display the count of employee by country. This would require extending our JPA repository using SQL query. Follow the steps below:<\/p>\n<p><strong>Step 1<\/strong> &#8211; Extend your EmployeeRepository using the following code that uses native SQL query to retrieve count of employees by city<\/p>\n<pre style=\"margin: 0; line-height: 125%;\"><span style=\"color: #555555; font-weight: bold;\">@Query<\/span><span style=\"color: #333333;\">(<\/span>value<span style=\"color: #333333;\">=<\/span><span style=\"background-color: #fff0f0;\">\"SELECT city, count(*) FROM Employee GROUP BY city\"<\/span><span style=\"color: #333333;\">,<\/span>\r\n\t\tnativeQuery<span style=\"color: #333333;\">=<\/span><span style=\"color: #008800; font-weight: bold;\">true<\/span><span style=\"color: #333333;\">)<\/span>\r\nList<span style=\"color: #333333;\">&lt;<\/span>Object<span style=\"color: #333333;\">&gt;<\/span> <span style=\"color: #0066bb; font-weight: bold;\">getCountByCountry<\/span><span style=\"color: #333333;\">();<\/span>\r\n<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>Step 2<\/strong> &#8211; In the ReportsController, send this data accross to the view same way you sent transactions. I call it employeeCount.<\/p>\n<p><strong>Step 3<\/strong> &#8211; In the accounts.html, retrieve this variable and pass it accross to the custom-chart.js file<\/p>\n<p><strong>Step 4<\/strong> &#8211; Get the employeeCount variable in the custom-chart.js file and the use it to set the charts as you wish.<\/p>\n<p>I recommend you watch the video for a step by step tutorial.<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<!-- AddThis Advanced Settings generic via filter on the_content --><!-- AddThis Share Buttons generic via filter on the_content -->","protected":false},"excerpt":{"rendered":"<p>This is Part 9 of our complete application in Spring Boot &#8211; FleetMS version 2. In this part, you will learn how to setup various &hellip; <!-- AddThis Advanced Settings generic via filter on get_the_excerpt --><!-- AddThis Share Buttons generic via filter on get_the_excerpt --><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[2],"tags":[55,58,56,57],"class_list":["post-448","post","type-post","status-publish","format-standard","hentry","category-spring-boot-tutorials","tag-charts","tag-dashboard","tag-graphs","tag-reports"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.6 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Spring Boot \u2013 Part 9 - Adding Graphs and Charts - Learn Spring Boot<\/title>\n<meta name=\"description\" content=\"In this tutorial, you will learn how to display various kinds of charts and graphs dynamically based on data\" \/>\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.kindsonthegenius.com\/spring-boot\/spring-boot-part-9-adding-graphs-and-charts\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Spring Boot \u2013 Part 9 - Adding Graphs and Charts - Learn Spring Boot\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, you will learn how to display various kinds of charts and graphs dynamically based on data\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.kindsonthegenius.com\/spring-boot\/spring-boot-part-9-adding-graphs-and-charts\/\" \/>\n<meta property=\"og:site_name\" content=\"Learn Spring Boot\" \/>\n<meta property=\"article:published_time\" content=\"2022-02-16T12:21:38+00:00\" \/>\n<meta name=\"author\" content=\"kindsonthegenius\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"kindsonthegenius\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/spring-boot-part-9-adding-graphs-and-charts\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/spring-boot-part-9-adding-graphs-and-charts\\\/\"},\"author\":{\"name\":\"kindsonthegenius\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/#\\\/schema\\\/person\\\/7f8fc5792578d2ff54003fcebe6c46b5\"},\"headline\":\"Spring Boot \u2013 Part 9 &#8211; Adding Graphs and Charts\",\"datePublished\":\"2022-02-16T12:21:38+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/spring-boot-part-9-adding-graphs-and-charts\\\/\"},\"wordCount\":525,\"commentCount\":0,\"keywords\":[\"Charts\",\"dashboard\",\"Graphs\",\"reports\"],\"articleSection\":[\"Spring Boot Tutorials\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/spring-boot-part-9-adding-graphs-and-charts\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/spring-boot-part-9-adding-graphs-and-charts\\\/\",\"url\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/spring-boot-part-9-adding-graphs-and-charts\\\/\",\"name\":\"Spring Boot \u2013 Part 9 - Adding Graphs and Charts - Learn Spring Boot\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/#website\"},\"datePublished\":\"2022-02-16T12:21:38+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/#\\\/schema\\\/person\\\/7f8fc5792578d2ff54003fcebe6c46b5\"},\"description\":\"In this tutorial, you will learn how to display various kinds of charts and graphs dynamically based on data\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/spring-boot-part-9-adding-graphs-and-charts\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/spring-boot-part-9-adding-graphs-and-charts\\\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/spring-boot-part-9-adding-graphs-and-charts\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Spring Boot \u2013 Part 9 &#8211; Adding Graphs and Charts\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/#website\",\"url\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/\",\"name\":\"Learn Spring Boot\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/#\\\/schema\\\/person\\\/7f8fc5792578d2ff54003fcebe6c46b5\",\"name\":\"kindsonthegenius\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b9d710de456c3d85e5614c3a6992fa3d527425e2ab32b8bd5d85bfbaa235004b?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b9d710de456c3d85e5614c3a6992fa3d527425e2ab32b8bd5d85bfbaa235004b?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b9d710de456c3d85e5614c3a6992fa3d527425e2ab32b8bd5d85bfbaa235004b?s=96&d=mm&r=g\",\"caption\":\"kindsonthegenius\"},\"url\":\"https:\\\/\\\/www.kindsonthegenius.com\\\/spring-boot\\\/author\\\/kindsonthegenius-3\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Spring Boot \u2013 Part 9 - Adding Graphs and Charts - Learn Spring Boot","description":"In this tutorial, you will learn how to display various kinds of charts and graphs dynamically based on data","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.kindsonthegenius.com\/spring-boot\/spring-boot-part-9-adding-graphs-and-charts\/","og_locale":"en_US","og_type":"article","og_title":"Spring Boot \u2013 Part 9 - Adding Graphs and Charts - Learn Spring Boot","og_description":"In this tutorial, you will learn how to display various kinds of charts and graphs dynamically based on data","og_url":"https:\/\/www.kindsonthegenius.com\/spring-boot\/spring-boot-part-9-adding-graphs-and-charts\/","og_site_name":"Learn Spring Boot","article_published_time":"2022-02-16T12:21:38+00:00","author":"kindsonthegenius","twitter_card":"summary_large_image","twitter_misc":{"Written by":"kindsonthegenius","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.kindsonthegenius.com\/spring-boot\/spring-boot-part-9-adding-graphs-and-charts\/#article","isPartOf":{"@id":"https:\/\/www.kindsonthegenius.com\/spring-boot\/spring-boot-part-9-adding-graphs-and-charts\/"},"author":{"name":"kindsonthegenius","@id":"https:\/\/www.kindsonthegenius.com\/spring-boot\/#\/schema\/person\/7f8fc5792578d2ff54003fcebe6c46b5"},"headline":"Spring Boot \u2013 Part 9 &#8211; Adding Graphs and Charts","datePublished":"2022-02-16T12:21:38+00:00","mainEntityOfPage":{"@id":"https:\/\/www.kindsonthegenius.com\/spring-boot\/spring-boot-part-9-adding-graphs-and-charts\/"},"wordCount":525,"commentCount":0,"keywords":["Charts","dashboard","Graphs","reports"],"articleSection":["Spring Boot Tutorials"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.kindsonthegenius.com\/spring-boot\/spring-boot-part-9-adding-graphs-and-charts\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.kindsonthegenius.com\/spring-boot\/spring-boot-part-9-adding-graphs-and-charts\/","url":"https:\/\/www.kindsonthegenius.com\/spring-boot\/spring-boot-part-9-adding-graphs-and-charts\/","name":"Spring Boot \u2013 Part 9 - Adding Graphs and Charts - Learn Spring Boot","isPartOf":{"@id":"https:\/\/www.kindsonthegenius.com\/spring-boot\/#website"},"datePublished":"2022-02-16T12:21:38+00:00","author":{"@id":"https:\/\/www.kindsonthegenius.com\/spring-boot\/#\/schema\/person\/7f8fc5792578d2ff54003fcebe6c46b5"},"description":"In this tutorial, you will learn how to display various kinds of charts and graphs dynamically based on data","breadcrumb":{"@id":"https:\/\/www.kindsonthegenius.com\/spring-boot\/spring-boot-part-9-adding-graphs-and-charts\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.kindsonthegenius.com\/spring-boot\/spring-boot-part-9-adding-graphs-and-charts\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.kindsonthegenius.com\/spring-boot\/spring-boot-part-9-adding-graphs-and-charts\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.kindsonthegenius.com\/spring-boot\/"},{"@type":"ListItem","position":2,"name":"Spring Boot \u2013 Part 9 &#8211; Adding Graphs and Charts"}]},{"@type":"WebSite","@id":"https:\/\/www.kindsonthegenius.com\/spring-boot\/#website","url":"https:\/\/www.kindsonthegenius.com\/spring-boot\/","name":"Learn Spring Boot","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.kindsonthegenius.com\/spring-boot\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.kindsonthegenius.com\/spring-boot\/#\/schema\/person\/7f8fc5792578d2ff54003fcebe6c46b5","name":"kindsonthegenius","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/b9d710de456c3d85e5614c3a6992fa3d527425e2ab32b8bd5d85bfbaa235004b?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/b9d710de456c3d85e5614c3a6992fa3d527425e2ab32b8bd5d85bfbaa235004b?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b9d710de456c3d85e5614c3a6992fa3d527425e2ab32b8bd5d85bfbaa235004b?s=96&d=mm&r=g","caption":"kindsonthegenius"},"url":"https:\/\/www.kindsonthegenius.com\/spring-boot\/author\/kindsonthegenius-3\/"}]}},"_links":{"self":[{"href":"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/posts\/448","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/comments?post=448"}],"version-history":[{"count":2,"href":"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/posts\/448\/revisions"}],"predecessor-version":[{"id":450,"href":"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/posts\/448\/revisions\/450"}],"wp:attachment":[{"href":"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/media?parent=448"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/categories?post=448"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.kindsonthegenius.com\/spring-boot\/wp-json\/wp\/v2\/tags?post=448"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}