Picto Chart in Oracle JET

Hi Guys, In this post i'll share some data visualization concept.I have created a Picto Chart which we can use for Employee, Department to show how many resources are active in the org.
lets take a look for implementation part.

I have created a JET project and added my new module Employee in the project in previous post you can refer my previous post Add New Module in JET now i'll show you how to work on Picto Chart in Employee Module.

open employee.js file and add below code -
/*
 * To change this license header, choose License Headers in Project Properties.
 * To change this template file, choose Tools | Templates
 * and open the template in the editor.
 */

/**
 * employees module
 */
define(['ojs/ojcore', 'knockout', 'ojs/ojpictochart'
], function (oj, ko) {
    /**
     * The view model for the main content view template
     */
    function employeesContentViewModel() {
        var self = this;
        self.pictoChartItems = ko.observableArray([
        {name: 'Have Sleep Problems', shape: 'human', count:7, color: '#ed6647'},
        {name: 'Sleep Well', shape: 'human', count: 3}
      ]);
    }
   
    return employeesContentViewModel;
});

Now open your employees.html file and add below code-

<!--

To change this license header, choose License Headers in Project Properties.

To change this template file, choose Tools | Templates

and open the template in the editor.

-->

<div>

<h1>employees</h1>

<oj-picto-chart id='pictochart1' 

            items="[[pictoChartItems]]"

            animation-on-display="auto"

            column-count="5"

            style="vertical-align:middle; margin-right:15px">

</oj-picto-chart>

<div style="display:inline-block; vertical-align:middle; font-weight:bold">

            <span style="color:#333333; font-size:1.1em">7 out of 10 Employees </span><br>

            <span style="color:#ed6647; font-size:1.3em">have sleep problems.</span>

</div>

</div>

now you have done save your work space and the JET application.

in next minute below window will appear.

So that is how we can use picto chart in our application we can add more style and other element as per our requirement.

Cheers Guys :)