O4W Dashboard

From the O4W Main Menu choose O4W Dashboard.

From the O4W Dashboard Menu choose Create/Modify.

Dashboard widgets, like web pages, are capable of many different things, often to perform tasks that would be tedious or complicated for the user to access manually. One example is the Google Search widget, which simply opens up the user's browser and performs a Google search. Other widgets, like Wikipedia, grab the contents of web pages and display them within Dashboard.

From the Dashboard Selection tab you can either select an O4W Dashboard to modify from the drop down box or you can enter the name of a new dashboard to create. Click the Next button to continue.

We will now explore each component on the Layout tab.

· Description - A textbox is provided to enter a description for this dashboard.

· Title – A textbox is provided to enter the title of this dashboard.

· HTML ‘template’ - All the O4W wizard routines (O4W Forms, O4W Reports, O4W Dashboards, etc.), as well as the O4W API’s, allow the developer to specify one of more “templates” on which their output can be displayed. A template contains all the additional html elements needed to generate the full web page that a browser can display. This includes images, colors, and style elements that both surround, and may be used by, the O4W routine’s output. O4W includes several sample templates. These templates are stored in the TEMPLATES directory located within OpenInsight at \Revsoft\OInsight\O4W\TEMPLATES

· Background image – A textbox is provided to enter the path of a background image to use as a watermark for this dashboard.

· Header – A textbox is provided to enter the dashboard header.

· Footer – A textbox is provided to enter the dashboard footer.

· Display menu on page – A drop down list is provided to select a menu to appear on the dashboard. If no menu is desired choose None.

· Dashboard permissions – Enter your dashboard permissions from the drop down box. You can create additional menu permissions in the O4W Maintenance section of O4W.

· Color – A color picker control is provided to select the background color, foreground (text) color, link color and visited link color to be used on the dashboard. You can either choose one of the colors provided or enter a specific hex color value.

· Dashboard alignment – Select whether the dashboard should be left, right, or center aligned.

· Links – Links can be provided at the bottom of the dashboard. Enter the link text in the textbox provided and the specific URL in the associated textbox.

· Include in Module(s) - Select the module(s) to which this dashboard should be added. You may individually specify module(s) for the dashboard definition. Note that the modules must already be defined (see the “Module Management” option in the Deployment menu).

The components of the configuration tab are used to define the number of graphs to appear on the dashboard, the number of columns and number of rows this dashboard will contain. You can also set the dashboard refresh rate in seconds.

The components of the Panel tab are used to set the characteristics of each graph on the dashboard. A textbox is provided to enter the graph title, width and height in pixels, the number of charts per graph (e.g. Sales TY and Sales LY) and the graph source. The graph source are as follows:

· OpenInsight Table – An OpenInsight table, whose data will be accessed via R/List type commands

· Stored Procedure – An OpenInsight stored procedure which will return the data sets needed to generate one or more graphs. The stored procedure should have four parameters; the first parameter will be passed into the stored procedure, and will contain the name of the dashboard; the second parameter will be passed into the stored procedure, and will be the series whose data is required (possibly @FM delimited if multiple series are specified for this graph); the third parameter should be returned from your stored procedure, and will contain the x values for the series (@VM delimited between values, and possibly @FM delimited between series); and the fourth parameter should be returned from your stored procedure, and will contain the y values for the series (@VM delimited between values, and possibly @FM delimited between series). For example, you might have a stored procedure defined as follows:

SUBROUTINE GETMYDATA(graphID, seriesList, xValues, yValues)

NUM.SERIES = COUNT(seriesList, @FM) + (seriesList <> “”)

FOR EACH.SERIES = 1 TO NUM.SERIES

FOR EACH.POINT = 1 TO 10

xValues<each.series, each.point> = each.point * 2

yValues<each.series, each.point> = XLATE(“SOMETABLE”, EACH.POINT, 1, “X”)

NEXT EACH.POINT

NEXT EACH.SERIES

RETURN 0

· O4W Report – A previously-defined O4W Report, which will define which records should be selected and which fields should be used in the graph

The components of the Charts tab are used to define the X and Y axis options for each graph. The chart options are as follows:

· Table – From the drop down box provided select the OpenInsight table for the graph source.

· Select statement – An optional select or list statement may be utilized in the textbox provided. If your data is summarized you can use a select statement such as: SELECT SALES BY STORE_NAME, however if you need to utilize BREAK_ON data you can use a list statement such as: LIST SALES BY STORE_NAME BREAK-ON STORE_NAME “’VL’” TOTAL SALES DET-SUPP ID-SUPP

· Dynamic selection – If checked, the O4W dashboard will provide the users of the dashboard with the ability to reselect and refine the data, to generate updated graphs.

· X-axis options – The O4W chart will normally automatically determine the maximum and minimum values for the x-axis, or – if the axis is non-numeric – treat the values as strings. You can choose to override the automatic detection and force the chart to treat the x-axis values as strings, or – if numeric – you can override the calculation and specify an explicit maximum and/or minimum value for the x-axis. Also, numeric values on the x-axis are normally displayed with a single decimal place; you can override this behavior by specifying the number of decimal digits to display. Finally, if you wish to prefix the axis values with some character (for example, “$”), you may specify that single prefix character

· Y-axis options – Identical to the X-axis options, but for the Y-axis

· Overall panel options – You may choose to either show or hide the “legend” identifying the different graphs, and (for non-pie charts) you may choose to enable or disable “zooming” into the data (if zooming is enabled, using the mouse to select an area on the graph will “zoom in” on that area; double click anywhere on the graph to “zoom out” to normal). You may also choose to put a border around your chart. Finally, for pie charts, you may specify a “minimum threshold”; any values that are less than the specified percentage of the chart will be combined into an “other” slice. Note that the minimum threshold value is specified as a percentage, as a number between 0 (0%) and 1 (100%). For example, to specify 10%, you would enter .10

· Chart name – Enter the name of your chart in the textbox provided.

· User-defined Options - allows the developer to enter any chart-specific options to customize or configure the chart output. For example, when generating a Google Visualization GeoChart, options to display a particular region (such as the US) and display mode (region colorization) can be specified:

'displayMode':'regions','region':'US',resolution:'provinces'

The names of the options and their allowed values will depend on each chart (though they will usually be specified as quoted strings, with option names separated from their values by a colon “:”, and multiple options will be separated by commas “,”). For more information, developers should search on-line for documentation on the specific chart type (for example, “google visualization GeoChart”).

The Graph Types are as follows:

The components of the Data tab are used to define the X and Y data source for each graph. Choose the appropriate dictionary name from the drop down box provided for the X and Y data source.

Clicking the Save button will save your Dashboard definition.

Clicking the link to run the dashboard.

From the O4W Dashboard Menu choose Copy/Delete.

Select the O4W dashboard name you want to copy. Enter the name of the O4W dashboard you want to create in the textbox provided and click the Copy button. To delete an existing O4W dashboard, select the form name you want to delete and press the DELETE button.

From the O4W Dashboard Menu choose Run.

Select the name of the O4W Dashboard you want to run and press the Run button.

1. An effective way to create a graph using O4W is to start with a report. In the following example we will create a GeoChart graph showing the numbers of customers by state. By creating a simple detail suppressed report of customers by state we can easily convert the report into a graph using the O4W Dashboard wizard. In this step we have opened the Report Definition wizard a will create a new report called EXAMPLE_CUSTOMERS_BY_STATE.

2. In the Layout tab, make sure that this report is marked Yes for Suppress Detail.

3. In the Field Selection tab we will sort on the STATE dictionary and display the O4W_ST and CNT dictionaries.

4. Note that the dictionary O4W_ST is a calculated column. It is essential that the formula for the dictionary is as follows: @ans = “US-“:{STATE}

This field will be utilized for the X data source of our graph.

5. Note that the dictionary CNT is a calculated column with a formula: @ans = 1

This field will be utilized for the Y data source of our graph.

6. In the Sorting tab we will provide an Ascending sort type on STATE.

7. In the Display tab we will set the Value Modifier for each field.

8. The Modifier type will be set to Break value on the O4W_ST field.

9. The Modifier type will be set to Total on the CNT field.

10. If we run this report, the output created is a detailed suppressed report that breaks on O4W_ST with totals for each State. The State column will be utilized for the X axis of our graph and the CNT column will be utilized for the Y axis of our graph.

11. Prior to creating our O4W Dashboard to output a GeoChart we must create a Google Maps API Key and add it to the O4W Configuration Records Maintenace Screen on the Scripts tab. Instructions to create a Google Maps API Key can be found at:

https://developers.google.com/maps/documentation/javascript/get-api-key

12. In this step will utilize the Dashboard Definition Wizard to create and O4W Dashboard.

13. In the Panels tab we will define our graph. Make sure that the Output Type is set to: Graph from O4W Report.

14. In the Charts tab we will select our O4W Report Name: EXAMPLE_CUSTOMERS_BY_STATE

The X-axis options should be set to: Treat labels as strings

The User-defined Options must contain the following: 'displayMode':'regions','region':'US',resolution:'provinces'

The Graph Type must be set to: GeoChart (Google Chart)

In order to select a Google Chart you must have Google Visualization selected as the source for graphing library on the Scripts tab for O4W Configuration Records Maintenance.

15. In the Data tab make sure that X data source is set to: BREAK-ON O4W_ST and the Y data source is set to: TOTAL CNT

16. Running the Dashboard will produce a GeoChart of the EXAMPLE_CUSTOMERS_BY_STATE report.