0 Replies Latest reply on Sep 18, 2009 5:01 PM by stewlg

    How to add background fill to ColumnChart created without MXML?


      I'm trying to create ColumnCharts on-the-fly, without using MXML. To my surprise, I've had good luck with this so far, and have managed to figure most things out by blind guesswork, since I can't find any documentation or sample code anywhere for this.


      For example, I'm trying to turn this:


          <mx:ColumnChart id="overallSpendingChart" dataProvider="{spendingDataList}" showDataTips="true" paddingLeft="10" paddingRight="10" height="30%" width="100%" >
                  <mx:CategoryAxis dataProvider="{spendingDataList}" categoryField="OrganizationTypeName" title="Organization Type" />
                  <mx:LinearAxis title="FY Spending in Millions" labelFunction="spendingInMillions_labelFunc"  />
                  <mx:ColumnSeries id="organizationTypeSpending" yField="Amount" xField="OrganizationTypeName" displayName="Organization Type [??]" showDataEffect="slideIn" />


      into this:


              // Test to see if we can fake up a chart without using </mx:ColumnChart> resources.
              private function attemptToCreateColumnChartOutOfThinAir():void
                  var testChart:ColumnChart = new ColumnChart();
                  testChart.dataProvider = spendingDataList;
                  testChart.showDataTips = true;
                  testChart.height = 200;
                  testChart.width = 300;
                  var backgroundFill:FillStyle = new FillStyle();
                  backgroundFill.color = new SolidColor(0xFF99FF);
                  // There's more missing here ^ but it's all cosmetic..           
                  var testCatAxis:CategoryAxis = new CategoryAxis();
                  testCatAxis.dataProvider = spendingDataList;
                  testCatAxis.categoryField = 'OrganizationTypeName';
                  testCatAxis.title = 'Organization Type';
                  testChart.horizontalAxis = testCatAxis;
                  var testLinearAxis:LinearAxis = new LinearAxis();
                  testLinearAxis.title = 'FY Spending in Jillions';
                  testLinearAxis.labelFunction = spendingInMillions_labelFunc;
                  testChart.verticalAxis = testLinearAxis;
                  var testColumnSeries:ColumnSeries = new ColumnSeries();
                  testColumnSeries.id = 'organizationTypeSpending';
                  testColumnSeries.yField = 'Amount';
                  testColumnSeries.xField = 'OrganizationTypeName';
                  testColumnSeries.displayName = 'Organization Type [??]';
                  //testColumnSeries.showDataEffect = slideIn;
                  // Do we need this addChild?
                  // Remove the visual competition
                  // Slap it up? Maybe? Center of Oregon
                  var centerOR:LatLng = stateCenters['OR'];


                  testingChartAddToGoogleMap(testChart, centerOR);                       


              private function testingChartAddToGoogleMap(theChart:ColumnChart, theLatLong:LatLng):void
                  var options:MarkerOptions = new MarkerOptions();
                  options.icon = theChart;              
                  options.iconAlignment = MarkerOptions.ALIGN_HORIZONTAL_CENTER + MarkerOptions.ALIGN_VERTICAL_CENTER;
                  options.iconOffset = new Point(0, 0);
                  options.hasShadow = false;
                  // Create the marker, add to map
                  var theMarker:Marker = new Marker(theLatLong, options);



      As you can see I'm fumbling through it. The above does seem to work, except I have not been able to blunder through how to set a background fill, both to set column colors and to set background colors for the whole graph.


      For example, how do I the ActionScript equivalent of these <mx:fill> tags:


           <mx:ColumnChart id="myChart" dataProvider="{expenses}" showDataTips="true">
                          <mx:SolidColor color="0x336699"/>


                      <mx:SolidColor color="0xFF99FF"/>

      (If there is documentation on this type of technique, I'd appreciate a pointer. What I'd really love is source output from the MXML compiler, sigh.)