{"id":2364,"date":"2016-09-01T15:22:14","date_gmt":"2016-09-01T15:22:14","guid":{"rendered":"https:\/\/www.anychart.com\/blog\/?p=2364"},"modified":"2016-09-01T15:31:20","modified_gmt":"2016-09-01T15:31:20","slug":"hr-dashboard-anychart-javascript-charts_human_resources_data_visualization","status":"publish","type":"post","link":"https:\/\/www.anychart.com\/blog\/2016\/09\/01\/hr-dashboard-anychart-javascript-charts_human_resources_data_visualization\/","title":{"rendered":"HR Dashboard \u2013 Built With AnyChart JavaScript (HTML5) Charts Library"},"content":{"rendered":"

An HR dashboard is\u00a0a powerful\u00a0BI solution<\/strong>\u00a0that can\u00a0mightily facilitate making right, data-driven decisions about the workforce in\u00a0your company \u2013 from recruiting and training courses to compensations and job promotions. Smart visualization of all relevant staff-related data, with all charts and graphs<\/a> on a single page, allows\u00a0your Human Resources Department to see various metrics at-a-glance. As a result, HR managers are given the power to easily identify trends, outliers, and relationships when it comes to reports and data analysis, and to make sure each decision is well-timed and will drive even more success for your enterprise.<\/p>\n

After all, it is the\u00a0employees that are the most valuable asset.<\/p>\n

To inspire and show you how easy it gets\u00a0to implement this approach with the help of AnyChart JS Charts library<\/a>, we added an interactive JavaScript-based Human Resources Dashboard<\/a> to the Business Solutions<\/a> section of our website as a new HTML5 business dashboard sample with the full source code. It\u00a0nicely visualizes various employee related data, including demographics, payrolls, performance measurements, and so on. Of course, you are welcome to fork this sample<\/a> and use our HR\u00a0Dashboard fully or partially to create your own solution.<\/p>\n

\"Interactive<\/a><\/p>\n

Now let’s have a closer look at this interactive HTML5 dashboard, including its composition and some peculiar features.<\/p>\n

Charts and Interactivity<\/h2>\n

The HR Dashboard we are showcasing\u00a0consists of eight interactive\u00a0JavaScript (HTML5) charts.<\/a>\u00a0There are five donut (doughnut) charts<\/a>, one bar chart<\/a>, one column (vertical bar) chart<\/a>, and one stacked column chart<\/a>\u00a0in the sample. Each JS graph is provided with\u00a0sticky tooltips<\/a>\u00a0to highlight the most important data\u00a0and\u00a0display\u00a0additional\u00a0information for a better analysis.<\/p>\n

As stylized pie charts<\/a> with a hole in the center, donut charts<\/strong> are very helpful when you need to show\u00a0a simple composition. That is why we\u00a0picked\u00a0this chart type<\/a>\u00a0for\u00a0displaying the workforce demographics as\u00a0the\u00a0breakdown of staff by gender in each department\u00a0\u2013 manufacture, sales, engineering, and finance. The\u00a0fifth donut chart shows the composition of the whole staff by employee grade, 3rd to 12th.<\/p>\n

Clicking on\u00a0any slice of each\u00a0donut chart makes it exploded<\/a>, or\u00a0pulled out.\u00a0This feature\u00a0is useful for emphasizing some data that might be especially important. The donut hole size<\/a> can be easily customized, just as everything else in AnyChart, so we made it sufficient to display and highlight the total numbers of employees, by department and overall.<\/p>\n

Column charts<\/strong> proved to be good at visualizing\u00a0the headcount growth in the past few years. However, to display\u00a0the number of employees by monthly salary, we chose\u00a0bar charts<\/strong> instead. The main reason is that\u00a0some series have quite long descriptions that look much better near horizontal bars.<\/p>\n

Finally, to provide\u00a0visibility on an individual level, the stacked column chart<\/strong> at the bottom of the HR Dashboard displays skills and abilities of each employee based on scores on\u00a0a five-point scale. It also\u00a0allows HR\u00a0managers to compare employees by their overall\u00a0qualification. We imagined that\u00a0there are 100 employees in some fictional company\u00a0and\u00a0switched on\u00a0the Scroller UI<\/a> to facilitate navigation. As a result, HR executives and managers can easily identify and compare each employee’s absolute and relative strengths and weaknesses. This is essential when\u00a0considering new appointments, organizing\u00a0training courses, and so on to contribute to the overall (or some\u00a0certain project’s) productivity.<\/p>\n

HR Dashboard Features<\/h2>\n

Just like all the JS\/HTML5\u00a0charts\u00a0and samples powered by AnyChart, this Human Resources Dashboard\u00a0is very simple to integrate into any website or app<\/strong>. The reasons are as follows.<\/p>\n

First, the amount of code required to create such an HTML5 dashboard with AnyChart JS Charts library is very small, and the code is\u00a0easy-to-understand.<\/p>\n

Second, any JavaScript dashboard powered by AnyChart can be customized literally in any way with ease, to meet your needs and preferences.<\/p>\n

Third, replacing our sample data by your own data requires\u00a0really small\u00a0efforts. As a result,\u00a0you can get a beautiful, helpful business dashboard up and running very quickly.<\/p>\n

Another great feature is that the appearance of this JS dashboard is neatly tuned up so the visualization looks great on all screens<\/strong> you might have (or imagine), including those of the following:<\/p>\n