Pictochart Dashboard in Oracle JET

Hi All, Today i'll share how to implement dashboard in JET Application.we can use pictochart for dashboard which can be define lot of sections.
we'll use oj-flex and oj-table in this implementation.
Create a dashboard JET Application using my previous post JET Application then open the dashboard.js file and write the below code inside the DashboardViewModel function-

 var colorHandler = new oj.ColorAttributeGroupHandler();
      var colorMap = {jb:0,jb2:0,ppn:1,ppn2:1,nma:2,nma2:2,rahh:3,rahh2:3,
        sm:4,sm2:4,idtp:5,idtp2:5,ja:6,ja2:6,cfe:7,cfe2:7};
      this.pictoChartItems1 = ko.observableArray([
        {id:"jb", name: 'Job Boards: 64%', shape: 'circle', count:36},
        {id:"jb2", name: 'Job Boards: 64%', shape: 'circle', color: colorHandler.getValue(colorMap["jb"]), count: 64}
      ]);
      $(".stat1").css({color: colorHandler.getValue(colorMap["jb"])});

      this.pictoChartItems2 = ko.observableArray([
        {id: "ppn", name: 'Personal/ Professional Networks: 11%', shape: 'circle', count:89},
        {id: "ppn2", name: 'Personal/ Professional Networks: 11%', shape: 'circle', color: colorHandler.getValue(colorMap["ppn"]), count: 11}
      ]);
      $(".stat2").css({color: colorHandler.getValue(colorMap["ppn"])});

      colorHandler.getValue(8);
      this.pictoChartItems3 = ko.observableArray([
        {id: "nma", name: 'Newspaper/ Magazine Advertising: 10%', shape: 'circle', count:90},
        {id: "nma2", name: 'Newspaper/ Magazine Advertising: 10%', shape: 'circle', color: colorHandler.getValue(colorMap["nma"]), count: 10}
      ]);
      $(".stat3").css({color: colorHandler.getValue(colorMap["nma"])});

      this.pictoChartItems4 = ko.observableArray([
        {id: "rahh", name: 'Recruitment Agencies/ Head Hunters: 5%', shape: 'circle', count:95},
        {id: "rahh2", name: 'Recruitment Agencies/ Head Hunters: 5%', shape: 'circle', color: colorHandler.getValue(colorMap["rahh"]), count: 5}
      ]);
      $(".stat4").css({color: colorHandler.getValue(colorMap["rahh"])});

      colorHandler.getValue(9);
      this.pictoChartItems5 = ko.observableArray([
        {id: "sm", name: 'Social Media: 3%', shape: 'circle', count:97},
        {id: "sm2", name: 'Social Media: 3%', shape: 'circle', color: colorHandler.getValue(colorMap["sm"]), count: 3}
      ]);
      $(".stat5").css({color: colorHandler.getValue(colorMap["sm"])});

      this.pictoChartItems6 = ko.observableArray([
        {id: "idtp", name: 'Internal Database/ Talent Pool: 3%', shape: 'circle', count:97},
        {id: "idtp2", name: 'Internal Database/ Talent Pool: 3%', shape: 'circle', color: colorHandler.getValue(colorMap["idtp"]), count: 3}
      ]);
      $(".stat6").css({color: colorHandler.getValue(colorMap["idtp"])});

      this.pictoChartItems7 = ko.observableArray([
        {id: "ja", name: 'Job Aggregators: 2%', shape: 'circle', count:98},
        {id: "ja2", name: 'Job Aggregators: 2%', shape: 'circle', color: colorHandler.getValue(colorMap["ja"]), count: 2}
      ]);
      $(".stat7").css({color: colorHandler.getValue(colorMap["ja"])});

      this.pictoChartItems8 = ko.observableArray([
        {id: "cfe", name: 'Careers Fair and Exhibitions: 1%', shape: 'circle', count:99},
        {id: "cfe2", name: 'Careers Fair and Exhibitions: 1%', shape: 'circle', color: colorHandler.getValue(colorMap["cfe"]), count: 1}
      ]);
      $(".stat8").css({color: colorHandler.getValue(colorMap["cfe"])});

      // Tooltip elem for data items
      var tooltipElem = document.createElement('div');
      tooltipElem.style.padding = '3px';
      tooltipElem.style.textAlign = 'center';
      tooltipElem.style.fontWeight = 'bold';
      tooltipElem.style.color = '#606060';

      this.tooltipFunction = function(dataContext) {
        // Set a thick border for the data item tooltip
        var colorVal = colorMap[dataContext.id];
        dataContext.parentElement.style.borderWidth = "4px";
        dataContext.parentElement.style.borderColor = colorHandler.getValue(colorVal);
        tooltipElem.textContent = dataContext.name;
        // Return the elem and the chart will append it to the parentElement
        return {'insert':tooltipElem};
      }
    }

    var dashboardViewModel= new DashboardViewModel();

    $(
      function() {
        ko.applyBindings(pictoChartModel, document.getElementById('chart-container'));
      }
    );


Change the define method as well -
(['ojs/ojcore', 'knockout', 'jquery', 'ojs/ojknockout', 'ojs/ojpictochart'],
 Now change the dashboard.html file as below -
<html lang="en-us" style="height:100%;" dir="ltr">
  <head>
    <title>PictoChart - Use Case: Dashboard</title>
    <meta charset="UTF-8">
    <meta http-equiv="x-ua-compatible" content="IE=edge">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="icon" type="image/x-icon" href="../css/images/favicon.ico">
    <link rel="apple-touch-icon-precomposed" href="../css/images/touchicon.png">
    <meta name="apple-mobile-web-app-title" content="Oracle JET">
    <link rel="stylesheet" id="css" href="http://www.oracle.com/webfolder/technetwork/jet/css/libs/oj/v6.0.0/alta/oj-alta-min.css">
    <link rel="stylesheet" href="../css/demo.css">
    <script>
      // The "oj_whenReady" global variable enables a strategy that the busy context whenReady,
      // will implicitly add a busy state, until the application calls applicationBootstrapComplete
      // on the busy state context.
      window["oj_whenReady"] = true;
    </script>
    <script src="http://www.oracle.com/webfolder/technetwork/jet/js/libs/require/require.js"></script>
    <!-- RequireJS bootstrap file -->
    <script src="../js/main.js"></script>
    <script src="../js/demo.js"></script>
 
<script>!function(){function o(n,i){if(n&&i)for(var r in i)i.hasOwnProperty(r)&&(void 0===n[r]?n[r]=i[r]:n[r].constructor===Object&&i[r].constructor===Object?o(n[r],i[r]):n[r]=i[r])}try{var n=decodeURIComponent("");if(n.length>0&&window.JSON&&"function"==typeof window.JSON.parse){var i=JSON.parse(n);void 0!==window.BOOMR_config?o(window.BOOMR_config,i):window.BOOMR_config=i}}catch(o){window.console&&"function"==typeof window.console.error&&console.error("mPulse: Could not parse configuration",o)}}();</script>
<script>!function(e){function a(a){if(a&&a.data&&a.data.boomr_mq)e.BOOMR_mq=e.BOOMR_mq||[],e.BOOMR_mq.push(a.data.boomr_mq)}var t="https://s.go-mpulse.net/boomerang/";if("False"=="True")e.BOOMR_config=e.BOOMR_config||{},e.BOOMR_config.PageParams=e.BOOMR_config.PageParams||{},e.BOOMR_config.PageParams.pci=!0,t="https://s2.go-mpulse.net/boomerang/";if(function(){function a(a){e.BOOMR_onload=a&&a.timeStamp||(new Date).getTime()}if(!e.BOOMR||!e.BOOMR.version&&!e.BOOMR.snippetExecuted){e.BOOMR=e.BOOMR||{},e.BOOMR.snippetExecuted=!0;var n,i,r,o=document.createElement("iframe");if(e.addEventListener)e.addEventListener("load",a,!1);else if(e.attachEvent)e.attachEvent("onload",a);o.src="javascript:void(0)",o.title="",o.role="presentation",(o.frameElement||o).style.cssText="width:0;height:0;border:0;display:none;",r=document.getElementsByTagName("script")[0],r.parentNode.insertBefore(o,r);try{i=o.contentWindow.document}catch(e){n=document.domain,o.src="javascript:var d=document.open();d.domain='"+n+"';void(0);",i=o.contentWindow.document}i.open()._l=function(){var e=this.createElement("script");if(n)this.domain=n;e.id="boomr-if-as",e.src=t+"DXNLE-YBWWY-AR74T-WMD99-77VRA",BOOMR_lstart=(new Date).getTime(),this.body.appendChild(e)},i.write("<bo"+'dy onload="document._l();">'),i.close()}}(),"".length>0)if(e&&"performance"in e&&e.performance&&"function"==typeof e.performance.setResourceTimingBufferSize)e.performance.setResourceTimingBufferSize();if(function(){if(BOOMR=e.BOOMR||{},BOOMR.plugins=BOOMR.plugins||{},!BOOMR.plugins.AK){var a={i:!1,av:function(a){var t="http.initiator";if(a&&(!a[t]||"spa_hard"===a[t])){var n=""=="true"?1:0,i="",r=void 0!==e.aFeoApplied?1:0;if(BOOMR.addVar({"ak.v":13,"ak.cp":"82485","ak.ai":"165266","ak.ol":"0","ak.cr":54,"ak.ipv":4,"ak.proto":"h2","ak.rid":"b2ce734","ak.r":20691,"ak.a2":n,"ak.m":"dscx","ak.n":"essl","ak.bpcip":"106.205.42.0","ak.cport":17799,"ak.gh":"96.17.182.124","ak.quicv":"","ak.tlsv":"tls1.2","ak.0rtt":"","ak.csrc":"-","ak.acc":"","ak.feo":r}),""!==i)BOOMR.addVar("ak.ruds",i)}},rv:function(){var e=["ak.bpcip","ak.cport","ak.cr","ak.csrc","ak.gh","ak.ipv","ak.m","ak.n","ak.ol","ak.proto","ak.quicv","ak.tlsv","ak.0rtt","ak.r","ak.acc"];BOOMR.removeVar(e)}};BOOMR.plugins.AK={init:function(){if(!a.i){var e=BOOMR.subscribe;e("before_beacon",a.av,null,null),e("onbeacon",a.rv,null,null),a.i=!0}return this},is_complete:function(){return!0}}}}(),e.addEventListener)e.addEventListener("message",a);var n=e.navigator;if(n&&"serviceWorker"in n&&n.serviceWorker.addEventListener)n.serviceWorker.addEventListener("message",a)}(window);</script></head>
  <body class="demo-disable-bg-image">
    <div id="sampleDemo" style="" class="demo-padding demo-container">
      <div id="componentDemoContent" style="width: 1px; min-width: 100%;">
       
        <div id="chart-container">
          <h1>What is your preferred method of recruitment? (UK)</h1>
          <div class="oj-flex" style="margin: 5px; max-width: 820px;">
            <div class="oj-flex oj-sm-flex-direction-column" style="min-width:200px;display:inline-block;text-align: center;">
              <div class="oj-flex-item stat1" style="font-weight:bold;margin:10px;">Job <br/>Boards</div>
              <oj-picto-chart class="oj-flex-item" id='pictochart1'
                items="[[pictoChartItems1]]"
                tooltip.renderer="[[tooltipFunction]]"
                style="max-width:150px;width:100%;height:100%;max-height:150px;display:inline-block;">
              </oj-picto-chart>
              <div class="oj-flex-item stat1" style="margin:10px;background-color:#ececec;border-radius:5px;font-weight:bold;">64% </div>
            </div>
       
            <div class="oj-flex oj-sm-flex-direction-column" style="min-width:200px;display:inline-block;text-align: center;">
              <div class="oj-flex-item stat2" id="usage-stat1" style="font-weight:bold;margin:10px;"> Personal/ Professional <br/>Networks</div>
              <oj-picto-chart class="oj-flex-item" id='pictochart2'
                items="[[pictoChartItems2]]"
                tooltip.renderer="[[tooltipFunction]]"
                style="max-width:150px;width:100%;height:100%;max-height:150px;display:inline-block;">
              </oj-picto-chart>
              <div class="oj-flex-item stat2" style="margin:10px;background-color:#ececec;border-radius:5px;font-weight:bold;">11% </div>
            </div>
       
            <div class="oj-flex oj-sm-flex-direction-column" style="min-width:200px;display:inline-block;text-align: center;">
              <div class="oj-flex-item stat3" id="usage-stat2" style="font-weight:bold;margin:10px;">Newspaper/ Magazine <br/>advertising</div>
              <oj-picto-chart class="oj-flex-item" id='pictochart3'
                items="[[pictoChartItems3]]"
                tooltip.renderer="[[tooltipFunction]]"
                style="max-width:150px;width:100%;height:100%;max-height:150px;display:inline-block;">
              </oj-picto-chart>
              <div class="oj-flex-item stat3" style="margin:10px;background-color:#ececec;border-radius:5px;font-weight:bold;">10% </div>
            </div>
       
            <div class="oj-flex oj-sm-flex-direction-column" style="min-width:200px;display:inline-block;text-align: center;">
              <div class="oj-flex-item stat4" id="usage-stat3" style="font-weight:bold;margin:10px;">Recruitment agencies/<br/> Head Hunters</div>
              <oj-picto-chart class="oj-flex-item" id='pictochart4'
                items="[[pictoChartItems4]]"
                tooltip.renderer="[[tooltipFunction]]"
                style="max-width:150px;width:100%;height:100%;max-height:150px;display:inline-block;">
              </oj-picto-chart>
              <div class="oj-flex-item stat4" style="margin:10px;background-color:#ececec;border-radius:5px;font-weight:bold;">5% </div>
            </div>
       
            <div class="oj-flex oj-sm-flex-direction-column" style="min-width:200px;display:inline-block;text-align: center;">
              <div class="oj-flex-item stat5" id="usage-stat4" style="font-weight:bold;margin:10px;">Social <br/>Media</div>
              <oj-picto-chart class="oj-flex-item" id='pictochart5'
                items="[[pictoChartItems5]]"
                tooltip.renderer="[[tooltipFunction]]"
                style="max-width:150px;width:100%;height:100%;max-height:150px;display:inline-block;">
              </oj-picto-chart>
              <div class="oj-flex-item stat5" style="margin:10px;background-color:#ececec;border-radius:5px;font-weight:bold;">3% </div>
            </div>
       
            <div class="oj-flex oj-sm-flex-direction-column" style="min-width:200px;display:inline-block;text-align: center;">
              <div class="oj-flex-item stat6" id="usage-stat5" style="font-weight:bold;margin:10px;">Internal Database/ <br/>Talent Pool</div>
              <oj-picto-chart class="oj-flex-item" id='pictochart6'
                items="[[pictoChartItems6]]"
                tooltip.renderer="[[tooltipFunction]]"
                style="max-width:150px;width:100%;height:100%;max-height:150px;display:inline-block;">
              </oj-picto-chart>
              <div class="oj-flex-item stat6" style="margin:10px;background-color:#ececec;border-radius:5px;font-weight:bold;">3% </div>
            </div>
       
            <div class="oj-flex oj-sm-flex-direction-column" style="min-width:200px;display:inline-block;text-align: center;">
              <div class="oj-flex-item stat7" id="usage-stat6" style="font-weight:bold;margin:10px;"> Job Aggregators <br/> (eg. indeed)</div>
              <oj-picto-chart class="oj-flex-item" id='pictochart7'
                items="[[pictoChartItems7]]"
                tooltip.renderer="[[tooltipFunction]]"
                style="max-width:150px;width:100%;height:100%;max-height:150px;display:inline-block;">
              </oj-picto-chart>
              <div class="oj-flex-item stat7" style="margin:10px;background-color:#ececec;border-radius:5px;font-weight:bold;">2% </div>
            </div>
       
            <div class="oj-flex oj-sm-flex-direction-column" style="min-width:200px;display:inline-block;text-align: center;">
              <div class="oj-flex-item stat8" id="usage-stat7" style="font-weight:bold;margin:10px;"> Careers Fair and <br/>Exhibitions</div>
              <oj-picto-chart class="oj-flex-item" id='pictochart8'
                items="[[pictoChartItems8]]"
                tooltip.renderer="[[tooltipFunction]]"
                style="max-width:150px;width:100%;height:100%;max-height:150px;display:inline-block;">
              </oj-picto-chart>
              <div class="oj-flex-item stat8" style="margin:10px;background-color:#ececec;border-radius:5px;font-weight:bold;">1% </div>
            </div>
          </div>
        </div>

       
      </div>
    </div>
  </body>
</html>

now save the env and run the application-

if you are not getting the same outlook just change your define function in dashboard.js to require.

Cheers :)