Applying Styles to ibiColumnChart and ibiPieChart

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.


Top of page

x
Procedure: How to Add Linear Gradient Fills to the ibiColumnChart
  1. With SalesDashboard.mxml in plain text view, locate the <ibi:ibiColumnChart> tag, as shown in the following image.

    ns1:ibiColumnChart tag in plain text view

  2. The <ibi:ibiColumnChart> tag in step 1 is an empty element. In order to add the specialized chart style tag an end tag must be added. The code must be altered as follows:
    <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>

  3. Place your cursor in between the opening and closing <ibi:ibiColumnChart> tags, as shown in the following image.

    ns1:ibiColumnChart tag in plain text view

  4. Add the following code to that section.
    <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.

  5. Click the Run Run button button. If prompted, select OK to save and run the project.


Top of page

x
Reference: Sample Linear Gradient Fill Color Code

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;



x
Procedure: How to Add Radial Gradient Fills to the ibiPieChart
  1. With SalesDashboard.mxml in plain text view, locate the <ibi:ibiPieChart> tag, as shown in the following image.

    ns1:ibiPieChart tag in plain text view

  2. The <ibi:ibiPieChart> tag in step 1 is an empty element. To add the specialized chart style tag an end tag must be added. The code must be altered as follows:
    <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>

  3. Place your cursor in between the opening and closing <ibi:ibiPieChart> tags, as shown in the following image.

    ns1:ibiPieChart tag in plain text view

  4. Add the following code to that section.
    <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>
  5. Click the Run Run button button. If prompted, select OK to save and run the project.

    Flex Builder output


WebFOCUS