Charting > Chart-Specific Properties > Matrix Chart Properties (matrixProperties)

Matrix Chart Properties (matrixProperties)

Topics:

The matrix chart properties define formats for the matrix labels, headers, and lines and the types of charts in each cell. Matrix charts require the use of WebFOCUS chart attribute syntax, described in WebFOCUS Chart Attribute Syntax.

The following lists the matrix chart properties and their default values: 

"matrixProperties": {
    "chartType": 'bar',  
    "rowLabels": {
        "labels": undefined,
        "font": "8pt Sans-Serif",
								"color": "black",
								"tooltip": undefined
               },
   	"colLabels": {
						"labels": undefined,
						"font": "8pt Sans-Serif",
						"color": "black",
						"tooltip": undefined
									},
				"rowHeader": {
						"text": undefined,
						"font": "10pt Sans-Serif",
						"color": "black",
						"tooltip": undefined
									},
				"colHeader": {
						"text": undefined,
						"font": "10pt Sans-Serif",
						"color": "black",
						"tooltip": undefined
									},
				"cellBorder": {
						"width": 1,
						"color": "grey",
						"dash": ""
									},
				"minCellSize": "auto"
}

Controlling the Chart Type in the Cells of the Matrix

How to:

The chartType property controls the type of chart that will be displayed in the matrix cells. You must be sure that you have the correct sort fields and measures, and the corresponding attribute categories for the type of chart you want to display in the matrix cells.

For example, bar, line, and area charts support the same attribute categories, so you can display them interchangeably by changing the chartType property value. You can even use the WebFOCUS Amper Autoprompting feature to present the user with a drop-down list of chart types to choose from.

Syntax: How to Control the Chart Type Displayed in a Matrix Chart 

"matrixProperties": {
    "chartType": "string"},

where:

"chartType": "string"

Is a supported chart type for the attribute categories in the request. The default value is "bar".

Example: Controlling the Chart Type Displayed in a Matrix Chart

The following request uses a Dialogue Manager amper variable in the definition of the chartType property. The -SET command sets its value to "bar": 

-SET &TYPE=bar;
GRAPH FILE WF_RETAIL_LITE
SUM COGS_US GROSS_PROFIT_US
BY TIME_DAYNAME
BY BUSINESS_REGION
BY PRODUCT_CATEGORY
WHERE TIME_DAYNAME EQ 'FRI' OR 'MON'
WHERE BUSINESS_REGION NE 'Oceania'
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH BAR
ON GRAPH SET STYLE *
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/javaassist/intl/EN/combine_templates/ENID_Default.sty,$
TYPE=DATA, COLUMN=TIME_DAYNAME, BUCKET=row, $
TYPE=DATA, COLUMN=BUSINESS_REGION, BUCKET=column, $
TYPE=DATA, COLUMN=COGS_US, BUCKET=y-axis, $
TYPE=DATA, COLUMN=GROSS_PROFIT_US, BUCKET=y-axis, $
TYPE=DATA, COLUMN=PRODUCT_CATEGORY, BUCKET=x-axis, $
*GRAPH_JS
"matrixProperties": {"chartType": "&TYPE"}
*END
ENDSTYLE
END

The output is shown in the following image:

Changing the -SET command to the following, generates an area chart: 

-SET &TYPE=area;

The output is shown in the following image:

Formatting the Matrix Row Labels

How to:

The matrix row labels are the labels displayed at the left of each row.

Syntax: How to Format the Matrix Row Labels 

"matrixProperties": {
       "rowLabels": {
       "labels": undefined, 
       "font": "string",
       "color": "string",
       "tooltip": "string"
}

where:

"font": "string"

Is a font string for the row label text. The default value is '8pt Sans-Serif'.

"color": "string"

Is a color string for the row labels. The default value is 'black'.

"tooltip": "string"

Is a tooltip to display when the mouse hovers over a row label.

Example: Formatting the Matrix Row Labels

The following request formats the row labels in blue, bold, 12pt Sans Serif font, with the tooltip day abbreviation: 

GRAPH FILE WF_RETAIL_LITE
SUM COGS_US GROSS_PROFIT_US
BY TIME_DAYNAME  
BY BUSINESS_REGION         
BY PRODUCT_CATEGORY
WHERE TIME_DAYNAME EQ 'FRI' OR 'MON'
WHERE BUSINESS_REGION NE 'Oceania'
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH BAR       
ON GRAPH SET STYLE *
INCLUDE=ENID_Default.sty,$
TYPE=DATA, COLUMN=TIME_DAYNAME, BUCKET=row, $
TYPE=DATA, COLUMN=BUSINESS_REGION, BUCKET=column, $
TYPE=DATA, COLUMN=COGS_US, BUCKET=y-axis, $
TYPE=DATA, COLUMN=GROSS_PROFIT_US, BUCKET=y-axis, $
TYPE=DATA, COLUMN=PRODUCT_CATEGORY, BUCKET=x-axis, $ 
*GRAPH_JS
"matrixProperties": {"rowLabels": {
	"font": "bold 12pt Sans-Serif", 
	"color": "blue", 
	"tooltip": "day abbreviation"}}
*END
ENDSTYLE
END

The output is shown in the following image:

Formatting the Matrix Column Labels

How to:

The matrix column labels are the labels displayed at the top of each column.

Syntax: How to Format the Matrix Column Labels 

"matrixProperties": {
       "colLabels": {
       "labels": undefined, 
       "font": "string",
       "color": "string",
       "tooltip": "string"
}

where:

"font": "string"

Is a font string for the column label text. The default value is "8pt Sans-Serif".

"color": "string"

Is a color string for the column labels. The default value is "black".

"tooltip": "string"

Is a tooltip to display when the mouse hovers over a column label.

Example: Formatting the Matrix Column Labels

The following request formats the column labels in red, bold, 12pt Sans Serif font, with the tooltip continent: 

GRAPH FILE WF_RETAIL_LITE
SUM COGS_US GROSS_PROFIT_US
BY TIME_DAYNAME  
BY BUSINESS_REGION         
BY PRODUCT_CATEGORY
WHERE TIME_DAYNAME EQ 'FRI' OR 'MON'
WHERE BUSINESS_REGION NE 'Oceania'
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH BAR       
ON GRAPH SET STYLE *
INCLUDE=ENID_Default.sty,$
TYPE=DATA, COLUMN=TIME_DAYNAME, BUCKET=row, $
TYPE=DATA, COLUMN=BUSINESS_REGION, BUCKET=column, $
TYPE=DATA, COLUMN=COGS_US, BUCKET=y-axis, $
TYPE=DATA, COLUMN=GROSS_PROFIT_US, BUCKET=y-axis, $
TYPE=DATA, COLUMN=PRODUCT_CATEGORY, BUCKET=x-axis, $ 
*GRAPH_JS
"matrixProperties": {"colLabels": {
	"font": "bold 12pt Sans-Serif",
	"color": "red",
	"tooltip": "continent"}}
*END
ENDSTYLE
END

The output is shown in the following image:

Formatting the Matrix Row Header

How to:

The matrix row header is the single label drawn at the top of the rows.

Syntax: How to Format the Matrix Row Header 

"matrixProperties": {
       "rowHeader": {
       "text": undefined, 
       "font": "string",
       "color": "string",
       "tooltip": "string"
}

where:

"font": "string"

Is a font string for the row header text. The default value is "10pt Sans-Serif".

"color": "string"

Is a color definition string for the row header. The default value is "black".

"tooltip": "string"

Is a tooltip to display when the mouse hovers over the row header.

Example: Formatting the Matrix Row Header

The following request formats the row header in green, bold, 14pt Sans Serif font, with the tooltip row header: 

GRAPH FILE WF_RETAIL_LITE
SUM COGS_US GROSS_PROFIT_US
BY TIME_DAYNAME  
BY BUSINESS_REGION         
BY PRODUCT_CATEGORY
WHERE TIME_DAYNAME EQ 'FRI' OR 'MON'
WHERE BUSINESS_REGION NE 'Oceania'
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH BAR       
ON GRAPH SET STYLE *
INCLUDE=ENID_Default.sty,$
TYPE=DATA, COLUMN=TIME_DAYNAME, BUCKET=row, $
TYPE=DATA, COLUMN=BUSINESS_REGION, BUCKET=column, $
TYPE=DATA, COLUMN=COGS_US, BUCKET=y-axis, $
TYPE=DATA, COLUMN=GROSS_PROFIT_US, BUCKET=y-axis, $
TYPE=DATA, COLUMN=PRODUCT_CATEGORY, BUCKET=x-axis, $ 
*GRAPH_JS
"matrixProperties": {"rowHeader": {
	"font": "bold 14pt Sans-Serif",
	"color": "green",
	"tooltip": "row header"}}
*END
ENDSTYLE
END

The output is shown in the following image:

Formatting the Matrix Column Header

How to:

The matrix column header is the single label drawn at the top of the columns.

Syntax: How to Format the Matrix Column Header 

"matrixProperties": {
       "colHeader": {
       "text": undefined, 
       "font": "string",
       "color": "string",
       "tooltip": "string"
}

where:

"font": "string"

Is a font string for the column header text. The default value is "10pt Sans-Serif".

"color": "string"

Is a color definition string for the column header. The default value is "black".

"tooltip": "string"

Is a tooltip to display when the mouse hovers over the column header.

Example: Formatting the Matrix Column Header

The following request formats the column header in brown, bold, 14pt Sans Serif font, with the tooltip column header: 

GRAPH FILE WF_RETAIL_LITE
SUM COGS_US GROSS_PROFIT_US
BY TIME_DAYNAME  
BY BUSINESS_REGION         
BY PRODUCT_CATEGORY
WHERE TIME_DAYNAME EQ 'FRI' OR 'MON'
WHERE BUSINESS_REGION NE 'Oceania'
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH BAR       
ON GRAPH SET STYLE *
INCLUDE=ENID_Default.sty,$
TYPE=DATA, COLUMN=TIME_DAYNAME, BUCKET=row, $
TYPE=DATA, COLUMN=BUSINESS_REGION, BUCKET=column, $
TYPE=DATA, COLUMN=COGS_US, BUCKET=y-axis, $
TYPE=DATA, COLUMN=GROSS_PROFIT_US, BUCKET=y-axis, $
TYPE=DATA, COLUMN=PRODUCT_CATEGORY, BUCKET=x-axis, $ 
*GRAPH_JS
"matrixProperties": {"colHeader": {
	"font": "bold 14pt Sans-Serif",
	"color": "brown",
	"tooltip": "column header"}}
*END
ENDSTYLE
END

The output is shown in the following image:

Formatting the Matrix Cell Borders

How to:

The cell borders are the lines drawn between the cells of the matrix.

Syntax: How to Formatting the Matrix Cell Borders 

"matrixProperties": {
       "cellBorder": {
       "width": number,
       "color": "string",
       "dash": "string"
}

where:

"width": number

Is the width of the cell borders in pixels. The default value is 1.

"color": "string"

Is a color definition string for the cell borders. The default value is "grey".

"dash": "string"

Is the dash style for the cell borders. Specify a dash width in pixels followed by the number of pixels between dashes. The default is no dash (““).

Example: Formatting the Matrix Cell Borders

The following request formats the cell borders to be navy with a width of 2 pixels and a dash style in which the length of each dash is 4 pixels and the space between dashes is 2 pixels: 

GRAPH FILE WF_RETAIL_LITE
SUM COGS_US GROSS_PROFIT_US
BY TIME_DAYNAME  
BY BUSINESS_REGION         
BY PRODUCT_CATEGORY
WHERE TIME_DAYNAME EQ 'FRI' OR 'MON'
WHERE BUSINESS_REGION NE 'Oceania'
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH BAR       
ON GRAPH SET STYLE *
INCLUDE=ENID_Default.sty,$
TYPE=DATA, COLUMN=TIME_DAYNAME, BUCKET=row, $
TYPE=DATA, COLUMN=BUSINESS_REGION, BUCKET=column, $
TYPE=DATA, COLUMN=COGS_US, BUCKET=y-axis, $
TYPE=DATA, COLUMN=GROSS_PROFIT_US, BUCKET=y-axis, $
TYPE=DATA, COLUMN=PRODUCT_CATEGORY, BUCKET=x-axis, $ 
*GRAPH_JS
"matrixProperties": {"cellBorder": {
	"width": 2,
	"color": "navy",
	"dash": "4 2"}}
*END
ENDSTYLE
END

The output is shown in the following image:

Controlling the Matrix Chart Minimum Cell Size

How to:

You can specify a minimum width and height for the cells in a matrix chart, or use 'auto' to have the chart engine make the cells as small as possible while still being readable.

Syntax: How to Control the Minimum Cell Size in a Matrix Chart 

matrixProperties: {  
       "minCellSize": {"width": number, "height": number}}

where:

"minCellSize"
Defines the minimum cell size. If the cell size multiplied by data size is bigger than the chart area, scrolling will be activated. If it is smaller than the chart area, the cells will grow to fill it. The value can be "auto" to let the chart engine determine the minimum size.
"width": number
Is the minimum width in pixels.
"height": number
Is the minimum height in pixels.

Note: Use {"width": 0, "height": 0} to evenly split the available space.

Example: Setting the Minimum Cell Size in a Matrix Chart

The following request defines the minimum cell size to be {width:300, height:300}, which activates scrolling: 

GRAPH FILE WF_RETAIL_LITE
SUM COGS_US GROSS_PROFIT_US
BY TIME_DAYNAME  
BY BUSINESS_REGION         
BY PRODUCT_CATEGORY
WHERE TIME_DAYNAME EQ 'FRI' OR 'MON'
WHERE BUSINESS_REGION NE 'Oceania'
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH BAR       
ON GRAPH SET STYLE *
INCLUDE=ENID_default.sty,$
TYPE=DATA, COLUMN=TIME_DAYNAME, BUCKET=row, $
TYPE=DATA, COLUMN=BUSINESS_REGION, BUCKET=column, $
TYPE=DATA, COLUMN=COGS_US, BUCKET=y-axis, $
TYPE=DATA, COLUMN=GROSS_PROFIT_US, BUCKET=y-axis, $
TYPE=DATA, COLUMN=PRODUCT_CATEGORY, BUCKET=x-axis, $ 
*GRAPH_JS
"matrixProperties": {
	"minCellSize": {"width": 300, "height": 300}}
*END
ENDSTYLE
END

The unscrolled output is shown in the following image:

The following image shows the output with the scroll bars dragged to show the complete chart for the cell representing column North America and row MON:

WebFOCUS

Feedback