6 Replies Latest reply on Nov 19, 2007 2:55 PM by M._Tonelli

    Bar Chart Issue

    msnelsonUK
      Hi,

      I'm new to Flex so I apologise if this answer might be simple...

      I am trying to display a 3D bar graph where:

      the x-axis is "country"
      the y-axis is "value"
      and for each country there are several bars showing the value for that year ("year" being the 3rd dimension if you like).

      In my function.as file (script file) I read in an XML file and collect this data into an ArrayCollection:

      [Bindable]
      chartingData3D = new ArrayCollection();

      void chartData()
      {
      chartingDataTmp = new ArrayCollection();

      loop number of countries
      {
      currentCountry = getCountryFromXML()
      loop number of years
      {
      currentYear = getCurrentYearFromXML()
      currentValue = getSingleValue()
      chartingDataTmp.addItem({code:currentCountry, value:currentValue, year:currentYear})
      }
      }
      chartingData3D = chartingDataTmp;
      }

      In my prototype.mxml file I chart this data (and for arguments sake lets say there is only 2 years of data):

      <mx:ColumnChart dataProvider="{chartingData3D}">
      <mx:series>
      <mx:ColumnSeries xField="code" yField="value" displayName="year" />
      <mx:ColumnSeries xField="code" yField="value" displayName="year" />
      </mx:series>
      </mx:ColumnChart>

      This currently doesn't work. For each country I get 2 bars of equal height (I think for each bar it plots both values).

      I've seen a bar graph demo that plots several bars per country. In this the array collection has ONE array per country and all the values associated with that country is listed in that one array. I have serveral arrays per country because I don't know how many years I will be plotting.

      I need my array to be dynamic as possible because the XML file will be dynamically created.

      Can anyone help me?

      Many thanks in advance!

      Janie

      P.S. Is there any way to display code in these posts with the spaces/tabs perservered?
        • 1. Re: Bar Chart Issue
          msnelsonUK Level 1
          Any suggestions please...

          Even a guide to some documentation would be appreciated. I do not have a lot of time to look myself because I have a new baby. I have looked but maybe I've missed something.

          Thanks!
          • 2. Re: Bar Chart Issue
            msnelsonUK Level 1
            Hi again,

            I've worked out that I can contain my data as a collection of array's in an array collection. So now my code becomes:

            [Bindable]
            chartingData3D = new ArrayCollection();

            void chartData()
            {
            chartingDataTmp = new ArrayCollection();
            yearValueCollection = new ArrayCollection();

            loop number of countries
            {
            currentCountry = getCountryFromXML()

            loop number of years
            {
            currentYear = getCurrentYearFromXML()
            currentValue = getSingleValue()
            yearValueCollection.addItem({value:currentValue, year:currentYear})
            }
            chartingDataTmp.addItem({code:currentCountry, yearValue:yearValueCollection})
            }
            chartingData3D = chartingDataTmp;
            }

            My question is now how do I access the value and year properties from chartingData3D from my .mxml? I have tried the following code but nothing is displayed in my bar chart:

            <mx:ColumnChart dataProvider="{chartingData3D}">
            <mx:series>
            <mx:ColumnSeries xField="code" yField="valueYear.value" displayName="valueYear.year" />
            <mx:ColumnSeries xField="code" yField="valueYear.value" displayName="valueYear.year" />
            </mx:series>
            </mx:ColumnChart>

            Also, I like to make my <mx:ColumnSeries/> of variable length. Can I do this with the <mx:Repeater/> tag?

            Again, any help, ideas, suggestions would be gratefully received.

            Janie
            • 3. Re: Bar Chart Issue
              davidmedifit Level 1
              Janie, would I be able to get a sampling of your XML? When you say "make your columnSeries of variable length" do you mean the number of items in the series, or the upper value of the series? What would the length variance depend on? Maybe when I see the XML it will make more sense.

              Cheers,

              David
              • 4. Re: Bar Chart Issue
                chris.huston.t10 Level 3
                Here is a sample I made. It currently has three countries with three years per country but you don't need to change anything for adding countries or years. I asumed that the number of years would be constant for all countries. You may need to alter it slightly to match your XML structure. I hope this helps and best wishes with your new baby.

                <?xml version="1.0" encoding="utf-8"?>
                <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init_chart()">
                <mx:Script>
                <![CDATA[
                import mx.charts.series.ColumnSeries;
                import mx.collections.ArrayCollection;

                [Bindable]
                private var countriesAC:ArrayCollection = new ArrayCollection();

                private var countriesXML:XML = <countries>
                <country code="Japan">
                <year value="28">2007</year>
                <year value="35">2006</year>
                <year value="45">2005</year>
                </country>
                <country code="Korea">
                <year value="52">2007</year>
                <year value="27">2006</year>
                <year value="49">2005</year>
                </country>
                <country code="China">
                <year value="60">2007</year>
                <year value="40">2006</year>
                <year value="33">2005</year>
                </country>
                </countries>;

                private function init_chart():void {
                init_series();
                init_chartAC();
                }

                private function init_chartAC():void {
                var newCountry:Object;
                for each (var country:XML in countriesXML.country) {
                newCountry = new Object();
                newCountry.Country = country.@code;
                for each (var years:XML in country.year) {
                newCountry[years[0]] = uint(years.@value);
                }
                countriesAC.addItem(newCountry);
                }
                }

                private function init_series():void {
                var newSeries:ColumnSeries;
                var colSeries:Array;
                for each (var years:XML in countriesXML.country[0].year) {
                newSeries = new ColumnSeries;
                newSeries.xField = "Country";
                newSeries.yField = years[0];
                newSeries.displayName = years[0];
                colSeries = countryChart.series;
                colSeries.push(newSeries);
                countryChart.series = colSeries;
                }
                }

                ]]>
                </mx:Script>
                <mx:ColumnChart id="countryChart" paddingLeft="5" paddingRight="5" showDataTips="true" dataProvider="{countriesAC}" x="10" y="10" width="600">
                <mx:horizontalAxis>
                <mx:CategoryAxis categoryField="Country"/>
                </mx:horizontalAxis>
                </mx:ColumnChart>
                <mx:Legend dataProvider="{countryChart}" x="618" y="10"/>
                </mx:Application>

                Vygo
                • 5. Re: Bar Chart Issue
                  msnelsonUK Level 1
                  Hi David,

                  My XML file is similar to that of Masamune. I am aiming towards dynamically creating the XML file. So in my script file I am working with an unknown number of countries and an unknown number of years. However, as Masamune assumed correctly, the unknown number of years for each country is constant for each country i.e. if there are 3 years then there are 3 years per country, if there are 4 years then there are 4 years per country, etc (I hope this makes sense?).

                  Masamune's solution works for me so THANKS! I didn't realise you could do a lot of the manipulation in the script file.

                  I very grateful for your time, David & Masamune, in this. I'm not sure I would've got there otherwise.

                  Thanks again!
                  • 6. Re: Bar Chart Issue
                    M._Tonelli
                    Hi guys,

                    I'm having problems to define the interval from a barchart, by default it's (0.2, 0.4, 0.6, 0.8, 1), and I just wanna see entire values, (0, 1, 2, 3...).

                    I hope someone can help me...

                    thx