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.
COMPOUND LAYOUT {PCHOLD|HOLD} FORMAT {AHTML|FLEX|APDF}
To create an active chart, use
ON GRAPH {PCHOLD|HOLD|SAVE} FORMAT {AHTML|FLEX|APDF}
where:
Displays the chart output in a web browser in the format specified. PCHOLD is the default value.
Saves the chart output to a temporary file for later use. The output is saved with an associated Master File.
Saves the chart output to a file for later use, but the output is not saved with a Master File.
Creates an HTML version of the chart.
Creates an Adobe Flash Player version of the chart (Adobe Flash file).
Creates an Adobe Flash Player version of the chart (Adobe Flash file), embedded in a PDF file.
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.
How to: |
You can control the chart type using the WebFOCUS code ON GRAPH SET LOOKGRAPH.
To create a vertical bar chart, use
ON GRAPH SET LOOKGRAPH BAR
where:
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
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:
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.
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.
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.
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.
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,$
SECTION=section1, LAYOUT=ON, ARGRAPHENGINE=FUSION,...
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.
Use the following WebFOCUS StyleSheet syntax
ON {TABLE|GRAPH} SET STYLE *
TYPE={REPORT|GRAPH}, ARCHARTAGG={OFF|ON},$
where:
Excludes the calculation type from the chart legend and mouse over data tips. This is the default value.
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).
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.
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.
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:
Is the default value.
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:
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
The WebFOCUS syntax generates the chart legend, as shown in the following image.
TYPE=REPORT,OBJECT=LEGEND,LEGEND-VIEW=FLAT,$
The WebFOCUS syntax generates the chart legend, as shown in the following image.
TYPE=REPORT,OBJECT=LEGEND,LEGEND-VIEW=DOCKING,POSITION-POINT=BOTTOM-CENTER,$
The WebFOCUS syntax generates the chart legend, as shown in the following image.
TYPE=REPORT,OBJECT=LEGEND,LEGEND-VIEW=DOCKING,POSITION-POINT= BOTTOM-RIGHT,$
The WebFOCUS syntax generates the chart legend, as shown in the following image.
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.
By default, the chart colors are stored in the irpstd.js file, located in the WebFOCUS Reporting Server \home\etc directory.
Starting with WebFOCUS Reporting Server Release 7.7 Version 04, you must create an irpcusf.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.
Customizing the colorTable RGB color codes in this JavaScript file enables you to edit the series colors of active charts. The irpcusf.js file overwrites the default colors used for charts and applies changes to all chart types in active reports and active dashboards using the HTML output format.
Upgrade requirement:
The colorTable has been moved from the irpfnc.js file to the irpstd.js file, starting with WebFOCUS Reporting Server Release 7.7 Version 03.
If an irpfnc.js or irpstd.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 file. The colorTable section of the JavaScript file remains unchanged in the irpstd.js file. You can verify the contents with the colorTable section in the irpstd.js file found in the \home\etc directory of the WebFOCUS Reporting Server.
By default, the chart styles are stored in the irpfsty.js file, located in the WebFOCUS Reporting Server \home\etc directory.
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.
Customizing the chart series StyleSheet section in this JavaScript file enables you to customize the look and feel of charts and gives you full control over styling individual chart types using Cascading Style Sheet syntax. You can apply different sets of colors to Pie, Bar, Line, and Scatter charts as needed. In addition to changing chart series colors, you can customize the labels to display inside or outside the Pie chart, change the legend font colors, and add background colors to Bar, Line, and Scatter charts.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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:
A single array of colors to specify the individual color for each pie chart wedge.
The color of the text used in the chart, including the label.
Sets the text to be in boldface.
Specifies how to display data labels for the pie chart wedges. The default is none. The possible values are:
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.
Displays labels inside the chart.
Displays labels inside the pie chart, and converts them to callout labels if labels are shrunk below a legible size.
Displays labels outside the chart.
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:
Sets the color for each series in a chart.
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:
Sets the line type for the chart. The default is segment. Possible values are:
Draws angled lines to connect each data point in the series.
Draws curves between the data points.
Draws a horizontal line on each data point.
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.
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.
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.
Sets the color of the line.
Sets the width of the line in pixels. The default value is 0.
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:
Sets the radius of the plot point in pixels. The default value is 5 pixels.
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; }
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; }
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.
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.
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.
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.
For active reports and dashboards for Adobe Flash Player, open the JavaScript file and locate the getFCGlobal function.
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.
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.
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'},
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.
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 {
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"},
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"},
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.
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.
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"},
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.
The syntax is
SET ARNOPRINTHIDE = {ON|OFF}
where:
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.
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.
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.
The syntax is
TYPE=REPORT, AR_SHOW_MENUBAR={ON|OFF},$
where:
Displays the chart tool bar. This is the default value.
Suppresses the display of the chart tool bar. For example:
ON TABLE SET STYLE * TYPE=REPORT, AR_SHOW_MENUBAR=OFF,$ $ ENDSTYLE
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:
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:
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},
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] };
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 |