Visualizing data using CTools

After we prepare Pentaho Data Integration transformation as a data source, let us move further to develop data visualizations using CTools. See Chapter 4, Pentaho Business Analytics Tools for the introduction of the tool.

Visualizing trends using a line chart

The following steps will help you create a line chart using a PDI data source:

  1. In the PUC Browser Panel window, right-click on NYSE Stock Price – Hive and choose Edit; the CDE editor appears. In the menu bar, click on the Layout menu. Explore the layout of this dashboard. Its structure can be represented by the following diagram:
    Visualizing trends using a line chart
  2. Using the same procedure to create a line chart component described in Chapter 4, Pentaho Business Analytics Tools, type in the values for the following line chart's properties:
    • Name: ccc_line_chart
    • Title: Average Close Price Trend
    • Datasource: line_trend_data
    • Height: 300
    • HtmlObject: Panel_1
    • seriesInRows: False
  3. In the menu bar, click on Save.
  4. In the Browser Panel window, double-click on the NYSE Stock Price – Hive menu to open the dashboard page.

Interactivity using a parameter

The following steps will help you create a stock parameter and link it to the chart component and data source:

  1. Open the CDE editor again and click on the Components menu.
  2. In the left-hand side panel, click on Generic and choose the Simple Parameter component.
  3. Now, a parameter component is added to the components group. Click on it and type stock_param in the Name property.
  4. In the left-hand side panel, click on Select and choose the Select Component component. Type in the values for the following properties:
    • Name: select_stock
    • Parameter: stock_param
    • HtmlObject: Filter_Panel_1
    • Values array:
      ["ALLSTOCKS","ALLSTOCKS"],
["ARM","ARM"],["BBX","BBX"],
["DAI","DAI"],["ROS","ROS"]

    Note

    To insert values in the Values array textbox, you need to create several pair values. To add a new pair, click on the textbox and a dialog will appear. Then click on the Add button to create a new pair of Arg and Value textboxes and type in the values as stated in this step. The dialog entries will look like the following screenshot:

    Interactivity using a parameter
  5. On the same editor page, select ccc_line_chart and click on the Parameters property. A parameter dialog appears; click on the Add button to create the first index of a parameter pair. Type in stock_param_data and stock_param in the Arg and Value textboxes, respectively. This will link the global stock_param parameter with the data source's stock_param_data parameter. We have specified the parameter in the previous walkthroughs.
  6. While still on editing section of ccc_line_chart, click on Listeners. In the listbox, choose stock_param and click on the OK button to accept it. This configuration will reload the chart if the value of the stock_param parameter changes.
  7. Open the NYSE Stock Price – Hive dashboard page again. Now you have a filter that interacts well with the line chart data, as shown in the following screenshot:
    Interactivity using a parameter

Multiple pie charts

A pie chart is useful to show the contribution of some categories compared to the total. The following steps will show how you can create a multiple categories chart using CDE:

  1. Open the CDE editor.
  2. In the left panel, click on Charts and choose the CCC Pie Chart component. The component shows up in a group. Click on it and then in the Properties box, click on Advanced Properties and type in the value for the chart's properties:
    • Name: ccc_pie_chart
    • Title: Average Close Price Comparison
    • Listener: ['stock_param']
    • Parameter: ["stock_param_data","stock_param"]
    • Datasource: pie_chart_data
    • Height: 300
    • HtmlObject: Panel_3
    • MultiChartIndexes: ["0"]
    • seriesInRows: False

    Note

    MultiChartIndexes is the important property that determines the multiple pie chart divisions. In this example, the index is zero, which means that the first column of the data (year) will be a division property.

  3. Open the NYSE Stock Price – Hive dashboard page. Now, you have a multiple pie chart based on year categories. Try to use the existing filter against the chart. Have a look at the following screenshot:
    Multiple pie charts

Waterfall charts

Waterfall is a type of chart that can compare data proportionally between categories and subcategories. It provides a compact alternative to a pie chart. Indeed, we will use the same data source that renders our pie chart.

The following steps will help you create a waterfall chart:

  1. Open the CDE editor page of the dashboard and click on the Components menu.
  2. In the left-hand side panel, click on Charts and choose the CCC Pie Chart component. The component shows up in a group. Click on it and then in the Properties box, click on Advanced Properties and type in the values for the chart's properties:
    • Name: ccc_waterfall_chart
    • Title: Average Close Price Proportion
    • Listener: ['stock_param']
    • Parameter: ["stock_param_data","stock_param"]
    • Datasource: pie_chart_data
    • Height: 300
    • HtmlObject: Panel_2
    • crossTabMode: False
    • seriesInRows: False
  3. Open the NYSE Stock Price – Hive dashboard page. Now, you have a waterfall chart based on year categories differentiated by stack colors. The following chart also clearly shows the breakdown of a stock's average close price proportion:
    Waterfall charts

Move your mouse cursor over the top of the leftmost bar chart's area; you should see an accumulated sum of all the stocks' average close price for a particular year. It also shows a proportional percentage.

Then move to a breakdown chart, and you should see a particular stock's average close price for a year, and the percentage of its contribution as shown in the following screenshot:

Waterfall charts
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset