How to: Reference: |
The code used to style IBI Chart components are based on Flex Style Codes but are implemented slightly differently. Flex Chart styling options are exposed as XML elements and attributes, but IBI Chart components read styles specified as CSS in CDATA sections inside specialized chart style tags.
<ibi:ibiColumnChart x="10" y="10" width="350" height="240" ibiGroupBy="ST" ibiParent="detail" ibiXField="ST" ibiYField="Sum.DOLLARS,Sum.UNITS,Sum.COGS" showDataTips="true"/>
must be changed to:
<ibi:ibiColumnChart x="10" y="10" width="350" height="240"
ibiGroupBy="ST" ibiParent="detail" ibiXField="ST"
ibiYField="Sum.DOLLARS,Sum.UNITS,Sum.COGS" showDataTips="true">
</ibi:ibiColumnChart>
<ibi:ibiColumnStyle> <![CDATA[ { fillAlphas: 1, 1, 1, 1,1; fillRatios: 0,.2,.4,.75,1; fillColors: #B22C02, #E3AC9A, #B22C02, #FD8E6B,#B22C02; fillAngle: 0; } ]]> </ibi:ibiColumnStyle>
<ibi:ibiColumnStyle> <![CDATA[ { fillAlphas: 1, 1, 1, 1,1; fillRatios: 0,.2,.4,.75,1; fillColors: #1eb202, #9bdf8e, #2db713, #80fb69,#41cb26; fillAngle: 0; } ]]> </ibi:ibiColumnStyle>
<ibi:ibiColumnStyle> <![CDATA[ { fillAlphas: 1, 1, 1, 1,1; fillRatios: 0,.2,.4,.75,1; fillColors: #2657b5, #87a2d5, #1247ae, #6494ef,#1b4694; fillAngle: 0; } ]]> </ibi:ibiColumnStyle>
Note: For an ibiColumnChart, the fillAngle to produce the Gradient is 0. For an ibiBarChart, the fillAngle would be 90.
Gradient Color |
fillColors Value |
---|---|
Cyan Gradient |
#00b4b1, #7adbd9, #10bab8, #66fefc,#23cecb; |
Fuchsia Gradient |
#b400a0, #e08cd7, #ba10a7, #fe66ed,#ce23bc; |
Yellow Gradient |
#b4ae00, #e0dd8c, #bab510, #fef966,#cec823; |
Royal Blue Gradient |
#2657b5, #87a2d5, #1247ae, #6494ef,#1b4694; |
Robust Green Gradient |
#1eb202, #9bdf8e, #2db713, #80fb69,#41cb26; |
Orange Gradient |
#b46400, #e0af74, #c47006, #ffba65,#d88219; |
White Gradient |
#aeaeae, #ededed, #dedede, #ebebeb,#afafaf; |
Black Gradient |
#232323, #767676, #2b2b2b, #7e7e7e,#242424; |
Purple Gradient |
#56009d, #a277c6, #6007a8, #9a46dc,#581291; |
Red Gradient |
#B22C02, #E3AC9A, #B22C02, #FD8E6B,#B22C02; |
<ibi:ibiPieChart x="10" y="10" width="350" height="240" ibiGroupBy="PRODUCT" ibiParent="detail" ibiUseFiltered="true" ibiField="Sum.DOLLARS" ibiNameField="PRODUCT" showDataTips="true"/>
must be changed to:
<ibi:ibiPieChart x="10" y="10" width="350" height="240" ibiGroupBy="PRODUCT" ibiParent="detail"
ibiUseFiltered="true" ibiField="Sum.DOLLARS" ibiNameField="PRODUCT" showDataTips="true">
</ibi:ibiPieChart>
<ibi:ibiPieStyle> <!-- counterclockwise:indigo,yellow,cyan,green,purple,red,light,orange,blue,fuscia,gray --> <![CDATA[ {[ fillType: Radial; fillColors: #191970,#8B8BE5,#191970,#8B8BE5,#191970; fillRatios: 0,.2,.4,.7,1; labelPosition: callout; ],[ fillType: Radial; fillColors: #b4ae00,#e0dd8c,#bab510,#fef966,#cec823; fillRatios: 0,.2,.4,.7,1; labelPosition: callout; ],[ fillType: Radial; fillColors: #00BFFF,#99E5FF,#00BFFF,#99E5FF,#00BFFF; fillRatios: 0,.2,.4,.7,1; labelPosition: callout; ],[
fillType: Radial; fillColors: #426c2a,#80a170,#5f8554,#94c588,#325a2b; fillRatios: 0,.2,.4,.7,1; labelPosition: callout; ],[ fillType: Radial; fillColors: #483D8B,#B2ABDA,#483D8B,#B2ABDA,#483D8B; fillRatios: 0,.2,.4,.7,1; labelPosition: callout; ],[ fillType: Radial; fillColors: #B22C02,#FD8E6B,#B22C02,#E3AC9A,#B22C02; fillRatios: 0,.2,.4,.7,1; labelPosition: callout; ],[ fillType: Radial; fillColors: #8470FF,#C7BEFF,#8470FF,#C7BEFF,#8470FF; fillRatios: 0,.2,.4,.7,1; labelPosition: callout; ],[
fillType: Radial; fillColors: #b46400,#e0af74,#c47006,#ffba65,#d88219; fillRatios: 0,.2,.4,.7,1; labelPosition: callout; ],[ fillType: Radial; fillColors: #2657b5,#87a2d5,#1247ae,#6494ef,#1b4694; fillRatios: 0,.2,.4,.7,1; labelPosition: callout; ],[ fillType: Radial; fillColors: #b400a0,#e08cd7,#ba10a7,#fe66ed,#ce23bc; fillRatios: 0,.2,.4,.7,1; labelPosition: callout; ],[ fillType: Radial; fillColors: #35586C,#A6C3D3,#35586C,#A6C3D3,#35586C; fillRatios: 0,.2,.4,.7,1; labelPosition: callout; ]} ]]> </ibi:ibiPieStyle>
WebFOCUS |