Dashboard professionali per Ibm i

Definizione

Una dashboard o pannello di controllo o cruscotto è una schermata unica che riunisce tutti gli indicatori di cui avete bisogno.
Il vantaggio è di avere in un solo colpo d’occhio una panoramica della vostra attività con la possibilità di entrare nei dettagli grazie ai menu secondari.  
Nella dashboard devono esserci gli indicatori di cui si ha veramente bisogno  e deve essere comprensibile.

In questo articolo vediamo una dashboard costruita con dati prelevati da Ibm i ma può essere costruita per qualsiasi piattaforma.
Il grafico utilizzato serve per determinare l’andamento del fatturato negli ultimi 12 mesi mobili.

Le dashboard sono oggetti disponibili sul web, alcune sono free altre a pagamento.
Possono essere scaricate e utilizzabili per le proprie esigenze gestionali.

Nelle macchine di ultima generazione di Ibm , denominate Power9, questo tipo di approccio al dato
risulta molto vantaggioso per la loro capacità di interagire velocemente con milioni di dati .

Perché utilizzare una Dashboard

Perché le informazioni sono disponibili in maniera ottimale e immediata.
Le informazioni possono provenire da fonti diverse.
E’ uno strumento per accelerare le decisioni.
E’ fondamentale avere una visione precisa del contesto di utilizzo della dashboard dati in funzione delle esigenze e della sua applicabilità.

Ricerca Dashboard

Il web ci offre una infinita selezione di dashboard pronte e utilizzabili da subito.
Per esempio in questo sito https://startbootstrap.com/ si trovano molte dashboard free e a pagamento, per costruire i propri cruscotti.
Molti sono i siti dove trovare grafici e template :
ne citiamo alcuni d3.js, chart.js, fusioncharts, google charts, ecc..
Gli strumenti a disposizioni non mancano, c’è l’imbarazzo della scelta.
La dahsboard scaricata va inserita in un progetto Pyhon , Php, Java, NodeJs, Angular, Webapp,
in un qualsiasi progetto in cui si può interagire con con le logiche di javascript.

Esempio

Eseguire il download dal seguente url https://startbootstrap.com/template/sb-admin il template SB Admin,
un template molto utile per costruire dashboard professionali.
All’interno del template si trovano gli oggetti javascript per i grafici, collegamenti a pagine html,
bottoni vari per evedenziare indicatori ,
icone di notifica o alert particolari.
Il template raccoglie, dunque, un insieme di oggetti javascript da integrare con le proprie applicazioni.

All’interno della pagina index.html inserire la logica applicativa per popolare i campi necessari per inserire i dati in un grafico.
Nel caso specifico la logica utilizzata è relativa al framework python-flask.
L’Array proveniente dal backend dell’applicazione contiene due elementi: il periodo e il valore del fatturato.

.........    
 </div>
 <!-- fatturato-->
  {%for i in range(0, lenFt12) %} 
   {%for r in range(0, lenrFt12) %} 
      {%if r==0 %}
       <input  id="{{ "ft" ~ i }}"  type="hidden" name="ft" value="{{rowsFt12[i][1]}}">  
       <input  id="{{ "aa" ~ i }}"  type="hidden" name="aa" value="{{rowsFt12[i][0]}}">  
      {%endif%} 
     {%endfor%} 
  {%endfor%} 
<div class="card mb-4">
  <div class="card-header">
    <i class="fas fa-table mr-1"></i>
  DataTable Example
</div>
..............

All’interno dell’oggetto chart-bar-demo.js inserire il codice javascript necessario per intercettare gli elementi inseriti precedentemente nella pagina html.
Gli elementi, in questo specifico esempio, vanno insertiti nel parametro data della variabile che compongono il grafico.

var ft01 = document.getElementById("ft0")  ; 
var ft02 = document.getElementById("ft1")  ;
var ft03 = document.getElementById("ft2")  ;
............
if(  ft01 !==  null    ) {
  var ft01 = document.getElementById('ft0').value;
  }
  else {
    var ft01='0'
  }
...........

............
// Bar Chart Example
var ctx = document.getElementById("myBarChart");
var myLineChart = new Chart(ctx, {
  type: 'bar',
  data: {
    //labels: ["January", "February", "March", "April", "May", "June"],
    labels: [aa01, aa02,aa03,aa04, aa05, aa06, aa07, aa08, aa09, aa10, aa11, aa12],
    datasets: [{
      label: "Revenue",
      backgroundColor: "rgba(2,117,216,1)",
      borderColor: "rgba(2,117,216,1)",
      //data: [4215, 5312, 6251, 7841, 9821, 14984],
      data: [ft01, ft02, ft03, ft04, ft05, ft06, ft07, ft08, ft09, ft10, ft11, ft12],
    }],
  },
  options: {
..........

Risultato finale

Abbiamo interagito nelle due aree del grafico. La dashboard rappresenta l’andamento del fatturato ultimi 12 mesi con due tipi di grafici.
L’utilizzo di questi strumenti innovativi permette di generare elementi decisionali professionali.
Le modalità sono sempre le stesse: analisi del fabbisogno, ricerca dello strumento adatto, integrazione con la propria struttura organizzativa.

L’interazione con elementi grafici di javascript
consente di essere flessibili ed efficaci in poco tempo
per ottenere cruscotti o indicatori kpi di livello molto alto.