Last Updated on 2 April 2021 by Roberto De Pedrini
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.
Introduction Often, in our applications, we need to work with text strings, and DB2 SQL can come in very useful Read more
DB2 Database and SQL ... maybe the most important things on IBM i platform: here's a collection of FAQs, tips Read more
Comes directly with the Easter egg this IBM announcement for the news of the IBM i 7.4 version, iNext version Read more
Introduction "Generated Always Column": are columns, table fields, filled by DB2 engine: something like columns with a default value but Read more
