Chart Attribute Syntax

Chart attribute syntax introduces the following new chart types:

• Matrix Charts. In addition to assigning fields in the request to specific chart components, you can create multiple charts by assigning fields to the row and column categories in order to generate a matrix of charts.

  The following request generates a matrix of bar charts.

  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/ENWarm.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, $ 
  ENDSTYLE
  END

  The output is shown in the following image.

  

• Matrix Marker Charts. A matrix marker chart is a graphical representation of tabular data. It displays a marker in each cell of a matrix. This marker can be sized by one measure and colored by a second measure.

  The following request generates a matrix marker chart.

  GRAPH FILE WF_RETAIL_LITE
  SUM COGS_US
  GROSS_PROFIT_US
  BY PRODUCT_CATEGORY
  BY BUSINESS_REGION
  WHERE BUSINESS_REGION NE 'Oceania'
  WHERE PRODUCT_CATEGORY LE 'D'
  ON GRAPH PCHOLD FORMAT JSCHART
  ON GRAPH SET LOOKGRAPH MARKER     
  ON GRAPH SET STYLE *
  TYPE=DATA, COLUMN=COGS_US, BUCKET=color, $
  TYPE=DATA, COLUMN=PRODUCT_CATEGORY, BUCKET=row, $
  TYPE=DATA, COLUMN=BUSINESS_REGION, BUCKET=column, $
  TYPE=DATA, COLUMN=GROSS_PROFIT_US, BUCKET=size, $
  ENDSTYLE
  END

  The output is shown in the following image.

  

• Data Grids. A data grid is a tabular representation of data. The grid can have multiple rows, columns, and measures. Column totals can be generated using several types of aggregation calculations, such as a sum (the default) or an average. Unlike the tabular reports generated with the WebFOCUS TABLE FILE command, data grids are generated in a GRAPH FILE request using PCHOLD FORMAT JSCHART.

  The following request generates a data grid with default column totals (sums).

  GRAPH FILE WF_RETAIL_LITE
  SUM COGS_US GROSS_PROFIT_US
  BY PRODUCT_CATEGORY
  BY PRODUCT_SUBCATEG
  BY TIME_QTR
  BY BUSINESS_REGION
  WHERE (BUSINESS_REGION NE 'Oceania' OR 'EMEA') AND (TIME_QTR EQ 1 OR 2)
  ON GRAPH PCHOLD FORMAT JSCHART
  ON GRAPH SET LOOKGRAPH DATAGRID
  ON GRAPH SET AUTOFIT ON
  ON GRAPH SET STYLE *
  type=data, column=product_category, bucket=row, $
  type=data, column=product_subcateg,  bucket=row, $
  type=data, column=time_qtr,     bucket=column, $
  type=data, column=business_region,   bucket=column, $
  type=data, column=cogs_us,    bucket=measure, $
  type=data, column=gross_profit_us, bucket=measure, $
  *GRAPH_JS
  dataGridProperties: {
  columnTotals:{visible:true}
  }
  *END
  ENDSTYLE
  END

  The output is shown in the following image.

  

Chart attribute syntax lets you add additional fields to a request and, depending on the chart type, assign them to the color, size, slider, and detail attribute categories.

• Color-by and size-by fields. For some types of charts, chart attribute syntax enables you to add additional information to a chart by adding additional fields whose values are used to color and size risers or markers. For example, line charts can have size and color categories when using chart attribute syntax. If the markers are visible, their size is varied to represent the size measure value. If the markers are not visible, the line width is varied to represent the size measure value. The color-by field can be a measure or dimension field. The color is reflected in the markers, lines, and legend. If a color-by field is a measure, the colors are visualized as a gradient. If it is a dimension, the colors are visualized as discrete colors.

  The following request generates a line chart with size-by and color-by fields.

  DEFINE FILE WF_RETAIL_LITE
  SIZE1 WITH WF_RETAIL_SALES.COGS_US = 
    IF WF_RETAIL_TIME_SALES.TIME_YEARQTR LT 200902 THEN 5 
    ELSE IF WF_RETAIL_TIME_SALES.TIME_YEARQTR LT 200903 THEN 50
    ELSE 200;
  END
  GRAPH FILE WF_RETAIL_LITE
  SUM COGS_US GROSS_PROFIT_US MSRP_US SIZE1
  BY WF_RETAIL_TIME_SALES.TIME_YEARQTR     
  ON GRAPH PCHOLD FORMAT JSCHART
  ON GRAPH SET LOOKGRAPH LINE
  ON GRAPH SET STYLE *
  INCLUDE=IBFS:/FILE/IBI_HTML_DIR/javaassist/intl/EN/combine_templates/ENWarm.sty,$
  TYPE=DATA, COLUMN=WF_RETAIL_TIME_SALES.TIME_YEARQTR, BUCKET=x-axis, $
  TYPE=DATA, COLUMN=COGS_US, BUCKET=y-axis, $
  TYPE=DATA, COLUMN=GROSS_PROFIT_US, BUCKET=y-axis, $
  TYPE=DATA, COLUMN=MSRP_US, BUCKET=color, $
  TYPE=DATA, COLUMN=SIZE1, BUCKET=size, $
  *GRAPH_JS
  series: [
  {series:0, marker: {visible:false}},
  {series:1, marker: {visible:true, shape:'circle'}}
  ]
  *END
  ENDSTYLE
  END

  The output is shown in the following image.

  

• Detail fields for bubble and scatter charts. For bubble and scatter charts, you can add additional low-level sort fields to the request and assign these fields to the detail category. The effect of these additional sort fields is to add more data points to the chart.

  The following request generates a scatter chart with an additional detail sort field.

  GRAPH FILE WF_RETAIL_LITE
  SUM COGS_US
  REVENUE_US
  BY PRODUCT_CATEGORY
  ON GRAPH PCHOLD FORMAT JSCHART
  ON GRAPH SET LOOKGRAPH SCATTER
  ON GRAPH SET STYLE *
  INCLUDE=IBFS:/FILE/IBI_HTML_DIR/javaassist/intl/EN/combine_templates/ENWarm.sty,$
  TYPE=DATA, COLUMN=COGS_US, BUCKET=y-axis, $
  TYPE=DATA, COLUMN=REVENUE_US, BUCKET=x-axis, $
  TYPE=DATA, COLUMN=PRODUCT_CATEGORY, BUCKET=color, $
  ENDSTYLE
  END

  The output is shown in the following image.

  

• Sliders. A slider control on a chart creates an animation effect as you move the control along the slider bar. A slider is limited to one sort field only and should preferably be something time or sequence related such as YEAR.

  The following request generates a chart with a slider control.

  GRAPH FILE WF_RETAIL_LITE
  SUM DISCOUNT_US 
  BY WF_RETAIL_TIME_SALES.TIME_YEARQTR  
  BY BUSINESS_REGION
  BY PRODUCT_CATEGORY
  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/ENWarm.sty,$
  TYPE=DATA, COLUMN=DISCOUNT_US , BUCKET=y-axis, $
  TYPE=DATA, COLUMN=BUSINESS_REGION, BUCKET=color, $
  TYPE=DATA, COLUMN=PRODUCT_CATEGORY, BUCKET=x-axis, $ 
  TYPE=DATA, COLUMN=WF_RETAIL_TIME_SALES.TIME_YEARQTR, BUCKET=slider, $ 
  ENDSTYLE
  END

  The output is shown in the following image.

  

In addition, you can generate separate chart pages using the page attribute category and add fields to the tooltip using the tooltip category.

For complete information about chart attribute syntax, see the Creating HTML5 Charts With WebFOCUS Language manual.