0 Replies Latest reply: Nov 17, 2012 9:02 AM by nabnub RSS

    Change the default colours in line chart

    nabnub Community Member

      hi everyone,

       

       

      I'am a new user in Flex, and I am facing my first barrier

       

      I am using a code to interact a table and a graph

       

      the defaults colours of the lines are orange and a kind of green

       

      I would like to change these colours to red and pure green if it's possible

       

      here is my code

       

       

      <?xml version="1.0"?>
      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" 
       layout="absolute" width="600" height="600" 
       creationComplete="init()" applicationComplete="stage.scaleMode = StageScaleMode.EXACT_FIT;">
      <mx:Script>
       <![CDATA[
        
      [Bindable] private var chartData:XML;
      private function init():void 
      {
       //Inject the JavaScript functions we need to interface with the RMA
       //You can find the scripts below in the "acroJSFunctions" string object
       ExternalInterface.call("eval", acroJSFunctions);
       //set up callback for upadtes
       //the format script in each of the fields uses callAS to send the field name and it's value to the RMA
       //the function for this callback then modifies the XML that drives the chart.
       ExternalInterface.addCallback("changeData", changeData);
       //set up callbacks for commenting
       ExternalInterface.addCallback( "multimedia_getState", getState );
       ExternalInterface.addCallback("multimedia_setState", setState); 
       loadDefaultXML();
      } 
      private function loadDefaultXML():void
      {
        var req:URLRequest = new URLRequest("defaultChartData.xml");
       var loader:URLLoader = new URLLoader(req);
       loader.addEventListener("complete", xmlLoaded);
      }
      private function xmlLoaded(event:Event):void
      {
          chartData = new XML(event.target.data);
          loadDataFromAcroFields(); 
      } 
      
      private function loadDataFromAcroFields():void
      {
          //get the values from the PDF
          //
          var c:int;
          var r:int;
          for (c=0;c<2;c++)
       {
         for (r=0;r<16;r++)
        {       
            var result:String = ExternalInterface.call("getFieldValue",r, c);
            chartData.children()[r].children()[c] = int(result);
        }
       } 
      }    
       
      private function changeData(name:String, value:String):void
      {
       //this function gets called when the field value in the PDF file changes
       //look in the format script for the field in the PDF.
       //the field name is in the form "table.r.c" where r is the row number and c is the column.
       //So the first field in the table would be called "table.0.0"
       //By splitting the string into an array, I can modify the corresponding element in the XML object that drives the chart.
       var fieldNameArray:Array = name.split(".");
       var row:int = int(fieldNameArray[1]);
       var column:int = int(fieldNameArray[2]);
       var val:int = int(value);
       chartData.children()[row].children()[column] = val
      }   
      private function getState():String
      {
       //store the chart data XML
       return chartData.toString();
      }
      private function setState(stateData:String):Boolean
      {
       chartData = new XML(stateData);
       var c:int;
       var r:int;
          for (c=0;c<2;c++)
       {
         for (r=0;r<16;r++)
        {       
            var fieldVal:String = chartData.children()[r].children()[c].toString();
            var result:String = ExternalInterface.call("setFieldValue",r, c, fieldVal); 
        }
       }
       
       return true;
      }
           
           
       ]]>
      </mx:Script>
      <mx:String id="acroJSFunctions">
      <![CDATA[
      function getFieldValue(row, column)
      {
          fieldName="table."+row+"."+column;
          fieldValue = this.getField(fieldName).value;
          return fieldValue; 
      }
      function setFieldValue(row, column, value)
      {
          fieldName="table."+row+"."+column;
          this.getField(fieldName).value = value;
      }
      ]]>
      </mx:String>
      <mx:SeriesInterpolate id="interpolateIn" duration="1000"/>
      <mx:Canvas backgroundColor="#FFFFFF" width="100%" height="100%" horizontalScrollPolicy="off" verticalScrollPolicy="off" borderStyle="solid" borderThickness="1" borderColor="#000000">
          <mx:LineChart id="chart" dataProvider="{chartData.totals}" showDataTips="true" 
           left="10" top="10" right="10" bottom="10">
           <mx:horizontalAxis>
            <mx:CategoryAxis categoryField="Day"/>
        </mx:horizontalAxis>
        <mx:series>
         <mx:LineSeries yField="FY06" displayName="No. errors" showDataEffect="{interpolateIn}"/>
         <mx:LineSeries yField="FY07" displayName="No. lines" showDataEffect="{interpolateIn}"/>
      
        </mx:series>
       </mx:LineChart>
           <mx:Legend dataProvider="{chart}" right="25" bottom="25" borderStyle="outset"/>
      </mx:Canvas>     
      </mx:Application>
      
      

       

      I've tried to read this post: http://help.adobe.com/en_US/flex/using/WS2db454920e96a9e51e63e3d11c0bf69084-7c5c.html#WS2d b454920e96a9e51e63e3d11c0bf6568f-7ff5

       

      then I've tried to understand how can I modify and insert the following code to mine, I've tried but doesn't work

       

       

      <mx:series>
                 <mx:LineSeries yField="profit" displayName="Profit">
                  <mx:lineStroke>
                      <mx:SolidColorStroke 
                          color="0x0099FF" 
                          weight="20" 
                          alpha=".2"/>
                  </mx:lineStroke>                
                 </mx:LineSeries>
                 <mx:LineSeries yField="expenses" displayName="Expenses">
                  <mx:lineStroke>
                      <mx:SolidColorStroke 
                          color="0x0044EB" 
                          weight="20" 
                          alpha=".8"/>
                  </mx:lineStroke>                
                 </mx:LineSeries>
              </mx:series>
      
      

       

       

      can you please help me?

       

      thanks a lot

       

       

       

      Win 7 64 bits

      Adobe Flash Builder 4.6 Premium