ShowTable of Contents
Chart With Drill-Down Sample
This article and the attached samples describe several ways to use Web Experience Factory to create a data chart with support for clicking on a bar in the chart to display details related to that item in the data series.
In this example, the chart shows the total orders for a region; clicking on a region then shows a table of all the orders for that region. From there, you can click on an order to see all the details for that order.
There are two types of implementations described below and included in the attached samples: one using the Web Experience Factory 8.0 Charts builder (which uses the ILOG Jviews charting engine), and the others using Dojo's charting features.
The main page also shows a tabular view of the same data as in the chart, and you can click on a link in each row to see the same drill-down table for the selected region.
The following image shows the main page, showing a chart generated with the WEF 8.0 Chart builder and a table for the sales region data:
Here is the equivalent main page generated by the attached Dojo charting sample:
If you click on a bar or a region in the table you'll see this screen showing all the orders for the selected region:
Charts Builder Sample
The regionsView View & Form builder is used to generate the initial page with the tabular display, and it generates a “main” method that calls the getOrderTotalsByRegion operation.
The chart is placed on the view page using the Charts builder, and it uses the data from the getOrderTotalsByRegion operation that has already been retrieved in the “main” method.
To support clicking a column in the chart, the Click Action support in the Charts builder is used. The click action calls the “showDetails” method defined in the Method builder, passing the "colIndex" value of the clicked element. The “showDetails” method converts the column index from a zero-based string to a one-based integer index, then calls the regionsView_SelectRow method which is generated by the View & Form builder. It passes the index and the name of the ordersView_ShowResults action to call.
The ordersView View & Form builder is used to create the table of orders for a region, and also to display details about a single order.
To supply the input values that are needed for the drill-down actions, the “Override Inputs” option of the Service Consumer builder is used. The values are taken from “SelectedRowData” variables that are automatically created by the View & Form builder.
For the drill-down table showing all the orders for a region, the Service Consumer builder uses the Override Inputs to set the search value input for searchRows like this:
For the details page for a single order, the Service Consumer builder sets the ORDER_ID input for getRow like this:
Dojo Charts - Declarative Chart with XML Data Store Sample
- Declarative (HTML markup) style instantiation of a Dojo Chart and accompanying components
- Leverages Dojo XML Data Store
The Dojo charting sample is very similar to the Charts builder sample. Here are some notes on what was changed to use Dojo charting.
The Dojo Data Store builder is used to to expose the getOrderTotalsByRegion operation as a Dojo data store on the view page, for use by the Dojo Chart as the data series to plot.
The Dojo Page Element builder is used to create the markup required to generate a Dojo chart widget on the page. This builder:
- Sets the dojoType of the element that it's applied to, to: dojox.charting.widget.Chart2D
- Sets the element name to "div" (since the style attributes to set the chart size don't work correctly if the element is a "span").
- Sets the width, height and left padding on the div wrapping the chart, so that the Dojo chart widget can calculate how much room it has for all of the graphical elements it generates
- Adds the list of dojo requires packages, used by the chart.
- Sets the id attribute on the page location (div), so that the widget can be retrieved by id after it's created by the dojo parse of the page
- Adds the inner-chart "declarative" markup used to specify the chart x and y axis, the type of plot (Columns), and to associate the Dojo Data Store declared above with the chart's data series.
The HTML builder is used to add the hidden form with the hidden input (where the above script stores the clicked series index) and the Link builder adds a hidden link that calls the showDetails method.
The getXAxisLabels Method builder is used to walk the XML results for the getOrderTotalsByRegion operation and create a JSON representation of the Region strings, in the format that a Dojo chart axis expects.
The Attribute Setter builder is used to apply the results of the getXAxisLabels method to the "labels" attribute on the X Axis element added in the "HTML Content" section of the above mentioned "Dojo Page Elements" builder call.
Note - Required Dojo Widget Classes
This sample pulls in the Chart2d widget, which in turn pulls in a lot of the optional Dojo Chart classes, so that you can easily switch the sample from Columns to Lines and Pie charts, via the Plot div in the Dojo Page Elements builder, to see various chart styles. For efficiency, please refer to the Dojo Chart documentation at dojotoolkit.org to dtermine the minimal set of Dojo Chart classes you need for your particular use case.
Note - Dojo XML Data Store
The original Web Experience Factory Dojo Charting sample (from the "Rich UI samples on this wiki") that this sample was based on, came from an earlier version of Dojo, and thus used the Dojo XmlStore that was available at that time. Dojo has added a new store API in more recent releases, which you may also want to investigate, for providing back end data to Dojo widgets in the browser. While it's possible to use the XmlStore with Dojo Charts as shown in this sample, it' may be easier to integrate with custom Dojo Chart Labels and Tooltips if you use a JSON based store (as the following sample does) to expose the data to the chart widgets.
- The XML to JSON Converter builder call is used to generate a method that transforms the XML results of the specified operation to a JSON representation.
- The Attribute Setter builder is used to set the size of the chart and an HTML id attribute on the element used for the chart, and sets the element name to "div". This is here primarily because we're reusing an existing page element that was created by View and Form to place the chart on, which did not have those associated attributes. If we had placed the chart on an HTML page element that already had an associated id and explicit or CSS based size, then this additional Attribute Setter builder call would not be necessary.
Installing and running the samples
To install run these sample models:
- Create a Web Experience Factory project with the Charts and Dojo features enabled.
- Download and import (using the “Import Web Experience Factory Archive” command) the sample package available below under “Attachments”.
- Download and import the XML File Data Service builder available here: http://www-10.lotus.com/ldd/pfwiki.nsf/dx/Sample_XML_File_Data_Service_Builder
- Open the model samples/charting/OrdersWithDrilldown and click Run.
- For the Dojo sample, open samples/charting/OrdersWithDojoChartsDrilldown and OrderwsWithDojoChartJSAPIDrilldown and click Run each. Then explore the builder calls to learn how the Web Experience Factory operation results are integrated with the Dojo widgets and/or JS APIs to generate the associated chart.
References and More Info
Dojo Charting Documentation
Leverage Web Experience Factory Data Service Operation Results for a jQuery jqPlot Pie Chart
Leveraging Other Web UI Frameworks with Web Experience Factory