Flex Formatting chart grid lines with CSS

Flex Formatting chart grid lines with CSS

Postby haretu » Wed Apr 13, 2011 9:29 am

Adobe flex can set the style of grid lines by applying a CSS style to the GridLines object. The following example applies the myStyle style to the grid lines:
Code: Select all
<?xml version="1.0"?>
<!-- charts/GridLinesFormatCSS.mxml -->
<s:Application
    xmlns:fx="http://ns.adobe.com/mxml/2009"
    xmlns:mx="library://ns.adobe.com/flex/mx"
    xmlns:s="library://ns.adobe.com/flex/spark"
    creationComplete="srv.send()"
    height="600">

    <fx:Declarations>
        <!-- View source of the following page to see the structure of the data that Flex uses in this example. -->
        <mx:HTTPService id="srv" url="http://aspexamples.adobe.com/chart_examples/expenses-xml.aspx"/>
        <!-- To see data in an HTML table, go to http://aspexamples.adobe.com/chart_examples/expenses.aspx --> 
       
        <!-- Background element array. -->
        <fx:Array id="bge">
            <mx:GridLines styleName="myStyle">
                <mx:horizontalStroke>
                    <mx:SolidColorStroke weight="3"/>
                </mx:horizontalStroke>
                <mx:verticalStroke>
                    <mx:SolidColorStroke weight="3"/>
                </mx:verticalStroke>
            </mx:GridLines>
        </fx:Array>
    </fx:Declarations>

  <fx:Style>
     .myStyle {
        gridDirection:"both";
        horizontalShowOrigin:true;
        horizontalTickAligned:false;
        horizontalChangeCount:1;
        verticalShowOrigin:false;
        verticalTickAligned:true;
        verticalChangeCount:1;
        horizontalFill:#990033;
        horizontalAlternateFill:#00CCFF;     
     } 
  </fx:Style>

    <s:layout>
        <s:VerticalLayout/>
    </s:layout>

  <s:Panel title="Column Chart">
        <s:layout>
            <s:VerticalLayout/>
        </s:layout>
     <mx:ColumnChart id="myChart"
        showDataTips="true"
        dataProvider="{srv.lastResult.data.result}"
        backgroundElements="{bge}">
        <mx:horizontalAxis>
           <mx:CategoryAxis categoryField="month"/>
        </mx:horizontalAxis>
        <mx:series>
           <mx:ColumnSeries
                xField="month"
                yField="profit"
                displayName="Profit"/>
           <mx:ColumnSeries
                xField="month"
                yField="expenses"
                displayName="Expenses"/>
        </mx:series>
     </mx:ColumnChart>
     <mx:Legend dataProvider="{myChart}"/>
  </s:Panel>
</s:Application>
Attachments
Screen shot 2011-04-13 at 9.27.52 AM.jpg
Screen shot 2011-04-13 at 9.27.52 AM.jpg (51.99 KiB) Viewed 1076 times
haretu
 
Posts: 132
Joined: Sat Jan 08, 2011 9:56 pm

Return to Adobe FLEX Flash

Who is online

Users browsing this forum: No registered users and 1 guest

cron