Creating an Active Technologies Chart

In this section:

How to:

You can use standard WebFOCUS GRAPH FILE syntax to create an active chart. In the GRAPH FILE procedure, you can apply one of three output formats to the chart:

The following guidelines apply.


Top of page

x
Syntax: How to Create an Active Technologies Chart With WebFOCUS Syntax

To create an active chart, use

ON GRAPH {PCHOLD|HOLD|SAVE} FORMAT {AHTML|FLEX|APDF}

where:

PCHOLD

Displays the chart output in a web browser in the format specified. PCHOLD is the default value.

HOLD

Saves the chart output to a temporary file for later use. The output is saved with an associated Master File.

SAVE

Saves the chart output to a file for later use, but the output is not saved with a Master File.

AHTML

Creates an HTML version of the chart.

FLEX

Creates an Adobe Flash Player version of the chart (Adobe Flash file).

APDF

Creates an Adobe Flash Player version of the chart (Adobe Flash file), embedded in a PDF file.



Example: Creating an Active Technologies Chart in FLEX Format

The following WebFOCUS code creates an Adobe Flash Player version of an active chart.

The code that controls the chart type (PIE) and the code that controls the output format (FLEX) is shown in bold.

The WebFOCUS StyleSheet code, which follows the code shown in bold, controls the way that the legend is displayed in the output. In this example, the legend is fixed. It appears underneath the chart. For more information on controlling the legend, see Controlling the Legend of an Active Technologies Chart in FLEX or APDF Format.

GRAPH FILE GGSALES
SUM DOLLARS
BY CATEGORY
BY PRODUCT 
ON GRAPH SET LOOKGRAPH PIE
ON GRAPH PCHOLD FORMAT FLEXON GRAPH SET STYLE *
TYPE=REPORT, OBJECT=LEGEND, LEGEND-VIEW=FLAT,$
ENDSTYLE
END

The output is shown in the following image.

You can use the icons at the top of the chart as you do for charts that are generated by a graphical tool. For example, you can change the chart type from pie to bar.

The Chart Tool is accessible from the left-most icon at the top of the chart. The Chart Tool allows you to change the columns and switch the chart type.


Top of page

x
Controlling the Chart Type

How to:

You can control the chart type using the WebFOCUS code ON GRAPH SET LOOKGRAPH.



x
Syntax: How to Control the Chart Type

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

Top of page

x
Switching the Chart Engine

You can use the ARGRAPHENGINE StyleSheet setting to switch the chart engine. You can also add this setting to the SECTION tag of Compound reports.

The StyleSheet syntax is

ARGRAPHENGINE=[DEFAULT|FUSION|FLEX|JSFUSION|JSCHART]

where:

DEFAULT

Is the same as the current behavior of the output format types AHTML, FLEX, and APDF. If you do not set ARGRAPHENGINE in the procedure, the default behavior is ARGRAPHENGINE=DEFAULT.

FUSION

This setting is the default for the output format type FLEX created in the reporting tools including InfoAssist. When this is set in AHTML, it uses the current Flash charts by default on browsers with Flash Player that may not support the functionality in these JavaScript charts, such as older releases of Internet Explorer. The charts will automatically switch to the AHTML JavaScript charts on browsers that do not support Flash, such as Safari on the iPad.

Information Builders has tested the performance of all available chart engines, that is, the time that it takes for a specific chart engine to run an active chart. The performance of the Fusion chart engine is comparable to that of any other chart engine.

FLEX

Uses the default four Adobe Flex charts when the output format is FLEX or APDF. These are the existing charts that work in both connected and disconnected mode. No additional chart types will be available at run time.

JSFUSION

Uses the JavaScript fallback charts for the output format type AHTML. These charts work in both connected and disconnected mode. The current AHTML default four JavaScript charts will not be available at run time.

JSCHART

Uses the WebFOCUS Graph JavaScript Engine for the output format type AHTML. These charts work in both connected and disconnected mode. The current AHTML default four JavaScript charts will not be available at run time.

Adobe Flash Player 10 or higher is required when you use the ARGRAPHENGINE=JSCHART setting for the chart engine. This requirement applies to active charts for Adobe Flash Player (output format FLEX) and for PDF (output format APDF).

Note: You can add the following syntax to your StyleSheet when creating a report for Active Technologies to use the new chart engine instead of using the current chart engine.

TYPE=REPORT,ARGRAPHENGINE=FUSION,$
 
You can add the following syntax in the SECTION tag of a Compound document for Active Technologies to use the new chart engine for all reports in the dashboard.
SECTION=section1, LAYOUT=ON, ARGRAPHENGINE=FUSION,...


Top of page

x
Controlling the Legend and Data Tips of an Active Technologies Chart in AHTML Format

How to:

You can control the display of the legend and mouse over data tips for an active chart in AHTML format. Using WebFOCUS StyleSheet code, you can either exclude or include the calculation type in the legend and data tips. Examples of the calculation type are Sum, Avg, and Min.

This feature applies only when ARGRAPHENGINE=DEFAULT.



x
Syntax: How to Control the Legend and Data Tips of an Active Technologies Chart in AHTML Format

Use the following WebFOCUS StyleSheet syntax

ON {TABLE|GRAPH} SET STYLE *
TYPE={REPORT|GRAPH}, ARCHARTAGG={OFF|ON},$

where:

OFF

Excludes the calculation type from the chart legend and mouse over data tips. This is the default value.

ON

Includes the calculation type in the chart legend and mouse over data tips. The display format is field_name(calculation_type), where calculation_type is a value such as Sum, Avg, Min, Max, Count, or Distinct. An example of a legend that includes the calculation type is Dollar Sales(Sum).



Example: Including the Calculation Type in the Legend and Data Tips

In this example, ARGRAPHENGINE=DEFAULT.

The WebFOCUS StyleSheet code

ON GRAPH SET STYLE *
TYPE=REPORT, ARCHARTAGG=ON,$

includes the calculation type in the legend and mouse over data tips on an active chart, as shown in the following image. In this example, the calculation type is Sum.


Top of page

x
Controlling the Legend of an Active Technologies Chart in FLEX or APDF Format

In this section:

How to:

You can control how to display the legend for an active chart in FLEX or APDF format, using WebFOCUS StyleSheet code. The legend can be fixed or collapsible.

A legend always appears on a pie chart. A legend appears on a bar, line, or scatter chart if the chart has more than one Y-axis field.



x
Syntax: How to Control the Legend of an Active Technologies Chart in FLEX or APDF Format

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.



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:



x
Additional Examples

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


Top of page

x
Customizing Chart Colors and Styles for Active Technologies Reports and Dashboards

How to:

You can customize chart colors and styles for active reports and active dashboards by creating a JavaScript file to overwrite the default colors and styles used for charts. The customization steps vary, depending on the output format.

For all output formats, if these customized JavaScript files exist in your application folder, the default styles are overwritten by the colors and styles specified. You can have different customized JavaScript files in your application folder, enabling you to update the active reports and active dashboards in your existing applications with different styles and color themes to meet your needs.



x
Procedure: How to Customize Chart Colors for Active Technologies Reports and Dashboards in HTML

By creating the irpcusf.js JavaScript file, you can 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 JavaScript 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.

Customized chart colors for Active Dashboard



x
Procedure: How to Customize Chart Styles for Active Technologies Reports and Dashboards for Adobe Flash Player and for PDF

By copying the styling section of the irpfsty.js JavaScript file and pasting it into the irpuflex.js file, you can 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.

Starting with WebFOCUS Reporting Server Release 7.7 Version 04, you must create an irpuflex.js file in your application folder, and add all your custom contents to this JavaScript file. This ensures that there will not be any issues with the different versions of JavaScript used between releases.

Upgrade requirement:

If an irpfsty.js file created prior to WebFOCUS Reporting Server Release 7.7 Version 04 already exists in your application folder, you must remove it and move the custom contents into the irpuflex.js file. All of the styling section of the JavaScript file remains unchanged in the irpfsty.js file. You can verify the contents with the styling section in the irpfsty.js file found in the \home\etc directory of the WebFOCUS Reporting Server.

Here are the steps that you follow.

  1. Search for irp*.js files in your ibi\apps folder.
  2. Rename the files. Do not delete them, as you need the customized style section from these files.
  3. In your application folder, create a new, empty text file. Name it irpuflex.js.
  4. Copy the styling section of the irpfsty.js file from the WebFOCUS Reporting Server location (\home\etc directory), and paste it into the irpuflex.js file in your application folder. Alternatively, you can copy the styling section of the irpfsty.js file that you renamed in step 2, and paste it into the irpuflex.js file in 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, create the irpuflex.js file in the Other subfolder of the project folder.

  5. 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.

  6. 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.

  7. 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.

  8. 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.

  9. 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.

  10. 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;
    }
  11. 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;
    }
  12. 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.

Active Dashboard in Flash/Flex PDF with customized style.


Top of page

x
Customizing Advanced Active Technologies Chart Styles

How to:

For active reports and dashboards in HTML formats, the advanced JavaScript chart styles are stored in the irpfusc.js file in the \home\etc directory of the WebFOCUS Reporting Server. For active reports and dashboards for Adobe Flash Player, the advanced Flash chart styles are stored in the irpfstd.js file in the \home\etc directory of the WebFOCUS Reporting Server.

Starting with WebFOCUS Reporting Server Release 7.7 Version 04, you must create an irpcusf.js file for active reports and dashboards in HTML formats, and an irpuflex.js file for active reports and dashboards for Adobe Flash Player, in your application folder, and add all their custom contents to these JavaScript files. This ensures that there will not be any issues with the different versions of JavaScript used between releases.

By copying the styling sections from the irpfusc.js file (or the irpfstd.js file) and pasting them into the irpcusf.js file (or the irpuflex.js file) in your application folder and editing the chart style property section for each chart type, you can customize the look and feel of advanced active JavaScript and Flash charts.

Upgrade requirement:

The advanced JavaScript chart style section for active reports and dashboards in HTML formats has been moved from the irpstd.js file to the irpfusc.js file in the \home\etc directory of the WebFOCUS Reporting Server, starting with Release 7.7 Version 04.

If an irpstd.js or irpfstd.js file created prior to WebFOCUS Reporting Server Release 7.7 Version 04 already exists in your application folder, you must remove it and move the custom contents into the irpcusf.js or irpuflex.js file. All of the styling section of the JavaScript file remains unchanged in the irpfusc.js and irpfstd.js files. You can verify the contents with the styling section in the irpfusc.js and irpfstd.js files found in the \home\etc directory of the WebFOCUS Reporting Server.

Here is a summary of the steps that you follow.

  1. Search for irp*.js files in your ibi\apps folder.
  2. Rename the files. Do not delete them, as you need the customized style section from these files.
  3. In your application folder, create a new, empty text file. Name it irpcusf.js for active reports and dashboards in HTML, and irpuflex.js for active reports and dashboards for Adobe Flash Player.

Note: For active reports and dashboards for Adobe Flash Player, the chart styles in the Chart/Rollup Tool dialog box will change dynamically, according to the changes made in the irpuflex.js file.

Both files follow the same style property convention that corresponds to the properties defined in the FusionCharts documentation. For more information on a specific property, see the FusionCharts product documentation, located at http://www.fusioncharts.com/docs/.

For active reports and dashboards in HTML formats, these properties are defined in the fcinfo variable in the irpfusc.js file. For active reports and dashboards for Adobe Flash Player, these properties are defined in the getFCGlobal function in the irpfstd.js file.

Each chart type has its corresponding chartParams name assigned in these functions and all the chart styling properties are defined in each chartParams section of the files. You have full control over styling individual chart types by assigning a different chartParams name to each chart type. For example, you can apply different sets of colors to Pie 2D, Multi-series Column 2D, Multi-series Line 2D, Scatter, or any other advanced chart types as needed. In addition to changing chart series colors, you can customize the labels to display inside or outside the pie chart types, change the default font type or colors used globally, add background color to the chart canvas, change legend color or mouse-over data tip colors, and so on.



x
Procedure: How to Customize Advanced Active Chart Styles for Active Technologies Reports and Dashboards
  1. In your application folder, create a new, empty text file, and name it irpcusf.js (or irpuflex.js).
  2. Copy the styling section of the irpfusc.js file (or the irpfstd.js file) from the WebFOCUS Reporting Server location (\home\etc directory), and paste it into the irpcusf.js file (or irpuflex.js file) in 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, create the irpcusf.js file (or the irpuflex.js file) in the Other subfolder of the project folder.

  3. For active reports and dashboards in HTML formats, open the JavaScript file and locate the fcinfo variable.

    For active reports and dashboards for Adobe Flash Player, open the JavaScript file and locate the getFCGlobal function.

  4. In the fcCategory section, locate the chart type you need to modify. This is defined in the swfName parameter.
  5. Locate the corresponding chartParams parameter name. The chartParams parameter name is defined separately and contains all of the properties used to style each chart type in the swfName parameter.

    For example, in order to modify a Pie 2D chart, locate the Pie2D value in the swfName parameter, as below. The chartParams called pieParams contains all of the properties you can modify to change the look and feel of the Pie 2D chart.

    In the irpcusf.js file:

    {swfName:'Pie2D', label:'Pie 2D', chartParams: 'pieParams'},

    In the irpuflex.js file:

    {swfName:'Pie2D', label:this.ibiMsgStr['Pie 2D'],
       chartParams: 'pieParams'},

    Note: It is recommended that you create a new chartParams name for the chart types you are modifying because the same chartParams name may be assigned to other chart types that you may not need to modify. You can also create one default chartParams name and assign it to all chart types to globally apply the same styles.

  6. For active reports and dashboards in HTML formats, locate the chart properties section defined in fcinfo.chartParams_name. For example, fcinfo.pieParams.

    For active reports and dashboards for Adobe Flash Player, locate the chart properties section defined in this.chartParams_name. For example, this.pieParams.

    For this Pie 2D chart example, the properties section should look like the following sample code for active reports and dashboards in HTML formats:

    fcinfo.pieParams = '{'+
             '"caption":"%caption%",'+ 
             '"alternateHGridAlpha":"100",'+ 
             '"alternateHGridColor":"f9f9fa",'+ 
             '"baseFont":"Arial",'+ 
             '"baseFontColor":"000000",'+ 
             '"baseFontSize":"10",'+ 
             '"bgColor":"e5e5e5,ffffff",'+
    .
    .
    .

    For this Pie 2D chart example, the properties section should look like the following sample code for active reports and dashboards for Adobe Flash Player:

    this.pieParams = [
               {alternateHGridColor:"f9f9fa"}, 
               {alternateHGridAlpha:"100"},
               {anchorRadius:"3"},
               {anchorBorderThickness:"3"},
               {baseFont:"Arial"}, 
               {baseFontSize:"10"}, 
               {baseFontColor:"000000"},
               
    .
    .
    .

    The values on the left-hand side correspond to chart element attribute names defined in the FusionCharts documentation, and the default values used in advanced active charts are set on the right-hand side, wrapped in double quotation marks.

  7. Copy the entire fcinfo.pieParams section (or this.pieParams section) into clipboard and paste it under the pieParams section.
  8. Rename the copied section as fcinfo.testParams (or this.testParams).
  9. In the fcinfo.fcCategory section (or this.fcCategory section), change the chartParams name for the Pie 2D chart to testParams.

    In the irpcusf.js file:

    {swfName:'Pie2D', label:'Pie 2D', chartParams: 'testParams'},

    In the irpuflex.js file:

    {swfName:'Pie2D', label:this.ibiMsgStr['Pie 2D'],
       chartParams: 'testParams'},
  10. For active reports and dashboards for Adobe Flash Player, define the new testParams name as a variable with array type before the getFCGlobal function starts.
    public var testParams:Array;

    In the irpcusf.js file, you should now have:

    fcinfo.fcCategory = [
    …
             {category:this.ibiMsgStr['crtpie'],  //Pie Category
    …
              {swfName:'Pie2D', label:'Pie 2D', chartParams: 'testParams'},
    …
             isCreated:false}
    ];
    …
    fcinfo.testParams = '{'+
             '"caption":"%caption%",'+ 
    …
             '"zeroPlaneThickness":"3"},';

    In the irpuflex.js file, you should now have:

    <fx:Script>
      <![CDATA[
      …
        public var testParams:Array;
        private function getFCGlobal(): void {
        …
          this.fcCategory = [                 
          …
            {category:this.ibiMsgStr['crtpie'], //Pie Category
            …
               {swfName:'Pie2D', label:this.ibiMsgStr['Pie 2D'], chartParams:
                                                                 'testParams'},
               …
               isCreated:false}
           ];  
                 …
         this.testParams = [
              {alternateHGridColor:"f9f9fa"}, 
              …
              {zeroPlaneColor:"717171"}
          ];  //end testParams
       } // end getFCGlobal()
     ]]> 
    </fx:Script>

    Note: In the preceding examples of code, the ellipses indicate additional lines of code.

    If you are modifying the irpuflex.js file for active reports and dashboards for Adobe Flash Player, you are almost ready to customize the styles and run a chart. There is one more editing step to perform in the irpuflex.js file.

  11. Locate the following code at the beginning of the irpuflex.js file:
    public var fcCategory:Array;
    public var APDFCategory:Array;
    public var defaultParams:Array;
    public var pieParams:Array;
    public var testParams:Array;
    private function getFCGlobal(): void {

    Replace the preceding code with this code to initialize the custom parameter that you have added:

    public var testParams:Array;
    public function user_init(): void {
  12. You can now modify the values assigned for each chart style property in the testParams section, or add or remove each chart style property.

    For example, the attributes, such as baseFont, baseFontSize, and baseFontColor, define the generic font properties for all the text used on the chart inside the chart canvas, including data labels, values, and so on.

    baseFont. Specify the font family name to be used for all the text (data labels, values, and so on) on the chart inside the chart canvas.

    baseFontSize. Specify the font size to be used for all the text (data labels, values, and so on) on the chart inside the chart canvas using a numeric value between 0 to 72.

    baseFontColor. Specify the font color to be used for all the text (data labels, values, and so on) on the chart inside the chart canvas using the HTML color code. Do not include the number (#) character when using the HTML color code.

    The following font properties set the fonts used for the pie chart label and mouse-over data tip text to be Comic Sans MS in dark red color and size 20:

    {baseFont:"Comic Sans MS"}, 
    {baseFontSize:"20"}, 
    {baseFontColor:"D70A0A"}, 

  13. The chart series colors are defined in the paletteColors property for active reports and dashboards in HTML formats and in the paletteColors property for active reports and dashboards for Adobe Flash Player. In order to change the chart series color, you need to define a set of colors for these properties.

    paletteColors. Specify a list of HTML color codes separated by commas. Do not include the # character when using the HTML color code. The chart cycles through the list of specified colors.

    For example, the following set of eight colors changes the color of pie chart slices into a red color scheme.

    {paletteColors:"D788A2, E13939, DC4295, A52A2A, FAAFBE, C11B17, FF7157, CC4444"},

  14. Open the Chart/Rollup Tool dialog box if you have the modified irpuflex.js file for active reports and dashboards for Adobe Flash Player.

    Notice the same style changes are reflected for the Pie 2D chart in the Chart/Rollup Tool. Because we assigned testParams only to the Pie 2D chart type in this example, the other charts still retain the default chart styles specified in other chartParams parameters.

  15. You can apply the same chartParams name to other chart types to change their styles. For example, change the chartParams name for the Multi-series Column 2D chart as below.

    In the irpcusf.js file:

    {swfName:'MSColumn2D', label:'Multi-series Column 2D',
       chartParams: 'testParams'},

    In the irpuflex.js file:

    {swfName:'MSColumn2D', label:this.ibiMsgStr['MSColumn2D'],
       chartParams: 'testParams'},

    The same red color scheme is now applied to the Multi-series Column 2D chart.

  16. You can change the alternating background color of the chart canvas for chart types such as column, bar, line, and area.

    In the testParams section, locate the canvasBgColor property, and change its value as follows. If the canvasBgColor property does not exist, you can simply add it.

    {canvasBgColor:"FDEEF4"},

    For alternating background color, locate the alternateHGridColor property, and change its value as follows. If the alternateHGridColor property does not exist, you can simply add it.

    {alternateHGridColor:"FEF7D6"},

    Depending on the chart type, different types of properties are available to modify multiple areas of the chart. For more information, see the FusionCharts documentation.

    The chart now contains light pink and yellow alternating background color.

    Adding or modifying the following properties changes the background colors used in the mouse-over data tip and legend.

    {legendBgColor :"EBDDE2"},
    {toolTipBgColor:"EBDDE2"},


Top of page

x
Handling a Hidden BY Column on an Active Technologies Chart

How to:

The SET ARNOPRINTHIDE command enables you to specify how the server handles a hidden BY column when NOPRINT is used in a GRAPH request.

This command applies when the setting for the chart engine is JSCHART.



x
Syntax: How to Handle a Hidden BY Column on an Active Technologies Chart

The syntax is

SET ARNOPRINTHIDE = {ON|OFF}

where:

ON

Excludes a hidden BY column (BY column with the NOPRINT option) from the sort processing of an active chart. Data for the hidden BY column is not displayed in the active chart output. This is the default value.

Using this setting with a NOPRINT column produces the same result as using HIDE=ON syntax for the BY column in the procedure, as described in How to Control the Hide Column Options.

The data for a hidden BY column is available for use elsewhere. For example, you can use it to populate the global filter drop-down list or other filter control on an active dashboard.

OFF

Includes a hidden BY column (BY column with the NOPRINT option) in the sort processing of an active chart. The chart is sorted by all the hidden BY columns, and data from all the columns is displayed in the active chart output.


Top of page

x
Suppressing the Display of the Chart Tool Bar

How to:

You can suppress the display of the chart tool bar using WebFOCUS StyleSheet code. This feature is available for active reports that are published in AHTML, FLEX, or APDF format.

Once you suppress the display of the chart tool bar, you can no longer switch the chart type during run time from within the chart window.



x
Syntax: How to Suppress the Display of the Chart Tool Bar

The syntax is

TYPE=REPORT, AR_SHOW_MENUBAR={ON|OFF},$

where:

ON

Displays the chart tool bar. This is the default value.

OFF

Suppresses the display of the chart tool bar. For example:

ON TABLE SET STYLE *
TYPE=REPORT,
AR_SHOW_MENUBAR=OFF,$
$
ENDSTYLE

Top of page

x
Customizing WebFOCUS Graphs for Active Technologies Reports

The JSCHART graph engine has a set of default properties for charts that are created inside from an Active Report Table (for example, using the Chart Roll Up tool). These properties are in the form of JSON (JavaScript Object Notation) and can be modified by editing file \home\etc\irptdgc.js in your 7704 or higher Reporting Server path.

The contents of this file consist of the following:

  1. A table of default colors. These are the color definitions for the gridlines, labels, risers, and other chart primitives. They are standard JSON color objects, so you can specify hex value (#FF0000), default colornames (red), or RGB/RGBA values (rgba(126,188,224,0.7)).

    For example, to change the default color of the legend labels from dark grey (#333333) to BLUE, you could change:

    var TDGDefaultLabelColor = "#333333";

    to

    var TDGDefaultLabelColor = 'blue';

    Before:

    After:

  2. A table, tdginfo, to control the visibility of chart icons in the Chart Roll Up Chart Picker dialog. In this table, you can change the value of any showInTool entry from true to false to remove that icon from the chart picker.
    var tdginfo = new Object();
    tdginfo.category = [                 
     {category:this.ibiMsgStr['crtbar'], //Bar Category
             chartList:[
        {base:'bar',name:'bar', label:'Bar',chartProps:
    'barProps',chartPropsExtra:'hbarSidebySideProps',sampleData:dpdef,
       showInTool:true,sampleImg:null},
        {base:'bar',name:'bar2', label:'Stacked Bar,'chartProps:
    'barProps',chartPropsExtra:'hbarStackedProps',sampleData:dpdef,
       showInTool:true,sampleImg:null},
        {base:'bar',name:'bar3', label:'Percent Bar',chartProps: 
    'barProps',chartPropsExtra:'hbarPercentProps',sampleData:dpdef,
       showInTool:true,sampleImg:null}
        ],
             isCreated:false},

    For example, to hide the Waterfall chart icon:

    Before:

    {base:'waterfall',name:'waterfall',  label:'Waterfall', chartProps: 'otherProps',
      chartPropsExtra:'waterfallProps', sampleData:dpwaterfall, showInTool:true,sampleImg:null},

    After:

    {base:'waterfall', name:'waterfall' , label:'Waterfall', chartProps:'otherProps',
      chartPropsExtra:'waterfallProps', sampleData:dpwaterfall, showInTool:false, sampleImg:null},

  3. All charts in the Chart Picker define a MAJOR property blob that is common to a family of charts. This is the chartProps entry in the tdgInfo Table. (For example, barProps defines properties for all bar and column charts.) The major blobs are:
    1. barProps. All Bar and Column charts.
    2. pieProps. All Pie and Donut charts.
    3. lineProps. All Line charts.
    4. areaProps. All Area charts.
    5. scatterProps. All Scatter charts.
    6. bubbleProps. All Bubble charts.
    7. otherProps. All other charts, such as Heatmap.

      Here is barProps blob. Try changing introAnimation:enabled property from true to false to disable the growing riser animation effect.

      tdginfo.barProps = {
          riserBevel: 'bevel',
          blaProperties:{
            seriesLayout: 'sideBySide',
            orientation: 'vertical'
            },
          dataLabels: {
             visible: false
             },
            introAnimation: {
               enabled: true,
               duration: 1300
            },
            legend: {
               visible: true,
               position: 'bottom',
               markerSize: TDGDefaultMarkerSize,
               labels: {
               font: '8pt Sans-Serif',
               color: TDGDefaultLabelColor
               }
            },
            xaxisOrdinal: {
               majorGrid: {
                   ticks: {
                       lineStyle: {
                            color: TDGDefaultTickColor
                       }
                   }
                   },
                   labels: {color: TDGDefaultLabelColor}
            },
            yaxis: {
                   baseLineStyle: {
                        width: 1,
                        color: TDGDefaultTickColor,
                        dash: ''             },
               majorGrid: {
                   lineStyle: {
                      color: TDGDefaultGridlineColor
                   },
                   ticks: {
                      visible: false
                   },
                   aboveRisers: false
               },
                   labels: {color: TDGDefaultLabelColor}
            },
            mouseOverIndicator: {
                 enabled: true
            },
            series: [
                 {
                 series: 'all', marker:{shape: 'square'},
                 bevel: 'bevel'
            }
            ],
            ibiColorTable: 
      [TDGMarkerColor0,TDGMarkerColor1,TDGMarkerColor2,TDGMarkerColor3,
      TDGMarkerColor4,TDGMarkerColor5,TDGMarkerColor6,TDGMarkerColor7,
      TDGMarkerColor8,TDGMarkerColor9,TDGMarkerColor10,TDGMarkerColor11,
      TDGMarkerColor12,TDGMarkerColor13,TDGMarkerColor14,
      TDGMarkerColor15,TDGMarkerColor16,TDGMarkerColor17]
      };

    Here is barProps blob. Try changing introAnimation:enabled property from true to false to disable the growing riser animation effect.

    tdginfo.barProps = {
        riserBevel: 'bevel',
        blaProperties:{
          seriesLayout: 'sideBySide',
          orientation: 'vertical'
        },
           dataLabels: {
              visible: false
          },
        introAnimation: {
          enabled: true,
          duration: 1300
        },
              legend: {
                    visible: true,
                    position: 'bottom',
                    markerSize: TDGDefaultMarkerSize,
                    labels: {
                        font: '8pt Sans-Serif',
                        color: TDGDefaultLabelColor
                    }
              },
              xaxisOrdinal: {
                    majorGrid: {
                        ticks: {
                               lineStyle: {
                                  color: TDGDefaultTickColor
                              }
                        }
                    },
                    labels: {color: TDGDefaultLabelColor}
              },
          yaxis: {
                      baseLineStyle: {
                          width: 1,
                          color: TDGDefaultTickColor,
                          dash: ''                  },
          majorGrid: {
            lineStyle: {
              color: TDGDefaultGridlineColor
            },
                        ticks: {
                              visible: false
                        },
            aboveRisers: false
          },
                      labels: {color: TDGDefaultLabelColor}
         },
              mouseOverIndicator: {
                    enabled: true
              },
            series: [
          {
            series: 'all', marker:{shape: 'square'},
                        bevel: 'bevel'
          }
        ],
              ibiColorTable: 
    [TDGMarkerColor0,TDGMarkerColor1,TDGMarkerColor2,TDGMarkerColor3,
    TDGMarkerColor4,TDGMarkerColor5,TDGMarkerColor6,TDGMarkerColor7,
    TDGMarkerColor8,TDGMarkerColor9,TDGMarkerColor10,TDGMarkerColor11,
    TDGMarkerColor12,TDGMarkerColor13,TDGMarkerColor14,
    TDGMarkerColor15,TDGMarkerColor16,TDGMarkerColor17]
    };
  4. Furthermore, all charts in the chart picker can optionally define an extra blob of properties that applies only to a specific icon. For example, Donut charts have Major Property blob of chartProps: 'pieProps', but each Donut icon has a unique extra blob that defines different themes for the donut graph in the picker:
    chartPropsExtra:'tddonutCylinderProps'
    chartPropsExtra:'tddonutDepthProps' 
    chartPropsExtra:'tddonutBevelProps'
    tdginfo.tddonutCylinderProps = {
      riserBevel: 'cylinder',
      riserShadow:{angle: 345, distance: 8, blur: .2},
      depth: 0,
      pieProperties:{
        holeSize: '40%',
        skew: 35
      }
    };

    tdginfo.tddonutDepthProps = {
      riserBevel: ' ',
      riserShadow:{angle: 345, distance: 8, blur: .2},
      depth: 25,
      pieProperties:{
        holeSize: '40%',
        skew: 35
      }
    };

    tdginfo.tddonutBevelProps = {
      riserBevel: 'bevel',
      riserShadow:{angle: 345, distance: 8, blur: .2},
      depth: 0,
      pieProperties:{
        holeSize: '40%',
        skew: 35
      }
    };

    Try changing the pieProperties:holeSize parameter from 40% to 15% to create a Donut with a very narrow hole:

      pieProperties:{
        holeSize: '15%',
        skew: 35
    }


WebFOCUS