Combo Chart

JSON Data Attribute	XML declaration	Description / Notes
name	`<cell type="text" data-format="text" alignment="left" style="col_header_1" print-width="130" chart-attr-name="seriesName">TotalOperatingCosts</cell>`	`“seriesName”` is a constant attribute name. The value is derived based on the cell type definition.
items	`<cell type="expr" data-format="integer" alignment="right" style="header_1" suppress-formatting="true">DBGET("DailyOpsQuery","prepCostTotal")</cell>`	This attribute must directly follow the `“seriesName”` declaration. This is the chart data points/items values. The `“suppress-formatting”` property must be set to `true`. The value is derived based on the cell type definition.
type	`<cell type="chart_text" data-format="text" alignment="left" chart-attr-name="chartType">line</cell>`	`“chartType”` is a constant attribute name. The cell type must be set to `“chart_text”`. Valid values are `line`, `bar`, or `area`.
color	`<cell type="chart_text" data-format="text" alignment="left" chart-attr-name="chartColor">dvtCategory5Color</cell>`	`“chartColor”` is a constant attribute name. The cell type must be set to `“chart_text”`. Valid values are listed in this table.
markerDisplayed	`<cell type="chart_text" data-format="text" alignment="left" chart-attr-name="markerDisplayed">on</cell>`	`“markerDisplayed”` is a constant attribute name. The cell type must be set to `“chart_text”`. Valid values are `on` or `off`.
groupData	`<cell type="column" data-format="text" alignment="left" chart-attr-name="groupData">Group A</cell>`	`“groupData”` is a constant attribute name. The value is derived based on the cell type definition.
stackValue	`<cell type="chart_text" data-format="text" alignment="left" chart-attr-name="stackValue">on</cell>`	`“stackValue”` is a constant attribute name. The cell type must be set to `“chart_text”`. Valid values are`on` or `off`.
dualY	`<cell type="chart_text" data-format="text" alignment="left" chart-attr-name="dualY">on</cell>`	`“dualY”` is a constant attribute name. The cell type must be set to `“chart_text”`. Valid values are `on` or `off`.
xAxisTitle	`<cell type="text" data-format="text" alignment="left" chart-attr-name="xAxisTitle">Y Axis Title</cell>`	`“xAxisTitle”` is a constant attribute name. The value is derived based on the cell type definition.
xAxisRefObjValue	`<cell type="text" data-format="text" alignment="left" chart-attr-name="xAxisRefObjValue">Group A</cell>`	`“xAxisRefObjValue”` is a constant attribute name. The value is derived based on the cell type definition.
xAxisRefObjLegendText	`<cell type="text" data-format="text" alignment="left" chart-attr-name="xAxisRefObjLegendText">X Axis Object Reference Text</cell>`	`“xAxisRefObjLegendText”` is a constant attribute name. The value is derived based on the cell type definition.
xAxisRefObjHoverDescValue	`<cell type="text" data-format="text" alignment="left" chart-attr-name="xAxisRefObjHoverDescValue">X Axis Sample Reference Line</cell>`	`“xAxisRefObjHoverDescValue”` is a constant attribute name. The value is derived based on the cell type definition.
yAxisTitle	`<cell type="text" data-format="text" alignment="left" chart-attr-name="yAxisTitle">Y Axis Title</cell>`	`“yAxisTitle”` is a constant attribute name. The value is derived based on the cell type definition.
yAxisRefObjValue	`<cell type="text" data-format="text" alignment="left" chart-attr-name="yAxisRefObjValue">25000</cell>`	`“yAxisRefObjValue”` is a constant attribute name. The value is derived based on the cell type definition.
yAxisRefObjLegendText	`<cell type="text" data-format="text" alignment="left" chart-attr-name="yAxisRefObjLegendText">Y Axis Object Reference Text</cell>`	`“yAxisRefObjLegendText”` is a constant attribute name. The value is derived based on the cell type definition.
yAxisRefObjHoverDescValue	`<cell type="text" data-format="text" alignment="left" chart-attr-name="yAxisRefObjHoverDescValue">Y Axis Sample Reference Line</cell>`	`“yAxisRefObjHoverDescValue”` is a constant attribute name. Value is derived based on the cell type definition.
y2AxisTitle	`<cell type="text" data-format="text" alignment="left" chart-attr-name="y2AxisTitle">Y2 Axis Title</cell>`	`“y2AxisTitle”` is a constant attribute name. The value is derived based on the cell type definition.
hoverSeriesLabel	`<cell type="text" data-format="text" alignment="left" chart-attr-name="hoverSeriesLabel">Test Series</cell>`	`“hoverSeriesLabel”` is a constant attribute name. The value is derived based on the cell type definition.
hoverValueLabel	`<cell type="text" data-format="text" alignment="left" chart-attr-name="hoverValueLabel">Test Value</cell>`	`“hoverValueLabel”` is a constant attribute name. The value is derived based on the cell type definition.
hoverGroupLabel	`<cell type="text" data-format="text" alignment="left" chart-attr-name="hoverGroupLabel">Test Group</cell>`	`“hoverGroupLabel”` is a constant attribute name. The value is derived based on the cell type definition.
hoverValueY2Label	`<cell type="text" data-format="text" alignment="left" chart-attr-name="hoverValueY2Label">Test Value Y2</cell>`	`“hoverValueY2Label”` is a constant attribute name. The value is derived based on the cell type definition.
dataType	`<cell type="chart_text" data-format="text" alignment="left" chart-attr-name="dataType">integer</cell>`	`“dataType”` is a constant attribute name. This applies data formatting to `“items”` values. The cell type must be set to `“chart_text”`. The valid value is the same as those that can be defined in cell data-format.
decimalPlaces	`<cell type="chart_text" data-format="text" alignment="left" chart-attr-name="decimalPlaces">2</cell>`	`“decimalPlaces”` is a constant attribute name. This set number of decimal places to `“items”` values. The cell type must be set to `“chart_text”`. The Value is an integer.
dataTypeY2	`<cell type="chart_text" data-format="text" alignment="left" chart-attr-name="dataTypeY2">integer</cell>`	“dataType” is a constant attribute name. This applies data formatting to `“items”` values in the Y-2 axis. The cell type must be set to `“chart_text”`. The valid value is the same as those that can be defined in cell data-format.
decimalPlacesY2	`<cell type="chart_text" data-format="text" alignment="left" chart-attr-name=" decimalPlacesY2">2</cell>`	`“decimalPlacesY2”` is a constant attribute name. This set number of decimal places to `“items”` values in the Y-2 axis. The cell type must be set to `“chart_text”`. The value is an integer.
dataTypeSeriesFormat	`<cell type="chart_text" data-format="text" alignment="left" chart-attr-name="dataTypeSeriesFormat">percent</cell>`	`“dataTypeSeriesFormat”` is a constant attribute name. This applies data formatting to `“seriesName”` values. The cell type must be set to `“chart_text”`. The valid value is the same as those that can be defined in cell data-format.
dataTypeGroupFormat	`<cell type="chart_text" data-format="text" alignment="left" chart-attr-name="dataTypeGroupFormat">currency</cell>`	`“dataTypeGroupFormat”` is a constant attribute name. This applies data formatting to `“groupData”` values. The cell type must be set to `“chart_text”`. The valid value is the same as those that can be defined in cell data-format.

Table 4-1 Valid Color Values

Color Value	Sample
`dvtCategory1Color`
`dvtCategory1ColorAlt`
`dvtCategory2Color`
`dvtCategory2ColorAlt`
`dvtCategory3Color`
`dvtCategory3ColorAlt`
`dvtCategory4Color`
`dvtCategory4ColorAlt`
`dvtCategory5Color`
`dvtCategory5ColorAlt`
`dvtCategory6Color`
`dvtCategory6ColorAlt`
`dvtCategory7Color`
`dvtCategory7ColorAlt`
`dvtCategory8Color`
`dvtCategory8ColorAlt`
`dvtCategory9Color`
`dvtCategory9ColorAlt`
`dvtCategory10Color`
`dvtCategory10ColorAlt`
`dvtCategory11Color`
`dvtCategory11ColorAlt`
`dvtCategory12Color`
`dvtCategory12ColorAlt`

Example of XML Report Definition to Generate Combo Chart JSON Data

<report>
        <frame type="table" query-name="MajorGroupsQuery" name="comboFrame">
            <bands>

                <band type="table-body">
                    <cell type="text" data-format="text" alignment="left" print-width="140" indent-level="3" chart-attr-name="seriesName">Series1</cell> 
                    <cell type="column" data-format="currency" alignment="right" suppress-formatting="true" print-width="70">salesTotal</cell>
		<cell type="chart_text" data-format="text" alignment="left" chart-attr-name="chartType">bar</cell> 
					
		<cell type="text" data-format="text" alignment="left" print-width="140" indent-level="3" chart-attr-name="seriesName">Series2</cell> 
                    <cell type="column" data-format="currency" alignment="right" suppress-formatting="true" print-width="70">salesTotal</cell>
		<cell type="chart_text" data-format="text" alignment="left" chart-attr-name="chartType">line</cell> 
		<cell type="chart_text" data-format="text" alignment="left" chart-attr-name="chartColor">dvtCategory5Color</cell> 
		<cell type="chart_text" data-format="text" alignment="left" chart-attr-name="markerDisplayed">on</cell>
					
		<cell type="text" data-format="text" alignment="left" print-width="140" indent-level="3" chart-attr-name="seriesName">Series3</cell>                     
		<cell type="column" data-format="currency" alignment="right" suppress-formatting="true" print-width="70">salesTotal</cell>
		<cell type="chart_text" data-format="text" alignment="left" chart-attr-name="chartType">area</cell> <!-- combo chart type attribute -->
					
		<cell type="text" data-format="text" alignment="left" print-width="140" indent-level="3" chart-attr-name="seriesName">Series4</cell> 
                    <cell type="column" data-format="currency" alignment="right" suppress-formatting="true" print-width="70">salesTotal</cell>
		<cell type="chart_text" data-format="text" alignment="left" chart-attr-name="chartType">bar</cell> 
		<cell type="chart_text" data-format="text" alignment="left" chart-attr-name="chartColor">dvtCategory6Color</cell> 
		<cell type="chart_text" data-format="text" alignment="left" chart-attr-name="assignedToY2">on</cell> 
					
		<cell type="column" data-format="text" alignment="left" chart-attr-name="groupData">majorGroupNameMaster</cell>
                </band>
				
	    <band type="table-column-header">
		<!--  xAxisTitle chart attribute  -->
                    <cell type="text" data-format="text" alignment="left" chart-attr-name="xAxisTitle">X Axis Title</cell>
		<!--  xAxisRefObjValue chart attribute  -->
                    <cell type="text" data-format="text" alignment="left" chart-attr-name="xAxisRefObjValue">Group A</cell>
		<!--  xAxisRefObjLegendText chart attribute  -->
                    <cell type="text" data-format="text" alignment="left" chart-attr-name="xAxisRefObjLegendText">X Axis Object Reference Text</cell>
		<!--  xAxisRefObjHoverDescValue chart attribute  -->
                    <cell type="text" data-format="text" alignment="left" chart-attr-name="xAxisRefObjHoverDescValue">X Axis Sample Reference Line</cell>
		<!--  yAxisTitle chart attribute  -->
                    <cell type="text" data-format="text" alignment="left" chart-attr-name="yAxisTitle">Y Axis Title</cell>
		<!--  yAxisRefObjValue chart attribute  -->
                    <cell type="text" data-format="text" alignment="left" chart-attr-name="yAxisRefObjValue">Group B</cell>
		<!--  yAxisRefObjLegendText chart attribute  -->
                    <cell type="text" data-format="text" alignment="left" chart-attr-name="yAxisRefObjLegendText">Y Axis Object Reference Text</cell>
		<!--  yAxisRefObjHoverDescValue chart attribute  -->
                    <cell type="text" data-format="text" alignment="left" chart-attr-name="yAxisRefObjHoverDescValue">Y Axis Sample Reference Line</cell>
		<!--  y2AxisTitle chart attribute  -->
                    <cell type="text" data-format="text" alignment="left" chart-attr-name="y2AxisTitle">Y2 Axis Title</cell>
		<!-- hover series label attribute  -->
                    <cell type="text" data-format="text" alignment="left" chart-attr-name="hoverSeriesLabel">Test Series</cell>
		<!-- hover value label attribute  -->
                    <cell type="text" data-format="text" alignment="left" chart-attr-name="hoverValueLabel">Test Value</cell>
		<!-- hover group label attribute  -->
                    <cell type="text" data-format="text" alignment="left" chart-attr-name="hoverGroupLabel">Test Group</cell>
		<!-- hover value Y2 label attribute  -->
                    <cell type="text" data-format="text" alignment="left" chart-attr-name="hoverValueY2Label">Test Value Y2</cell>
		<!--  dualY chart attribute  -->
                    <cell type="chart_text" data-format="text" alignment="left" chart-attr-name="dualY">off</cell>
		<!-- stackValue chart attribute  -->
                    <cell type="chart_text" data-format="text" alignment="left" chart-attr-name="stackValue">off</cell>
		<!-- extra cell to match count in table-body -->
		<cell type="chart_text" data-format="text" alignment="left"></cell>
		<cell type="chart_text" data-format="text" alignment="left"></cell>					
        	  </band>

          </bands>
     </frame>
      	
     <layout type="columner">
           <component frame-name="comboFrame" column="1" visual-type="ojCombo" visual-style="oj-sm-12" visual-title=""/>
     </layout>

</report>

Parent topic: Visualizations