15 Replies Latest reply on Nov 25, 2007 8:19 AM by mrs_kariem

    How to create chart in opposite side?

    mrs_kariem
      Hello

      Excuse me I want to know , if I want to make a Bar chart , but the x-axis must be in negative direction like that

      |
      |
      |
      ---------------------

      how can I do it? please reply as soon as possible
        • 1. Re: How to create chart in opposite side?
          atta707 Level 2
          In the figure you've given, I don't see what makes it x-axis in the negative direction.

          What happens when are the value you're plotting on x-axis are < 0?

          ATTA
          • 2. Re: How to create chart in opposite side?
            mrs_kariem Level 1
            Hello atta707

            please this figure I draw it correctly ,but when I posted it becomes wrong

            I am a bignner in xml and I have a task I must do it as fast as I can. The main point is to draw a chart in opposite direction and I can't do it. Look this is my code:

            <mx:BarChart id="candlestickchart1" height="100%" width="100%"
            paddingLeft="5" paddingRight="5"
            showDataTips="true" dataProvider="{companyAAC}">

            <mx:verticalAxis>
            <mx:CategoryAxis categoryField="Country"/>
            </mx:verticalAxis>

            <mx:series>
            <mx:BarSeries xField="Households" displayName="Households" yField="Country"/>
            <mx:BarSeries xField="Labour_Camps" displayName="Labour Camps" yField="Country"/>
            <mx:BarSeries xField="Public_Housings" displayName="Public Housings" yField="Country"/>
            <mx:BarSeries xField="Hotels" displayName="Hotels" yField="Country"/>
            </mx:series>
            </mx:BarChart>

            How I can represent the x-axis to be in a negative direction, where and who??

            Pleaseeeeeeeeeeeeeee help me may allah help you

            Thanks
            • 3. Re: How to create chart in opposite side?
              mrs_kariem Level 1
              I am waiting for answering my question
              • 4. Re: How to create chart in opposite side?
                atta707 Level 2
                mrs_kariem,

                Let's see if I understand your problem. You've a bar chart which looks like:

                |
                |
                |
                |_______________

                and you're trying to show it as:
                |
                |
                |
                _______________|

                That's is to say, you want to move your y-axis line from left to right.

                is this correct?

                if so, could you please throw some light on the reasons why would you want it this way? Or what's the problem that you're trying to solve?

                ATTA

                • 5. Re: How to create chart in opposite side?
                  atta707 Level 2
                  Bad chart!

                  |
                  |
                  |
                  |______________


                  vs.
                  ______________|
                  ______________|
                  ______________|
                  ______________|
                  ______________|
                  • 6. Re: How to create chart in opposite side?
                    mrs_kariem Level 1
                    Hi Atta,

                    I find the solution for that problem, to put placement="right" in verticalAxisRensder, the vertical axis goes to right hand side of the chart, but the chart lines remain the same and the horizontal axis remain the same. So I rotate the chart in BarChart Series put rotation="180" x="170" y="219"
                    then it cames ok, but it doen't look like a pyramid, I have to rotate the x-axis to be in opposite direction. if the first no. in the chart is 312 and the last one is 5443 , I want to swap it to start with 5443 and end with 312

                    According to your question about why I want it like that?
                    I applied in a job and this is a task that I will send it to them to apply me and they wanted like that. Because this is my first time using XML ,so sorry if that question is very easy question and I have to learn it because I am programmer

                    Thank you Mr. Atta and If you have a solution for x-axis told me please

                    Note: the placement work with x-axis to be up or down the graph only, and rotation cannot be applied
                    • 7. Re: How to create chart in opposite side?
                      atta707 Level 2
                      so problem solved! did you get the job, BTW? :)

                      ATTA
                      • 8. Re: How to create chart in opposite side?
                        mrs_kariem Level 1
                        After Eid I will Start tge job inshallah. But you didn't give me the solution for the x-axis (angery face<-- kidding). I sent the task to them like that ,but If you can swap the x-axis and give me the solution, I will try it and send it to them.
                        Thank you for asking me about the job (:
                        May allah protect you
                        • 9. Re: How to create chart in opposite side?
                          mrs_kariem Level 1
                          Mr Atta, I have a big problem (I will cry)

                          when I do placement for the y-axis and it goes to the right side of the chart, the x-axis is sorted in the opposite side, I have to resort the x-axis according to the placement of the y-axis. Are you understanding the problem???

                          Help Me pleaseeeeeeeeeeeeeeeeeeeeee I need your help urgent
                          • 10. Re: How to create chart in opposite side?
                            peewee64
                            Thougth about leaving the x-axis, where it is, and placing the the y-axis at the top, then rotate the whole char instead of individual elements, but the labels will get lost that time, but rotating them, they would be not realy readable anyway, so Because you have to add your own labels, the solution is not really good one, I think.

                            Perhaps it is better to take your solution and switch the labels using a labelfunction. Should not be a real problem if you know the label, the range and the intervall.
                            • 11. Re: How to create chart in opposite side?
                              mrs_kariem Level 1
                              Thanks Mr. peewee64

                              But I don't know how I can use the labelFunction what is its parameter, and also the range is taking automatically from the array(not from its parameter ,it generates automatically when I didn't put horizontalAxis tag)

                              Please help me, I didn't find the solution.
                              • 12. Re: How to create chart in opposite side?
                                atta707 Level 2
                                Okay. Copy and paste the following code in a new app and just run it:

                                <?xml version="1.0"?>
                                <!-- charts/AxisPlacementExample.mxml -->
                                <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml">
                                <mx:Script><![CDATA[
                                import mx.collections.ArrayCollection;
                                [Bindable]
                                public var expenses:ArrayCollection = new ArrayCollection([
                                {Month:"Jan", Profit:2000, Expenses:1500},
                                {Month:"Feb", Profit:1000, Expenses:200},
                                {Month:"Mar", Profit:1500, Expenses:500}
                                ]);

                                [Bindable]
                                private var horChoices:Array = ["bottom","top"];

                                [Bindable]
                                private var vertChoices:Array = ["left","right"];

                                ]]></mx:Script>
                                <mx:Panel title="Variable Axis Placement">
                                <mx:ColumnChart id="myChart" dataProvider="{expenses}">
                                <mx:horizontalAxisRenderers>
                                <mx:AxisRenderer id="horAxisRend"
                                axis="{axis1}"
                                placement="{myHorBox.selectedItem}"
                                />
                                </mx:horizontalAxisRenderers>

                                <mx:verticalAxisRenderers>
                                <mx:AxisRenderer id="vertAxisRend"
                                axis="{axis2}"
                                placement="{myVertBox.selectedItem}"
                                />
                                </mx:verticalAxisRenderers>

                                <mx:horizontalAxis>
                                <mx:CategoryAxis id="axis1"
                                dataProvider="{expenses}"
                                categoryField="Month"
                                />
                                </mx:horizontalAxis>

                                <mx:verticalAxis>
                                <mx:LinearAxis id="axis2"/>
                                </mx:verticalAxis>

                                <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}"/>

                                <mx:Form>
                                <mx:FormItem label="Horizontal Axis Location:">
                                <mx:ComboBox id="myHorBox" dataProvider="{horChoices}"/>
                                </mx:FormItem>
                                <mx:FormItem label="Vertical Axis Location:">
                                <mx:ComboBox id="myVertBox" dataProvider="{vertChoices}"/>
                                </mx:FormItem>
                                </mx:Form>

                                </mx:Panel>
                                </mx:Application>
                                • 13. Re: How to create chart in opposite side?
                                  mrs_kariem Level 1
                                  Hello atta, Thank you atta for helping me, but this didn't solve the problem. I will explain on your example, I want the x-axis to start from right to left in this order (Jan - Feb - March) Not (March -Feb - jan)., So I want to reverse the order of the x-axis from descending to ascending.
                                  Please Reply Me as soon as possible.
                                  Please I want the solution urgent urgent urgent( Really I will cry)
                                  I am too sorry for annoyzing you.. Thank you
                                  • 14. Re: How to create chart in opposite side?
                                    mrs_kariem Level 1
                                    I make a solution ,but the problem with the tool tip. I know that I can make a tool tip manually ,but I can't do that in Charts. I want to take the xField and yField values from BarSeries and put it in a tool tip.

                                    How I can do that???

                                    please Help me as fast as you can
                                    • 15. How to create chart in opposite side?
                                      mrs_kariem Level 1
                                      I found the solution. I know it is not perfect solution but it works.
                                      I will put it here to avoid you spending much more time thinking and searching, Let me start:

                                      First of all I shift the y-axis to be in the right side of the chart by using placement in the vertical axis renderer to be as follows:

                                      <mx:verticalAxisRenderer>
                                      <mx:AxisRenderer axis="{v1}" placement = "right" showLabels="false" />
                                      </mx:verticalAxisRenderer>

                                      When you do that you will see that the chart remaining in the left side (I mean series), so how to change it? just reorder the x-axis in a descending order (I faild to do that, coz that I make another solution). I use negative values of the x-axis by set the following:

                                      <mx:horizontalAxis>
                                      <mx:LinearAxis id="v2" displayName="Male" minimum="-80000" maximum="0" baseAtZero="true" labelFunction="linearAxis_labelFunc"/>
                                      </mx:horizontalAxis>

                                      So I used minimum as a negative value and maximum is zero. Then I made a function for those label (to appear positive values as I want) and this function I call it using labelFunction as you can see above in the horizontal axis. The body of that function is:

                                      import mx.charts.chartClasses.IAxis;
                                      private function linearAxis_labelFunc(item:Object, prevValue:Object, axis:IAxis):String {
                                      var x:Number=Number(item);
                                      if(x<0)
                                      x=x*-1;
                                      return x.toString();

                                      }

                                      as you know, you must put it in the CDATA part. This function checks if the value is negative, it will multiply it by -1 to be positive and return it.

                                      It will now be a correct chart in opposite direction, just remaining problem which is a DataTip, it gives the negative value....

                                      I get a solution for that, create a new dataTip by using dataTipFunction="dataTip_bar" and showDataTips to true in your Chart Tag for example:

                                      <mx:BarChart dataTipFunction="dataTip_bar" showDataTips="true">

                                      and this is calling a function that create a dataTip. The body of this function is:

                                      import mx.charts.series.items.BarSeriesItem;
                                      import mx.charts.HitData;
                                      private function dataTip_bar(item:HitData):String {
                                      var pSI:BarSeriesItem = item.chartItem as BarSeriesItem;
                                      return "<b>" + "Population: <br><I>Age:"+pSI.item.Age+"<br>Male:"+(Number(pSI.item.Male)*-1).toString()+ "</b><br />";
                                      }

                                      As you can See I put pSI.item.Age and (Number(pSI.item.Male)*-1). The Age is my y-axis and the Male is the negative values I multiply it with -1 to make it positive.

                                      I hope that will help you. Thank you for trying to help me