4 Replies Latest reply on Apr 22, 2009 5:34 AM by RossRitchey

    Flex charting on PlotChart

    RossRitchey Level 4

      I am just starting out with charting in Flex, so bear with me.

       

      I have 4 points that I want to plot on a chart, connected by lines (essentially drawing a rectangle).  I want an x/y axis that displays from -32 through 32 with tick-marks every 4 units in both directions (so from -32,-32 through 32,32)

       

      This may not even be suited for a PlotChart, but it seemed to make the most sense to me.

       

      My questions are:

       

      1. How do I set a min/max range for the axes of the chart?  Right now it automatically sets this based on the plotted points, but I want it constant.

      2. How do I get lines connecting my 4 points?

       

      The code, so far is:

       

      <mx:Script><![CDATA[

           import mx.collections.ArrayCollection;

       

           [Bindable]

           public var savi:ArrayCollection = new ArrayCollection([

              {Section:"Style 1", X:22, Y:14},

              {Section:"Style 2", X:22, Y:-23},

              {Section:"Style 3", X:-21, Y:-23},

              {Section:"Style 4", X:-21, Y:14}

           ]);

        ]]></mx:Script>

        <mx:Panel title="Plot Chart">

           <mx:PlotChart id="myChart" dataProvider="{savi}" showDataTips="true">

              <mx:series>

                 <mx:PlotSeries

                      xField="X"

                      yField="Y"

                 />

              </mx:series>

             

           </mx:PlotChart>

           <mx:Legend dataProvider="{myChart}" />

        </mx:Panel>

        • 1. Re: Flex charting on PlotChart
          _Natasha_ Level 4

          Hi Ross,

           

          1. For set axis properties you should set axis manually. (Example from docs)

          <mx:HLOCChart id="hlocchart">
                      <mx:verticalAxis>
                          <mx:LinearAxis id="vaxis" baseAtZero="false" title="Price" minimum="-40" maximum="40"/>
                      </mx:verticalAxis>
          
                      <mx:horizontalAxis>
                          <mx:CategoryAxis id="haxis" categoryField="Date" title="Date"/>
                      </mx:horizontalAxis>
          
                      <mx:horizontalAxisRenderers>
                          <mx:AxisRenderer axis="{haxis}" canDropLabels="true"/>
                      </mx:horizontalAxisRenderers>
          
                      <mx:series>
                          <mx:HLOCSeries />
                      </mx:series>
                  </mx:HLOCChart>

          2. You should use LineSeries instead of PlotSeries to get lines between points. You can also use LineChart instad of PlotChart if you can use automatic color set for series, but if you set the color manually it doesn't metter. To correct renderring lines see sortOnXField property for LineSeries.

          1 person found this helpful
          • 2. Re: Flex charting on PlotChart
            RossRitchey Level 4

            AWESOME.  I knew there had to be a way to set a minimum and maximum range on the axes.

             

            And the LineSeries almost completely gets me there, with one new problem.

             

            Is there a way to control which points are connected to which, with the line series?  For some reason, the second point connects to the fourth, which, when I set it up the way I had, causes a zig-zag effect.  When I switch points 3 and 4, I get closer, a U shape.  Now I need to get a line connecting the top 2 points.  I thought I could add another point for the top-right, but, no matter what order I place the points, it creates a diagonal.

             

            Code:

             

            <mx:Script><![CDATA[

                 import mx.collections.ArrayCollection;

             

                 [Bindable]

                 public var savi:ArrayCollection = new ArrayCollection([

                    {Section:"Style 1", X:22, Y:14},

                    {Section:"Style 2", X:22, Y:-23},

                    {Section:"Style 4", X:-21, Y:14},

                    {Section:"Style 3", X:-21, Y:-23}

                 ]);

              ]]></mx:Script>

              <mx:Panel title="Plot Chart">

                 <mx:PlotChart id="myChart" dataProvider="{savi}" showDataTips="true">

                 <mx:verticalAxis>

                        <mx:LinearAxis id="vaxis" baseAtZero="false" title="X" minimum="-40" maximum="40" interval="4"/>

                    </mx:verticalAxis>

             

                    <mx:horizontalAxis>

                        <mx:LinearAxis id="haxis" baseAtZero="false" title="Y" minimum="-40" maximum="40" interval="4"/>

                    </mx:horizontalAxis>

                   

                    <mx:series>

                       <mx:LineSeries

                            xField="X"

                            yField="Y"

                       />

                    </mx:series>

                   

                 </mx:PlotChart>

                 <mx:Legend dataProvider="{myChart}" />

              </mx:Panel>

            • 3. Re: Flex charting on PlotChart
              _Natasha_ Level 4

              Hi Ross,

               

              I've already writeen about it.

              "2. You should use LineSeries instead of PlotSeries to get lines between points. You can also use LineChart instad of PlotChart if you can use automatic color set for series, but if you set the color manually it doesn't metter. To correct renderring lines see sortOnXField property for LineSeries."

               

              If you don't set this property to false it will sort your data by X field.

              • 4. Re: Flex charting on PlotChart
                RossRitchey Level 4

                Excellent.  Perhaps I should have read your post more thoroughly before.

                 

                Thanks for all the help!