7 Replies Latest reply on Nov 3, 2010 10:34 PM by BhaskerChari

    Problem with LineChart

    BhaskerChari Level 4

      Hi Friends,

       

      Today while working in a project I encountered a unusual problem with LineCharts. Here I am having a requirement where I want to show multiple values on y-axis for a single point on x-axis.

       

      However I can do this but I dont want LineChart to show the same point on x-axis multiple times again for different values on y-axis. Hope my question is clear.

      If not check the sample application below by running the code.

       

      If you can see in my code below I am having Month field in my DataProvider in which I am having Jan and Mar months appearing twice but with different values. Now when I run this application you will see that Jan and Feb appear twice on the x-axis which I don't want and which is as opposed to what we manually draw graph. Flex treats each record as a individual row or point and plots all the values irrespective of the duplicates.

       

      Has anyone come accross this scenario and have a slotion for this. Any help or solution is highly appreciable.

       

      <?xml version="1.0"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
          <mx:Script>
              <![CDATA[
              import mx.collections.ArrayCollection;

              [Bindable]
              private var expensesAC:ArrayCollection = new ArrayCollection( [
                  { Month: "Jan", Profit: 2000, Expenses: 1500, Amount: 450 },
                  { Month: "Jan", Profit: 3000, Expenses: 2500, Amount: 250 },
                  { Month: "Feb", Profit: 1000, Expenses: 200, Amount: 600 },
                  { Month: "Mar", Profit: 1500, Expenses: 500, Amount: 300 },
                  { Month: "Mar", Profit: 3500, Expenses: 400, Amount: 700 },
                  { Month: "Apr", Profit: 1800, Expenses: 1200, Amount: 900 },
                  { Month: "May", Profit: 2400, Expenses: 575, Amount: 500 } ]);
              ]]>
          </mx:Script>

          <!-- Define custom colors for use as fills in the AreaChart control. -->
          <mx:SolidColor id="sc1" color="blue" alpha=".3"/>
          <mx:SolidColor id="sc2" color="red" alpha=".3"/>
          <mx:SolidColor id="sc3" color="green" alpha=".3"/>

          <!-- Define custom Strokes. -->
          <mx:Stroke id = "s1" color="blue" weight="2"/>
          <mx:Stroke id = "s2" color="red" weight="2"/>
          <mx:Stroke id = "s3" color="green" weight="2"/>

          <mx:Panel height="100%" width="100%" layout="horizontal">

              <mx:LineChart id="linechart" height="100%" width="100%"
                  paddingLeft="5" paddingRight="5"
                  showDataTips="true" dataProvider="{expensesAC}">
                     
                  <mx:horizontalAxis>
                      <mx:CategoryAxis categoryField="Month"/>
                  </mx:horizontalAxis>

                  <mx:series>
                      <mx:LineSeries yField="Profit" form="curve" displayName="Profit" lineStroke="{s1}"/>
                      <mx:LineSeries yField="Expenses" form="curve" displayName="Expenses" lineStroke="{s2}"/>
                      <mx:LineSeries yField="Amount" form="curve" displayName="Amount" lineStroke="{s3}"/>
                  </mx:series>
              </mx:LineChart>

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

          </mx:Panel>
      </mx:Application>

       

       

      Thanks for your patience,

      Bhasker

        • 1. Re: Problem with LineChart
          BhaskerChari Level 4

          Hi,

           

          Does anyone has ever encountered this problem..??

           

          Any insight into this is greatly appreciable.

           

           

          Thanks,

          Bhasker

          • 2. Re: Problem with LineChart
            Gaurav J Adobe Employee

            How do you want it to show up?

             

            Are you sure that you need to use line chart, sounds like you are looking for candlestick chart: http://livedocs.adobe.com/flex/3/html/help.html?content=charts_types_05.html

             

            Also there are some good chart examples at http://demo.quietlyscheming.com/ChartSampler/app.html

             

            Thanks,

            Gaurav Jain

            Flex SDK Team

            http://www.gauravj.com/blog

            1 person found this helpful
            • 3. Re: Problem with LineChart
              BhaskerChari Level 4

              Hi Gaurav J,

               

              Thankyou very much for your reply. I am using Flex3 and I need to use LineChart only in my project.

               

              Actually the main problem here is I dont want x-axis values to be shown multiple times. If you would have seen my sample application you can see Months Jan and Mar coming two times each on x-axis.

               

              I digging further found that I need to also specify the xField property on the LineSeries so that the graph is coming correctly but it still show the multiple values on x-axis.

               

              But now If I give numeric field as x-axis field then graph is coming correctly and also I cannot see any duplicate values on x-axis. So for only numeric values on x-axis the graph is coming out well without any duplicate values on x-axis.

               

               

              <mx:series>
                   <mx:LineSeries yField="Profit" xField="Month" form="curve" displayName="Profit" lineStroke="{s1}"/>
                   <mx:LineSeries yField="Expenses" xField="Month" form="curve" displayName="Expenses" lineStroke="{s2}"/>
                   <mx:LineSeries yField="Amount" xField="Month" form="curve" displayName="Amount" lineStroke="{s3}"/>
              </mx:series>

               

               

              So this is the DataProvider with numeric values on x-axis....this is working fine...

               

              private var expensesAC:ArrayCollection = new ArrayCollection( [
                          { Month: 1, Profit: 2000, Expenses: 1500, Amount: 450 },
                          { Month: 2, Profit: 3000, Expenses: 2500, Amount: 250 },
                          { Month: 3, Profit: 1000, Expenses: 200, Amount: 600 },
                          { Month: 3, Profit: 1500, Expenses: 500, Amount: 300 },
                          { Month: 3, Profit: 3500, Expenses: 400, Amount: 700 },
                          { Month: 4, Profit: 1800, Expenses: 1200, Amount: 900 },
                          { Month: 5, Profit: 2400, Expenses: 575, Amount: 500 } ]);

               

               

               

              Thanks,

              Bhasker

              • 4. Re: Problem with LineChart
                BhaskerChari Level 4

                HI ,

                 

                Anyone has got any soultion to this problem...? I am stuck out badly at this...

                 

                May be anyone from the Adobe Community.

                 

                Thanks,

                Bhasker

                • 5. Re: Problem with LineChart
                  BhaskerChari Level 4

                  Hi All,

                   

                  I resolved my problem myself.

                   

                  Thanks,

                  Bhasker

                  • 6. Re: Problem with LineChart
                    Devtron Level 3

                    ^ What did you to do resolve it? Please share

                    • 7. Re: Problem with LineChart
                      BhaskerChari Level 4

                      @Devtron,

                       

                      I tried to use DateTimeAxis instead of CategoryAxis. Also I changed my xField to data in the format of mm/dd/yyyy.

                       

                      Thanks,

                      Bhasker

                       

                      Message was edited by: BhaskerChari