Chart Types for Chart Attribute Syntax

Example: Sample Area Chart Using Chart Attribute Syntax

The following request generates an area chart. The sort field (TIME_YEARQTR) is assigned to the color category, the sort field PRODUCT_CATEGORY is assigned to the x-axis category, and the measure field is assigned to the y-axis. The chart type is AREA:

GRAPH FILE WF_RETAIL_LITE
SUM COGS_US
BY WF_RETAIL_TIME_SALES.TIME_YEARQTR
BY PRODUCT_CATEGORY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH AREA       
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=PRODUCT_CATEGORY, BUCKET=x-axis, $
TYPE=DATA, COLUMN=WF_RETAIL_TIME_SALES.TIME_YEARQTR, BUCKET=color, $ 
ENDSTYLE
END

The output is shown in the following image:

Example: Sample Stacked Bar Chart Using Chart Attribute Syntax

The following request generates a stacked bar chart. The sort field (PRODUCT_CATEGORY) is assigned to the x-axis, the sort field BUSINESS_REGION is assigned to the color category, and the measure COGS_US is assigned to the y-axis. (For information about creating stacked bar charts, see Specifying Chart Layout for Bar, Line, and Area Charts.)

The chart type is BAR:

GRAPH FILE WF_RETAIL_LITE
SUM COGS_US 
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=REPORT, CHART-SERIES-LAYOUT=stacked,$
TYPE=DATA, COLUMN=COGS_US, BUCKET=y-axis, $
TYPE=DATA, COLUMN=BUSINESS_REGION, BUCKET=color, $
TYPE=DATA, COLUMN=PRODUCT_CATEGORY, BUCKET=x-axis, $ 
ENDSTYLE
END

The output is shown in the following image:

Example: Sample Boxplot Using Chart Attribute Syntax

The following request generates a boxplot.

DEFINE FILE WF_RETAIL_LITE
DIFF1 = COGS_US -100000;
DIFF2 = COGS_US -200000;
DIFF3 = COGS_US +100000;
DIFF4 = COGS_US +200000;
END
GRAPH FILE WF_RETAIL_LITE
SUM DIFF1 DIFF2 MDN.COGS_US DIFF3 DIFF4
BY PRODUCT_CATEGORY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH BOXPLOT
ON GRAPH SET STYLE *
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/javaassist/intl/EN/combine_templates/ENWarm.sty,$
type=data, column=product_category, bucket=x-axis,$
type=data, column=diff2, bucket=min,$
type=data, column=diff1, bucket=lower,$
type=data, column=c4, bucket=median,$
type=data, column=diff3, bucket=upper,$
type=data, column=diff4, bucket=max,$
*GRAPH_JS
"boxPlotProperties": {"drawHatAsBox": false}
*END
ENDSTYLE
END

The output is shown in the following image.

Example: Sample Bubble Chart Using Chart Attribute Syntax

The following request generates a bubble chart. The sort field (PRODUCT_CATEGORY) is assigned to the color attribute category and generates the legend, the first measure (COGS_US) is assigned to the y-axis, the second measure (GROSS_PROFIT_US) is assigned to the x-axis, and the third measure (REVENUE_US) is assigned to the size category and generates a size indicator in the legend area. The chart type is BUBBLE:

GRAPH FILE WF_RETAIL_LITE
SUM COGS_US
GROSS_PROFIT_US
REVENUE_US
BY PRODUCT_CATEGORY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH BUBBLE    
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=GROSS_PROFIT_US, BUCKET=x-axis, $
TYPE=DATA, COLUMN=PRODUCT_CATEGORY, BUCKET=color, $
TYPE=DATA, COLUMN=REVENUE_US, BUCKET=size, $
ENDSTYLE
END

The output is shown in the following image:

Example: Sample Bubblemap Using a Location With Chart Attribute Syntax

The following request generates a proportional symbol chart using an Esri map as the base layer. The markers are located using the COUNTRY_NAME sort field, are colored by the MIN.CITY_POPULATION measure, and are sized by the MAX.DAYSDELAYED measure. The JSON property bubbleMarker:maxSize scales the markers to 10%. Other properties in the StyleSheet specify the map type, map layers, and other map properties. For more information, see Lightweight Map Support:

GRAPH FILE WF_RETAIL_LITE
SUM MIN.CITY_POPULATION MAX.DAYSDELAYED
BY COUNTRY_NAME
WHERE COUNTRY_NAME NE 'Taiwan'
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH BUBBLEMAP
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
TYPE=REPORT, CHART-LOOK=com.esri.map, $
TYPE=DATA, COLUMN=COUNTRY_NAME, BUCKET=location, $
TYPE=DATA, COLUMN=MIN.CITY_POPULATION, BUCKET=size, $
TYPE=DATA, COLUMN=MAX.DAYSDELAYED, BUCKET=color, $
*GRAPH_JS
"legend": {
    "visible": true
},
 "bubbleMarker": {"maxSize": "10%" },

"extensions": {
    "com.esri.map": {
        "overlayLayers":             [
                {
                    "title": "Population",
                    "layerType": "bubble",
                    "geometrySourceType": "esri",
                    "geometryLocateField": ["Country"],
                    "geometryDataField": "name",
                    "url": "http://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/World_Countries_(Generalized)/FeatureServer/0"
                }
            ],
        "baseLayer": {
            "basemap": "streets"
        }
    }
}
*END
ENDSTYLE
END

The output is shown in the following image:

Example: Sample Bubblemap Using Latitude and Longitude With Chart Attribute Syntax

The following request generates a proportional symbol chart using an Esri map as the base layer. The markers are located using the COUNTRY_LATITUDE and COUNTRY_LONGITUDE sort fields and are sized by the MIN.CITY_POPULATION measure. The JSON property bubbleMarker:maxSize scales the markers to 10%. Other properties in the StyleSheet specify the map type, map layers, and other map properties. For more information, see Lightweight Map Support:

GRAPH FILE WF_RETAIL_LITE
SUM MIN.CITY_POPULATION
BY COUNTRY_LATITUDE
BY COUNTRY_LONGITUDE
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH BUBBLEMAP
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/javaassist/intl/EN/combine_templates/ENWarm.sty,$
TYPE=REPORT, CHART-LOOK=com.esri.map, $
TYPE=DATA, COLUMN=COUNTRY_LATITUDE, BUCKET=latitude, $
TYPE=DATA, COLUMN=COUNTRY_LONGITUDE, BUCKET=longitude, $
TYPE=DATA, COLUMN=MIN.CITY_POPULATION, BUCKET=size, $
*GRAPH_JS
  "bubbleMarker":{"maxSize":"10%"},

"legend": {
    "visible": false
},
"extensions": {
    "com.esri.map": {
        "overlayLayers":             [
                {
                    "title": "Population",
                    "layerType": "bubble",
                    "geometryXY": {
                        "y": "lat",
                        "x": "lng"
                    },
                    "geometrySourceType": "seriesdata"
                }
            ],
        "baseLayer": {
            "basemap": "streets"
        }
    }
}
 
*END
ENDSTYLE
END

The output is shown in the following image:

Example: Sample Choropleth Using Chart Attribute Syntax

The following request generates a choropleth chart using an Esri map as the base layer. The colored polygons represent the COUNTRY_NAME sort field and are colored by the MIN.CITY_POPULATION measure. The JSON property colorScale establishes the color scale for the polygons. Other properties in the StyleSheet specify the map type, map layers, and other map properties. For more information, see Lightweight Map Support:

GRAPH FILE WF_RETAIL_LITE
SUM MIN.CITY_POPULATION 
BY COUNTRY_NAME 
WHERE COUNTRY_NAME NE 'Taiwan'
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH CHOROPLETH
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
TYPE=REPORT, CHART-LOOK=com.esri.map, $
TYPE=DATA, COLUMN=COUNTRY_NAME, BUCKET=location, $
TYPE=DATA, COLUMN=MIN.CITY_POPULATION, BUCKET=color, $
*GRAPH_JS
legend: {
    "visible": true
},
 "colorScale": {"colors":["navy", "green", "teal", "cyan"]},

"extensions": {
    "com.esri.map": {
        "overlayLayers":             [
                {
                    "title": "WF_RETAIL_LITE Countries",
                    "layerType": "choropleth",
                    "geometrySourceType": "esri",
                    "geometryLocateField": ["Country"],
                    "geometryDataField": "name",
                    "url": "http://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/World_Countries_(Generalized)/FeatureServer/0"
                }
            ],
        "baseLayer": {
            "basemap": "streets"
        }
    }
}
 
*END
ENDSTYLE
END

The output is shown in the following image:

Example: Generating a Data Grid

The following request generates a data grid with column totals. The rows represent product categories and product sub-categories. The columns represent the first two quarters of the year and the North America and South America business regions. The measures are cost of goods and gross profit. By default, scroll bars are added when the entire grid does not fit in the draw area.

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.

Example: Sample Funnel Chart Using Chart Attribute Syntax

The following request generates a funnel chart.

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

The output is shown in the following image.

Example: Sample Gauge Chart Using Chart Attribute Syntax

The following request generates a gauge chart. The chart type is GAUGE:

GRAPH FILE WF_RETAIL_LITE
SUM REVENUE_US 
BY PRODUCT_CATEGORY
WHERE PRODUCT_CATEGORY EQ 'Computers'
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH GAUGE  
ON GRAPH SET STYLE *
type=data, column=revenue_us, bucket=measure,$
*GRAPH_JS
"gaugeProperties": {
	"groupLabel": {"visible": false},
	"totalLabel": {"visible": false}
	}
*END
ENDSTYLE
END

The output is shown in the following image:

Example: Sample Heatmap Using Chart Attribute Syntax

The following request generates a heatmap where the rectangles are colored by the measure COGS_US (color category), the rows represent the first BY field (y-axis category), and the columns represent the second BY field (x-axis category). The chart type is HEATMAP:

GRAPH FILE WF_RETAIL_LITE
SUM COGS_US
BY PRODUCT_CATEGORY  
BY BUSINESS_REGION    
WHERE BUSINESS_REGION NE 'Oceania'
ON GRAPH SET LOOKGRAPH HEATMAP   
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET STYLE *
type=data, column=product_category, bucket=y-axis, $
type=data, column=business_region, bucket=x-axis, $
type=data, column=cogs_us, bucket=color, $
END

The output is shown in the following image:

Example: Sample Line Chart

The following request creates a line chart. The sort field TIME_YEARMTH is assigned to the x-axis category. The measure COGS_US is assigned to the y-axis category. The measure DISCOUNT_US is assigned to the color category and is used to color the line, markers, and legend. Since the color field is a measure, the colors are visualized as a gradient. The chart type is LINE:

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

The output is shown in the following image:

Example: Sample Matrix Marker Chart Using Chart Attribute Syntax

The following request generates a matrix marker chart. The rows represent product categories. The columns represent business regions. The marker in each cell is sized by the GROSS_PROFIT_US measure and colored by the COGS_US measure. The marker and legend colors are visualized as a gradient.

The JSON properties change the marker shape to a square. The chart type is MARKER:

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 *
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/javaassist/intl/EN/combine_templates/ENWarm.sty,$
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, $
*GRAPH_JS
"series": [{"series": 0, "marker": {"shape": "square"}}]
*END
ENDSTYLE
END

The output is shown in the following image:

Example: Sample Mekko Chart Using Chart Attribute Syntax

The following request generates a mekko chart with one measure, one sort field for the x-axis, and one sort field for the color category.

GRAPH FILE WF_RETAIL_LITE
SUM COGS_US 
BY BUSINESS_SUB_REGION
BY PRODUCT_CATEGORY
WHERE COUNTRY_NAME EQ 'United States'
ON TABLE PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH MEKKO       
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=BUSINESS_SUB_REGION, bucket=color,$
type=data, column=product_category, bucket=x-axis,$
ENDSTYLE
END

The output is shown in the following image.

Example: Sample Pie Chart Using Chart Attribute Syntax

The basic components of a pie chart are a measure and a sort field. The sort field generates the colors for the slices and the legend. The chart type is PIE:

GRAPH FILE WF_RETAIL_LITE
SUM COGS_US
BY PRODUCT_CATEGORY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH PIE  
ON GRAPH SET STYLE *
TYPE=DATA, COLUMN=PRODUCT_CATEGORY, BUCKET=color, $
TYPE=DATA, COLUMN=COGS_US, BUCKET=measure, $
ENDSTYLE
END

The output is shown in the following image:

To generate a pie chart with a hole, add the JSON holeSize property:

GRAPH FILE WF_RETAIL_LITE
SUM COGS_US
BY PRODUCT_CATEGORY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH PIE
ON GRAPH SET STYLE *
TYPE=DATA, COLUMN=PRODUCT_CATEGORY, BUCKET=color, $
TYPE=DATA, COLUMN=COGS_US, BUCKET=measure, $
*GRAPH_JS
"pieProperties": {"holeSize": "25%"}
*END
ENDSTYLE
END

The output is shown in the following image. By default, the total label displays in the hole:

Example: Sample Scatter Chart Using Chart Attribute Syntax

The following request creates a scatter chart. The sort field TIME_YEARMTH is assigned to the x-axis category. The measure COGS_US is assigned to the y-axis category. The chart type is SCATTER:

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

The output is shown in the following image:

Example: Sample Streamgraph Colored by a Dimension

The following request generates a streamgraph where the areas are colored by the BUSINESS_SUB_REGION dimension.

GRAPH FILE WF_RETAIL_LITE
SUM COGS_US 
BY BUSINESS_SUB_REGION
BY TIME_MTH
ON TABLE PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH STREAM    
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=time_mth, bucket=x-axis,$
type=data, column=business_sub_region, bucket=color,$
ENDSTYLE
END

The output is shown in the following image.

Example: Sample Tagcloud Using Chart Attribute Syntax

The following request generates a tagcloud in which the tags are the brand names, the color of the tags is controlled by the quantity sold, and the size of the tags is controlled by the gross profit.

GRAPH FILE WF_RETAIL_LITE
SUM QUANTITY_SOLD  GROSS_PROFIT_US
BY BRAND
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET LOOKGRAPH TAGCLOUD    
ON GRAPH SET STYLE *
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/javaassist/intl/EN/combine_templates/ENWarm.sty,$
type=data, column=brand, bucket=detail,$
type=data, column=quantity_sold, bucket=color,$
type=data, column=gross_profit_us, bucket=size,$
*GRAPH_JS
"tagcloudProperties": {"engine": "new"}
*END
ENDSTYLE
END

The output is shown in the following image.

Example: Sample Treemap Colored by a Measure

The following example generates a treemap colored by the measure MSRP_US and sized by the measure COGS_US. Since the color-by field is a measure, the colors in the rectangles and legend are visualized as a gradient. The chart type is TREEMAP:

GRAPH FILE WF_RETAIL_LITE
SUM COGS_US MSRP_US
BY PRODUCT_CATEGORY
BY BRAND
ON GRAPH SET LOOKGRAPH TREEMAP 
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET STYLE *
type=report, column=COGS_US,   bucket=size, $
type=report, column=MSRP_US,   bucket=color, $
type=report, column=PRODUCT_CATEGORY, bucket=detail, $
type=report, column=BRAND,   bucket=detail, $
END

The output is shown in the following image:

Example: Sample Treemap Colored by a Dimension

The following example generates a treemap colored by the first BY field. Since the color-by field is a dimension, discrete colors are generated for the rectangles and the legend. The second BY field (detail attribute category) accounts for the subdivisions of the colored boxes. Note that the prefix operator used in the request is also used when assigning the field to the category:

GRAPH FILE WF_RETAIL_LITE
SUM CNT.COGS_US     
BY PRODUCT_CATEGORY
BY BRAND
ON GRAPH SET LOOKGRAPH TREEMAP
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET STYLE *
type=report, column=product_category, bucket=color, $
type=report, column=brand, bucket=detail, $
type=report, column=cnt.cogs_us, bucket=size, $
END

The output is shown in the following image: