Loading ...
Sorry, an error occurred while loading the content.
 

Re: Charting Questions

Expand Messages
  • Tim Hoff
    To simulate a border around the rectangular region inside a chart, you can use axisRenderers. This example draws a dark green border inside the axis labels.
    Message 1 of 5 , Dec 1, 2006

      To simulate a border around the rectangular region inside a chart, you can use axisRenderers.  This example draws a dark green border inside the axis labels.

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
       layout="vertical" horizontalAlign="center" verticalAlign="middle"
       backgroundColor="#FFFFFF">

       <mx:Script>
        <![CDATA[

         import mx.collections.ArrayCollection;
         
         [Bindable]
         public var axisColor : uint = 0x008000;
         
         [Bindable]
         public var dataProvider : ArrayCollection = new ArrayCollection([
          {category: "A", value: 30},
          {category: "B", value: 50},
          {category: "C", value: 78},
          {category: "D", value: 46}
         ]);
         
        ]]>
       </mx:Script>
       
       <mx:ColumnChart dataProvider="{ dataProvider }">
       
        <mx:series>
         <mx:ColumnSeries yField="value" maxColumnWidth="14"/>
        </mx:series>
        
        <mx:horizontalAxis>
         <mx:CategoryAxis categoryField="category"/>
        </mx:horizontalAxis>
          
        <mx:horizontalAxisRenderer>
           <mx:AxisRenderer tickPlacement="none">
            <mx:axisStroke>
             <mx:Stroke color="{ axisColor }" weight="2" caps="none"/>
            </mx:axisStroke>
           </mx:AxisRenderer>
        </mx:horizontalAxisRenderer>
        
        <mx:secondHorizontalAxisRenderer>
         <mx:AxisRenderer showLabels="false" tickPlacement="none">
            <mx:axisStroke>
             <mx:Stroke color="{ axisColor }" weight="2" caps="none"/>
            </mx:axisStroke>
           </mx:AxisRenderer>
        </mx:secondHorizontalAxisRenderer>
          
        <mx:verticalAxisRenderer>
         <mx:AxisRenderer tickPlacement="none" minorTickPlacement="none">
            <mx:axisStroke>
             <mx:Stroke color="{ axisColor }" weight="2" caps="none"/>
            </mx:axisStroke>
           </mx:AxisRenderer>
        </mx:verticalAxisRenderer>
        
        <mx:secondVerticalAxisRenderer>
         <mx:AxisRenderer showLabels="false" tickPlacement="none" minorTickPlacement="none">
            <mx:axisStroke>
             <mx:Stroke color="{ axisColor }" weight="2" caps="none"/>
            </mx:axisStroke>
           </mx:AxisRenderer>
        </mx:secondVerticalAxisRenderer>
          
        <mx:backgroundElements>
            <mx:GridLines alpha="0"/>
        </mx:backgroundElements>
                   
       </mx:ColumnChart>
       
      </mx:Application>

      -TH
      __________________________________

      Tim Hoff
      Cynergy Systems, Inc.
      http://www.cynergysystems.com
      Office: 866-CYNERGY 


      --- In flexcoders@yahoogroups.com, "Ely Greenfield" <egreenfi@...> wrote:
      >
      >
      >
      >
      > To draw into the data area of the chart, you'll need to wite a custom
      > chart element. See my numerous posts on the subject to this list, or
      > some of the examples at http://www.quietlyscheming.com/
      >
      >
      > For the region of the chart...By default, a chart takes the space given
      > to it by its parent, subtracts out the space needed for the optimal
      > layout and size for the axis labels, and uses the remaining space for
      > the data area. If you're seeing fluctuations in the space used by the
      > data, it's most likely due to fluctuations in the range of your
      > data...i.e., if it starts at 0-80, then goes to 0-120, it's going to
      > take a little more space for the extra digit on the labels.
      >
      > The area used by the axes is called the 'gutter' in chart terminology.
      > While the chart calculates these on its own by default, you can assign
      > explicit values for some or all of the chart gutters. When you do that,
      > the chart will do its best to fit the labels in the gutter sizes
      > specified. Specify all four gutter size, and you've effectively locked
      > in a size for the data area (given a fixed size for the whole chart).
      >
      >
      > So checkout the gutterLeft, gutterTop, etc. styles.
      >
      >
      > Ely.
      >
      >
      > ________________________________
      >
      > From: flexcoders@yahoogroups.com [mailto:flexcoders@yahoogroups.com] On
      > Behalf Of polonycjunk
      > Sent: Thursday, November 30, 2006 7:13 AM
      > To: flexcoders@yahoogroups.com
      > Subject: [flexcoders] Charting Questions
      >
      >
      >
      > Hi,
      >
      > I would like to add borders to the inside rectangular region of the
      > charts. Would anyone know how to accomplish this task? I am able to
      > modify the gridLines inside the chart, modify the thickness of the
      > horizontal and vertical axis, but can't seem to find a way to put
      > borders along the 4 axes.
      >
      > Also, how can you specify a fixed length of the rectangular region in
      > the chart? It looks the size of this area fluctuates a tiny bit when
      > working with real-time charts.
      >
      > Thanks for any input provided.
      >
    • polonycjunk
      Ely and Tim, Thanks for all the help!
      Message 2 of 5 , Dec 1, 2006
        Ely and Tim,

        Thanks for all the help!



        --- In flexcoders@yahoogroups.com, "Tim Hoff" <TimHoff@...> wrote:
        >
        >
        > To simulate a border around the rectangular region inside a chart, you
        > can use axisRenderers. This example draws a dark green border inside
        > the axis labels.
        >
        > <?xml version="1.0" encoding="utf-8"?>
        > <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml
        > <http://www.adobe.com/2006/mxml> "
        > layout="vertical" horizontalAlign="center" verticalAlign="middle"
        > backgroundColor="#FFFFFF">
        >
        > <mx:Script>
        > <![CDATA[
        >
        > import mx.collections.ArrayCollection;
        >
        > [Bindable]
        > public var axisColor : uint = 0x008000;
        >
        > [Bindable]
        > public var dataProvider : ArrayCollection = new ArrayCollection([
        > {category: "A", value: 30},
        > {category: "B", value: 50},
        > {category: "C", value: 78},
        > {category: "D", value: 46}
        > ]);
        >
        > ]]>
        > </mx:Script>
        >
        > <mx:ColumnChart dataProvider="{ dataProvider }">
        >
        > <mx:series>
        > <mx:ColumnSeries yField="value" maxColumnWidth="14"/>
        > </mx:series>
        >
        > <mx:horizontalAxis>
        > <mx:CategoryAxis categoryField="category"/>
        > </mx:horizontalAxis>
        >
        > <mx:horizontalAxisRenderer>
        > <mx:AxisRenderer tickPlacement="none">
        > <mx:axisStroke>
        > <mx:Stroke color="{ axisColor }" weight="2" caps="none"/>
        > </mx:axisStroke>
        > </mx:AxisRenderer>
        > </mx:horizontalAxisRenderer>
        >
        > <mx:secondHorizontalAxisRenderer>
        > <mx:AxisRenderer showLabels="false" tickPlacement="none">
        > <mx:axisStroke>
        > <mx:Stroke color="{ axisColor }" weight="2" caps="none"/>
        > </mx:axisStroke>
        > </mx:AxisRenderer>
        > </mx:secondHorizontalAxisRenderer>
        >
        > <mx:verticalAxisRenderer>
        > <mx:AxisRenderer tickPlacement="none" minorTickPlacement="none">
        > <mx:axisStroke>
        > <mx:Stroke color="{ axisColor }" weight="2" caps="none"/>
        > </mx:axisStroke>
        > </mx:AxisRenderer>
        > </mx:verticalAxisRenderer>
        >
        > <mx:secondVerticalAxisRenderer>
        > <mx:AxisRenderer showLabels="false" tickPlacement="none"
        > minorTickPlacement="none">
        > <mx:axisStroke>
        > <mx:Stroke color="{ axisColor }" weight="2" caps="none"/>
        > </mx:axisStroke>
        > </mx:AxisRenderer>
        > </mx:secondVerticalAxisRenderer>
        >
        > <mx:backgroundElements>
        > <mx:GridLines alpha="0"/>
        > </mx:backgroundElements>
        >
        > </mx:ColumnChart>
        >
        > </mx:Application>
        >
        > -TH
        > __________________________________
        >
        > Tim Hoff
        > Cynergy Systems, Inc.
        > http://www.cynergysystems.com
        > Office <http://www.cynergysystems.comoffice/> : 866-CYNERGY
        >
        >
        > --- In flexcoders@yahoogroups.com, "Ely Greenfield" <egreenfi@>
        > wrote:
        > >
        > >
        > >
        > >
        > > To draw into the data area of the chart, you'll need to wite a custom
        > > chart element. See my numerous posts on the subject to this list, or
        > > some of the examples at http://www.quietlyscheming.com/
        > >
        > >
        > > For the region of the chart...By default, a chart takes the space
        > given
        > > to it by its parent, subtracts out the space needed for the optimal
        > > layout and size for the axis labels, and uses the remaining space for
        > > the data area. If you're seeing fluctuations in the space used by the
        > > data, it's most likely due to fluctuations in the range of your
        > > data...i.e., if it starts at 0-80, then goes to 0-120, it's going to
        > > take a little more space for the extra digit on the labels.
        > >
        > > The area used by the axes is called the 'gutter' in chart terminology.
        > > While the chart calculates these on its own by default, you can assign
        > > explicit values for some or all of the chart gutters. When you do
        > that,
        > > the chart will do its best to fit the labels in the gutter sizes
        > > specified. Specify all four gutter size, and you've effectively locked
        > > in a size for the data area (given a fixed size for the whole chart).
        > >
        > >
        > > So checkout the gutterLeft, gutterTop, etc. styles.
        > >
        > >
        > > Ely.
        > >
        > >
        > > ________________________________
        > >
        > > From: flexcoders@yahoogroups.com [mailto:flexcoders@yahoogroups.com]
        > On
        > > Behalf Of polonycjunk
        > > Sent: Thursday, November 30, 2006 7:13 AM
        > > To: flexcoders@yahoogroups.com
        > > Subject: [flexcoders] Charting Questions
        > >
        > >
        > >
        > > Hi,
        > >
        > > I would like to add borders to the inside rectangular region of the
        > > charts. Would anyone know how to accomplish this task? I am able to
        > > modify the gridLines inside the chart, modify the thickness of the
        > > horizontal and vertical axis, but can't seem to find a way to put
        > > borders along the 4 axes.
        > >
        > > Also, how can you specify a fixed length of the rectangular region in
        > > the chart? It looks the size of this area fluctuates a tiny bit when
        > > working with real-time charts.
        > >
        > > Thanks for any input provided.
        > >
        >
      Your message has been successfully submitted and would be delivered to recipients shortly.