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

    How to add background fill to ColumnChart created without MXML?

    stewlg

      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:horizontalAxis>
                  <mx:CategoryAxis dataProvider="{spendingDataList}" categoryField="OrganizationTypeName" title="Organization Type" />
              </mx:horizontalAxis>
             
              <mx:verticalAxis>
                  <mx:LinearAxis title="FY Spending in Millions" labelFunction="spendingInMillions_labelFunc"  />
              </mx:verticalAxis>
             
              <mx:series>
                  <mx:ColumnSeries id="organizationTypeSpending" yField="Amount" xField="OrganizationTypeName" displayName="Organization Type [??]" showDataEffect="slideIn" />
              </mx:series>
          </mx:ColumnChart>

       

      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);
                  testChart.backgroundElements.push(backgroundFill);
                 
                  // 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;
                 
                  testChart.series.push(testColumnSeries);
                  // Do we need this addChild?
                  addChild(testChart);
                 
                  // Remove the visual competition
                  removeExistingBitmapsFromScreen();
                 
                  // 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);
                  map.addOverlay(theMarker);   
              }

       

       

      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:horizontalAxis>
                 <mx:CategoryAxis
                      dataProvider="{expenses}"
                      categoryField="Month"
                 />
              </mx:horizontalAxis>
              <mx:series>
                 <mx:ColumnSeries
                      xField="Month"
                      yField="Profit"
                      displayName="Profit"
                 >
                     <mx:fill>
                          <mx:SolidColor color="0x336699"/>
                     </mx:fill>

                 </mx:ColumnSeries>

                 <mx:ColumnSeries
                      xField="Month"
                      yField="Expenses"
                      displayName="Expenses"
                 >
                  <mx:fill>
                      <mx:SolidColor color="0xFF99FF"/>
                  </mx:fill>
                 </mx:ColumnSeries>
              </mx:series>
           </mx:ColumnChart>

      (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.)