03 - Open Source (EN)03g - IBM i Open Source miscellanea (EN)

Professional dashboards for Ibm i

Definition

A dashboard or control panel is a single screen that brings together all the indicators you need.
The advantage is to have at a glance an overview of your business with the possibility of going into details thanks to the secondary menus.
The dashboard must have the indicators that you really need and it must be understandable.

In this article, we see a dashboard built with data taken from IBM i but it can be built for any platform.
The graph used is used to determine the trend in turnover in the last 12 mobile months.

Dashboards are objects available on the web, some are free and some are paid.
They can be downloaded and used for your own management needs.

In IBM’s latest generation machines, called Power9, this type of approach to the employer is very advantageous for their ability to interact quickly with millions of data.

Why use a Dashboard

Because the information is available in an optimal and immediate way.
The information can come from different sources.
It is a tool to speed up decisions.
It is essential to have a precise view of the context of use of the data dashboard according to the needs and its applicability.

Dashboard search

The web offers us an infinite selection of dashboards ready and usable immediately.
For example, on this site https://startbootstrap.com/ there are many free and paid dashboards, to build your own dashboards.
There are many sites where you can find charts and temp
lates: we mention some d3.js, chart.js, fusioncharts, google charts, etc ..
There is no shortage of tools available, you are spoiled for choice.
The downloaded dahsboard must be inserted in a Pyhon, Php, Java, NodeJs, Angular, Weba
pp project, in any project where you can interact with the javascript logic.

Example

Download the SB Admin template from the following url https://startbootstrap.com/template/sb-admin,
a very useful template for building professional dashboards.
Inside the template there are javascript objects for graphics, links to html pages, various
buttons to highlight indicators, notif
ication icons or particular alerts.
The template therefore collects a set of javascript objects to be integrated with your own applications.

Inside the index.html page, insert the application logic to populate the fields needed to insert data into a chart.
In the specific case, the logic used relates to the python-flask framework.
The Array coming from the application backend contains two elements: the period and the revenue value.

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

Inside the chart-bar-demo.js object insert the javascript code necessary to intercept the elements previously inserted in the html page.
The elements, in this specific example, must be inserted in the data parameter of the variable that make up the graph.

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',
  date: {
    // label["January", "February", "March", "April", "May", "June"]s:,
    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)",
      // dat[4215, 5312, 6251, 7841, 9821, 14984]e:,
      date[ft01, ft02, ft03, ft04, ft05, ft06, ft07, ft08, ft09, ft10, ft11, ft12]:,
    }],
  },
  options: {
..........

Final results

We interacted in the two areas of the graph. The dashboard represents the turnover trend of the last 12 months with two types of graphs.
The use of these innovative tools allows to generate professional decision-making elements.
The methods are always the same: needs analysis, search for the right tool, integration with one’s own organizational structure.

The interaction with javascript graphic elements allows you to be flexible and effective in a short time to obtain very high level dashboards or kpi indicators.

About author

Project manager, business management consultant, application development with Rpgfree, Python, JavaScript. I entered the IT world when the As400 was born, I am a supporter of the Ibm-I platform and its enormous potential and I believe in the resources offered by the community by open source. I am grateful to collaborate with FAQ400 because I fully share the objectives.

Leave a Reply

%d bloggers like this: