x

To create a vertical bar chart, use

ON GRAPH SET LOOKGRAPH BAR            

where:

BAR

Is the default value.

To create a vertical line chart, use:

ON GRAPH SET LOOKGRAPH LINE

To create a pie chart, use:

ON GRAPH SET LOOKGRAPH PIE

To create a scatter chart, use:

ON GRAPH SET LOOKGRAPH SCATTER

x

To display a fixed legend underneath the chart, use:

TYPE=REPORT, OBJECT=LEGEND, LEGEND-VIEW=FLAT,$

To display a collapsible legend at the position specified, use

TYPE=REPORT, OBJECT=LEGEND, LEGEND-VIEW=DOCKING,
POSITION-POINT={BOTTOM-LEFT|BOTTOM-CENTER|BOTTOM-RIGHT},$

where:

BOTTOM-LEFT

Is the default value.

Top of page

Example: Displaying a Collapsible Legend

The following WebFOCUS StyleSheet code generates a collapsible legend at the bottom right of an active pie chart in FLEX format.

TYPE=REPORT, OBJECT=LEGEND, LEGEND-VIEW=DOCKING,
POSITION-POINT=BOTTOM-RIGHT,$

The output is shown in the following image. In the image, the cursor is pointing to the Legend icon at the bottom right of the chart.

You can:

• Click the up arrow and the down arrow on the scroll bar on the Legend icon to display the complete list of items in the legend.
• Click the right arrow on the Legend icon to hide the legend. When the legend is hidden, the arrow points left.
• Click the left arrow on the Legend icon to show the legend.

x

The examples in this topic describe the supported chart legend syntax and the output that it generates.

GRAPH FILE vs. TABLE FILE

When you run a GRAPH FILE procedure to generate a chart, the output displays the chart toolbar above the chart. The result is the same when you run a TABLE FILE procedure with the initial report view set to a chart, using the following StyleSheet code:

TYPE=REPORT, REPORT-VIEW=CHART, CHART-TYPE=PIE,$

The chart that is generated runs inside a canvas frame, not inside a window or panel type of frame.

When you run a TABLE FILE procedure and you do not set the initial report view to a chart, WebFOCUS generates an active report that is in grid view. You can create a chart from a drop-down menu on the active report, using the Chart menu option. When you do that, the chart opens up inside a new window or panel type of frame. You can minimize, maximize, or close the window.

Examples

• If you do not specify StyleSheet syntax for a chart legend, by default WebFOCUS sets LEGEND-VIEW to DOCKING, and POSITION-POINT to BOTTOM-LEFT.

  The WebFOCUS syntax generates the chart legend, as shown in the following image.

  

• If LEGEND-VIEW is FLAT, the legend appears underneath the chart and there is no Legend icon. In this scenario, the POSITION-POINT does not apply.

  TYPE=REPORT,OBJECT=LEGEND,LEGEND-VIEW=FLAT,$ 	 

  The WebFOCUS syntax generates the chart legend, as shown in the following image.

  

• If the legend POSITION-POINT is BOTTOM-CENTER, you can expand or collapse the legend below the chart.

  TYPE=REPORT,OBJECT=LEGEND,LEGEND-VIEW=DOCKING,POSITION-POINT=BOTTOM-CENTER,$

  The WebFOCUS syntax generates the chart legend, as shown in the following image.

  

• If the legend POSITION-POINT is BOTTOM-RIGHT, you can expand or collapse the legend at the bottom right of the chart.

  TYPE=REPORT,OBJECT=LEGEND,LEGEND-VIEW=DOCKING,POSITION-POINT= BOTTOM-RIGHT,$

  The WebFOCUS syntax generates the chart legend, as shown in the following image.

  

x

By creating the irpcusf.js JavaScript file, you may add JavaScript code to customize the colorTable RGB color codes for charts in active reports and active dashboards in HTML.

1. Navigate to your application folder to create the JavaScript file.

   This should be the same directory as the location of the active report or active dashboard. For example, from the Projects area of Developer Studio, create a new JScript Script File in the Other subfolder of the project folder.

2. Name the JavaScript file irpcusf.js in the File name field and click Open.
3. Add the following JavaScript code:

   colorTable["ibi"]=[[0,121,193],[127,173,220],[84,12,182],
   [161,161,217],[46,46,171],[105,3,164],[9,184,206]];

   The numbers represent the array of colors for active chart series using colorTable RGB color codes. Enter the series color of your choice separated by commas, no spaces, and brackets.

4. Save and close the JavaScript file.

   The next time you run an active report or active dashboard, the charts appear with the series colors you selected in the customized JavaScript file.

The following image shows an active dashboard, using the HTML output format, with customized chart colors.

x

By copying and pasting the irpfsty.js JavaScript file, you may edit JavaScript code to customize the Cascading Style Sheet syntax for charts in active reports and active dashboards for Adobe Flash Player and for PDF.

1. Copy and paste irpfsty.js from the Reporting Server location (\home\etc directory) to your application folder.

   This should be the same directory as the location of the active report or active dashboard. For example, from the Projects on localhost area in Developer Studio, paste irpfsty.js in the Other subfolder of the project folder.

2. Open the JavaScript file and apply different sets of colors to Pie, Bar, Line, and Scatter charts.

   Tip: Cascading Style Sheet syntax uses HTML color code or hex values for the colors. For details on each available property, see the Adobe documentation.

3. For Pie Chart styles, you can modify properties for arPieSeries1 of arPieChartStyle.

   Currently, you may only modify the first series in a pie chart of the active report for Adobe Flash Player.

   .arPieChartStyle {
      chartSeriesStyles: arPieSeries1, arPieSeries2, arPieSeries3;
   }
   .arPieSeries1 {
   	fills: #35675B, #A4C366, #FFAC1B, #618466, #E4CDAD, #3f9f3f, #aca52d, #09cf6b, #d4dc7f, #B50CB1;
   	color: #408a1c;
   	fontWeight: bold;
   	labelPosition: outside;
   }

   where:

   fills

   A single array of colors to specify the individual color for each pie chart wedge.

   color

   The color of the text used in the chart, including the label.

   fontWeight

   Sets the text to be in boldface.

   labelPosition

   Specifies how to display data labels for the pie chart wedges. The default is none. The possible values are:

   • callout - displays labels with lines from each label to the associated wedge in two vertical stacks on either side of the Pie Chart. Note this shrinks the size of the Pie chart and labels if necessary to fit them in the space provided.
   • inside - displays labels inside the chart.
   • insideWithCallout - displays labels inside the pie chart, and converts them to callout labels if labels are shrunk below a legible size.
   • outside - displays labels outside the chart.

4. For Bar Chart styles, you can modify each arBarSeries property of arBarChartStyle.

   You can add as many series as needed. The number of series specified in the array for arBarChartStyle has to correspond with the number of bar series defined.

   .arBarChartStyle{
    chartSeriesStyles: arBarSeries1, arBarSeries2, arBarSeries3, arBarSeries4,
      arBarSeries5, arBarSeries6, arBarSeries7, arBarSeries8, arBarSeries9, 
      arBarSeries10;
   }
   .arBarSeries1 {
   	fill: #35675B;
   }
   .arBarSeries2 {
   	fill: #A4C366;
   }
   .arBarSeries3 {
   	fill: #FFAC1B;
   }
   …
   }

   where:

   fill

   Sets the color for each series in a chart.

5. For Line Chart styles, you can modify each arLineSeries property of arLineChartStyle.

   You can add as many series as needed. The number of series specified in the array for arLineChartStyle has to correspond with the number of line series defined.

   .arLineChartStyle{
   	chartSeriesStyles: arLineSeries1, arLineSeries2, arLineSeries3, arLineSeries4,
      arLineSeries5, arLineSeries6, arLineSeries7, arLineSeries8, arLineSeries9,
      arLineSeries10;
   }
   .arLineSeries1 {
   	form: curve;
   	color: #35675B;
   	weight: 2;
   }
   .arLineSeries2{
   	color: #A4C366;
   	weight: 2;
   }
   .arLineSeries3 {
   	color: #FFAC1B;
   	weight: 2;
   }
   …
   }

   where:

   form

   Sets the line type for the chart. The default is segment. Possible values are:

   • segment - draws angled lines to connect each data point in the series.
   • curve - draws curves between the data points.
   • horizontal - draws a horizontal line on each data point.
   • vertical - draws a vertical line on each data point. The length is determined from the y-coordinate of the first point to the y-coordinate of the second point.
   • step - draws a horizontal line at the first data point, then a vertical line to the second point, and repeats to create steps for each data point.
   • reverseStep - draws a vertical line at the first data point, then a horizontal line to the second point, and repeats to create reverse steps for each data point.

   color

   Sets the color of the line.

   weight

   Sets the width of the line in pixels. The default value is 0.

6. For Scatter Chart styles, you can modify each arScatterSeries property of arScatterChartStyle.

   You can add as many series as needed. The number of series specified in the array for arScatterChartStyle has to correspond with the number of scatter chart series defined.

   .arScatterChartStyle{
   	chartSeriesStyles: arScatterSeries1, arScatterSeries2, arScatterSeries3,
      arScatterSeries4, arScatterSeries5, arScatterSeries6, arScatterSeries7,
      arScatterSeries8, arScatterSeries9, arScatterSeries10;
   }
   .arScatterSeries1 {
   	fill: #35675B;
   	radius: 8;
   }
   .arScatterSeries2 {
   	fill: #A4C366;
   }
   .arScatterSeries3 {
   	fill: #FFAC1B;
   }
   …
   }

   where:

   radius

   Sets the radius of the plot point in pixels. The default value is 5 pixels.

7. You can also apply styles to the legend and change the background color of the Bar, Line, and Scatter chart.

   For example, the following syntax applies the alternate background color and changes the font color of the legend:

   Legend {
           color: #306814;
   }
   GridLines {
           horizontalAlternateFill: #e8f7e6;
           horizontalFill: #f5fbf1;
   }

8. Moreover, when generating an active dashboard for Adobe Flash Player and for PDF, the dashboard is compiled with the native controls, namely, TabNavigator and ComboBox. You can create the StyleSheet for TabNavigator and ComboBox using Cascading Style Sheet syntax, and apply it to your active dashboard to style the dashboard further.

   For example, the following code applies the different colors and font styles to the tabs, pull down menu, and text in the dashboard:

   TabNavigator {
      backgroundColor: #d8fcb1;
      borderColor: #118822;
      color: #35675b;
      tabStyleName: "myTabs";
      firstTabStyleName: "myTabs";
      lastTabStyleName: "myTabs";
   }
   .myTabs {
      fillColors: #ffffff, #a6cdb1;
      borderColor: #118822;
      color: #35675b;
      textRollOverColor: #118822;
      themeColor: #35675b;
   }
   ComboBox {
      color: #35675b;
      borderColor: #118822;
      iconColor: #35675b;
      selectionColor: #2cd61c;
      textSelectedColor: #254941;
      rollOverColor: #9eefaa;
      textRollOverColor: #075812;
      themeColor: #35675b;
      dropdownStyleName: "myComboBoxDropDowns";
   }
   .myComboBoxDropDowns {
      borderColor: #118822;
      color: #35675b;
   }
   Text {
   	color: #35675b;
   	fontWeight: bold;
   }

9. Save and close the JavaScript file.

   The next time you run an active report or active dashboard, the charts appear with the colors and styles you selected in the customized JavaScript file.

The following image shows an active dashboard for PDF with fully customized style.

<mx:SeriesSlide id="lineShowEffect" duration="2000"/> 
<mx:SeriesSlide id="lineHideEffect" duration="2000"/>
<mx:SeriesSlide id="scatterShowEffect" duration="2000"/>
<mx:SeriesSlide id="scatterHideEffect" duration="2000"/>
<mx:SeriesInterpolate id="barShowEffect" duration="2000" elementOffset="10" />
<mx:SeriesSlide id="XbarShowEffect" direction="up" duration="2000"/>
<mx:SeriesSlide id="XbarHideEffect" direction="down" duration="2000"/>
<mx:SeriesInterpolate id="pieShowEffect" duration="2000" elementOffset="10" />
 

x

1. Copy and paste the irpfsty.js file from the WebFOCUS Reporting Server location (\home\etc directory) to your application folder.

   This should be the same directory as the location of the active report or active dashboard. For example, from the Projects on localhost area in Developer Studio, paste irpfsty.js in the Other subfolder of the project folder.

2. Comment out the existing code for the type of chart whose effect you wish to change. For this procedure, you will change the effect of the bar chart from SeriesInterpolate to SeriesSlide. Comment out the following line of code for barShowEffect:

   <!-- <mx:SeriesInterpolate id="barShowEffect" duration="2000"
      elementOffset="10" /> -->

3. Insert the following line of code for SeriesSlide:

   <mx:SeriesSlide id="barShowEffect" direction="right" duration="2000"/> 

   The code will look like the following:

   <!-- <mx:SeriesInterpolate id="barShowEffect" duration="2000"
      elementOffset="10" /> -->
   <mx:SeriesSlide id="barShowEffect" direction="right" duration="2000"/> 

   Tip: Adding <!-- at the beginning of the first XML tag and --> at the end of the closing XML tag comments out the entire section.

4. Save and close the irpfsty.js file.
5. Run the procedure. You will see each bar sliding in from left to right instead of moving up from bottom to top.

x

One of the effects that is not included in the irpfsty.js file is SeriesZoom.

In order to use this effect, you need to add it to the irpfsty.js file. You also need to include the datavisualization.swc file in your WebFOCUS Reporting Server \home\etc\flex\frameworks\libs folder. The datavisualization.swc file is found in your Adobe Flex Builder SDK directory, typically in \Program Files\Adobe\Adobe Flex Builder 3\sdks\3.5.0 (or 3.4.0)\frameworks\libs.

Then you can comment out the existing pieShowEffect element, and add the SeriesZoom effect as pieShowEffect, as shown in the following example.

<!-- <mxSeriesInterpolate id="pieShowEffect" duration="2000" elementOffset="10" /> -->
<mx:SeriesZoom id="pieShowEffect" duration="2000" elementOffset="-50" 
   minimumElementDuration="50" verticalFocus="top" horizontalFocus="right"
   relativeTo="chart" />

You can find more information on each effect and its properties in the Adobe documentation.