Manually Creating a Chart
While the Chart Wizard is very handy for quickly creating a Data Source and Chart Component, there are only a few different chart types available. To use more advanced chart types, they must be created manually.
Return to the Data Sources Panel. Open up the MDX Queries section and select MDX Over MondrianJNDI
Name the new query SalesByProductCountry. Type in SampleData as the JNDI source, then type in SteelWheels as the Mondrian Schema. Edit the query and use the following MDX query code:
select NON EMPTY({Descendants([Markets].[All Markets] ,[Markets].[Country])}) on ROWS,
NON EMPTY({Descendants([Product].[All Products] ,[Product].[Line])}) on Columns
from [SteelWheelsSales]
|
The result is shown below:
Save the Dashboard.
Navigate to the Components Panel. Open up the Charts selection and choose CCC Heat Grid.
Name the Heat Grid SalesByProductCountry_Grid
Provide a title: Sales By Product Country
Type in SalesByProductCountry as the data source.
Set the Height to 300 pixels and the Width to 600 pixels
Assign the HTML Object to Panel_2
Set the crosstabMode property to True.
The result is shown below:
Save the Dashboard and Preview:
Note that the above heatmap picture is in the style of CTools CCC version 2. Pentaho Server version 7 and later use the newer version 3.0 of the CTools CCC package and those heatmaps may look a bit different.
Exercise 2: Creating a Table Display
Create a Table display of the SalesByProductCountry query in Panel_3. You can find the “Table Component” under the Others folder in the Components Panel (or under “Standard” folder in Pentaho 8.x. If not found check the other folders as newer versions of Pentaho may rearrange these items).
You can change the formatting of the table (for example if the Table Display runs outside of the panel) by adding a CSS resource to the dashboard. Return to the Layout Panel and click on the icon to Add a Resource. For the Resource Type select Css and for the Resource Source choose Code Snippet. Click the OK button to create the new resource. Give the code snippet a new name such as “TableFormatCSS”. Then for the CSS code itself use something like:
.dataTable {
table-layout: fixed;
}
Add any other font formats, color formats, etc. to this CSS snippet. Save the dashboard and preview it again.
If the table display still does not fit, consider increasing the number of grid columns on the dashboard layout for this panel and/or choose a different layout with perhaps a third large panel on a row by itself.
The next section will introduce how to add some interactive capabilities to the charts.
