Hello Guys,
Here I am coming back to share with you one more useful
information in Pentaho CDE.
How to create Bar chart inside the table component.
With the advance table component property, we can create a pretty
flexible table so far we are only displaying raw data. But if we could display
data and charts on the rows? This is all made possible with what’s called
Addins
The use case for this concept is Table Component’s colType.
Before Addins existed we used to set the simple Column Types. Like
null, string, numeric and
so on.
Let’s start with a simple one. The DataBar
Open the Component Tab
Select the existing Table Component
Open the Column Types property editor
Click the Add button 4 times.
Set the columns to
·
string
·
string
·
numeric
·
dataBar
Save and Preview
In this image, You will notice that the data in our
last column has been replaced with graphical bars!
All Addins have options that we can
figure. Initially we will configure out option in a static
manner. Set the colours, height and so on.
We want to set the options
for the databar before the component is executed. This will be our
first exposure to some
important component functionality. Pre Execution
Pre Execution:
The Pre Execution Property
allows us to execute any javascript code we wish before the
component is executed.
Let’s start with a simple example.
Select the Table Component and open the Advanced Properties
Open the Pre Execution property Editor
Copy and paste the code below
function f(){
// In the Pre Execution we
are defining the options for this table and the dataBars
this.setAddInOptions("colType","dataBar",function(state){
return {
// Set to true, this
options includes the numeric value as well as the dataBar
includeValue:true,
// The width of the
dataBar in relation to the column width
widthRatio: 0.8,
// the top colour of the
dataBar
startColor: "green",
// the bottom colour of
the dataBar
endColor: "red"
};
});
}
Out Put:
Hope this post helps someone and feel free to give comments and suggestion
Sumit Bansal
