0 Replies Latest reply on Jun 20, 2011 12:43 AM by Wesley Chin

    Rotating labels

    Wesley Chin

      Hi everyone,

       

      I want to rotate my label but it does not want to work. I have embedded the font too.  Please help.

       

      <?xml version="1.0" encoding="utf-8"?>

      <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"

      xmlns:fx="http://ns.adobe.com/mxml/2009"

      xmlns:s="library://ns.adobe.com/flex/spark"

      xmlns:mx="library://ns.adobe.com/flex/halo"

      width="780" height="550" contextMenu="{cm}" creationComplete="Init()"

      layout="absolute">

      <s:layout>

      <s:BasicLayout />

      </s:layout>

      <fx:Style>

      @namespace s "library://ns.adobe.com/flex/spark";

      @namespace mx "library://ns.adobe.com/flex/halo";

       

      @font-face {

      src: url("../stats/assets/MyriadWebPro.ttf");

      fontFamily: myMyriad;

      embedAsCFF: true;

      }

       

      Chart {

      fontFamily: Myriad;

      fontLookup: embeddedCFF;

      fontSize: 34;

      }

      </fx:Style>

       

      <mx:Script>

      <![CDATA[

      public var fontClass:Class;

      import mx.charts.ChartItem;

      import mx.charts.HitData;

      import mx.charts.chartClasses.ChartBase;

      import mx.charts.chartClasses.Series;

      import mx.charts.events.ChartItemEvent;

      import mx.charts.series.PieSeries;

      import mx.charts.series.items.ColumnSeriesItem;

      import mx.controls.Alert;

      import mx.effects.Move;

      import mx.printing.FlexPrintJob;

      import mx.rpc.events.FaultEvent;

      import mx.rpc.events.ResultEvent;

      private var csi:ColumnSeriesItem;

      [Bindable]

      public var pieSeriesArr:Array = new Array;

      [Bindable]

      public var datesOpenClosed:String = "Closed";

      [Bindable]

      public var Header:String = "";

      [Bindable]

      public var companyName:String = "";

      [Bindable]

      public var chart1Provider:Array = new Array;

      [Bindable]

      public var chart3Provider:Array = new Array;

      [Bindable]

      public var chart4Provider:Array = new Array;

      [Bindable]

      public var Chart1VMax:int;

      [Bindable]

      public var Chart3VMax:int;

      [Bindable]

      public var Chart4VMax:int;

      [Bindable]

      private var cm:ContextMenu;

       

      private var mv:Move;

       

      [Embed(systemFont="Tahoma",

                          fontName="regularFont",

                          mimeType="application/x-font")]

      private var font1:Class;

       

       

      private function Init():void

      {

      statsService.getProjectStats.send("", "");

      cm = new ContextMenu;

      cm.hideBuiltInItems();

      }

      private function applyDates():void

      {

      var fromDate:String = txtFromDate.text;

      var toDate:String = txtToDate.text;

      statsService.getProjectStats.send(fromDate, toDate);

      }

      private function getProjectStatsResult(event:ResultEvent):void

      {

      var result:Array = event.result as Array;

      Header = result[0];

      companyName = result[1];

      chart1Provider = result[2];

      chart3Provider = result[3];

      chart4Provider = result[4];

       

       

      Chart1VMax = checkMax(chart1Provider);

      Chart3VMax = checkMax(chart3Provider);

      Chart4VMax = checkMax(chart4Provider);

      }

      private function checkMax(arr:Array):int

      {

      var biggest:int = 0;

      for (var i:String in arr)

      {

      if (arr[i].yval > biggest)

      {

      biggest = arr[i].yval;

      }

      }

      var top:int = biggest * 0.3;

      if (top < 1)

      {

      top = 1;

      }

      var vAxisMax:int = biggest + top;

      return vAxisMax;

      }

      private function showHideDates():void

      {

      if (datesOpenClosed == "Closed")

      {

      mv = new Move(dateRangeWindow);

      mv.yFrom = dateRangeWindow.y;

      mv.yTo = -57;

      mv.duration = 500;

      mv.end();

      mv.play();

       

      lbDateRange.label = "Close";

      datesOpenClosed = "Open";

      }

      else

      {

      mv = new Move(dateRangeWindow);

      mv.yFrom = dateRangeWindow.y;

      mv.yTo = -160;

      mv.duration = 500;

      mv.end();

      mv.play();

       

      lbDateRange.label = "Change Date Range";

      datesOpenClosed = "Closed";

      }

      }

      private function faultHandler(event:FaultEvent):void

      {

      Alert.show("A error has occured: '" + event.fault.faultDetail + "'. \r\nPlease reload this page and try again");

      }

      private function showPercentage(item:Object, field:String, index:Number, percentValue:Number):String

      {

      var percentage:Number = Math.round(percentValue);

      return percentage.toString() + "%";

      }

      private function doProjPrint():void

      {

      // Create a FlexPrintJob instance.

      var printJob:FlexPrintJob = new FlexPrintJob();

       

      // Start the print job.

      if (printJob.start())

      {

      // Create a MyPrintView control as a child of the current view.

      var formPrintView:projStatsPrint = new projStatsPrint();

      addChild(formPrintView);

       

      // Populate the print control's contact label with the text from the form's name, phone, and e-mail controls.

      formPrintView.Heading.text = "Project Statistics";

       

      // Set the print control's data grid data provider to be the displayed data grid's data provider.

      formPrintView.ProjChart1.dataProvider = provinceChart1.dataProvider;

      if (txtFromDate.text == "" && txtToDate.text == "")

      {

      formPrintView.lblFromDate.text = "Last Month";

      formPrintView.lblToDate.text = "Last Month";

      }

      else

      {

      formPrintView.lblFromDate.text = txtFromDate.text;

      formPrintView.lblToDate.text = txtToDate.text;

      }

      formPrintView.ProjChart2.dataProvider = btypeChart1.dataProvider;

      formPrintView.ProjChart3.dataProvider = btypeChart2.dataProvider;

      formPrintView.Header = Header;

      formPrintView.companyName = companyName;

      formPrintView.lblChart2.text = lblChart2.text;

      formPrintView.lblChart3.text = lblChart3.text;

       

      // Add the SimplePrintview control to the print job.

      // For comparison, try setting the second parameter to "none".

      printJob.addObject(formPrintView);

       

      // Send the job to the printer.

      printJob.send();

       

      // Remove the print-specific control to free memory.

      removeChild(formPrintView);

      }

      }

      private function selectItemHandler(e:ChartItemEvent):void

      {

      var hitData:HitData = e.hitData;

      csi = ColumnSeriesItem(hitData.chartItem);

      var province:String = csi.item.province;

      statsService.getProvStats.send(province);

      }

      private function getProvStatsResult(event:ResultEvent):void

      {

      var result:Array = event.result as Array;

      chart3Provider = result[0];

      chart4Provider = result[1];

       

      Chart3VMax = checkMax(chart3Provider);

      Chart4VMax = checkMax(chart4Provider);

      pieSeriesArr = reloadPieSeries();

      btypeChart1.series = pieSeriesArr;

      }

      private function reloadPieSeries():Array

      {

      var series:PieSeries = new PieSeries();

      var seriesArr:Array = new Array;

      series.displayName = "Series 1";

      series.field = "count";

      series.nameField = "btype";

      series.labelFunction = showPercentage;

      series.setStyle("labelPosition", "insideWithCallout");

      series.setStyle("showDataEffect", "slideRight");

      series.setStyle("hideDataEffect", "slideLeft");

       

      seriesArr.push(series);

      return seriesArr;

      }

      ]]>

      </mx:Script>

       

      <mx:RemoteObject id="statsService" source="com.webleads.stats.StatsDAO" destination="statsService" showBusyCursor="true" fault="faultHandler(event)">

      <mx:method name="getProjectStats" result="getProjectStatsResult(event)" />

      <mx:method name="getProvStats" result="getProvStatsResult(event)" />

      </mx:RemoteObject>

       

      <mx:SeriesSlide id="slideUp" direction="up" duration="1000" />

      <mx:SeriesSlide id="slideDown" direction="down" duration="1000" />

      <mx:SeriesSlide id="slideRight" direction="right" duration="1000" />

      <mx:SeriesSlide id="slideLeft" direction="left" duration="1000" />

       

      <mx:Style source="styles.css" />

      <mx:Canvas width="100%" height="100%" backgroundColor="#ECECEC" label="Projects" contextMenu="{cm}" xmlns:mx="http://www.adobe.com/2006/mxml">

      <mx:VBox width="760" left="10" top="35" bottom="10">

      <mx:Canvas width="100%">

      <mx:Legend height="25" horizontalCenter="0" dataProvider="{provinceChart1}" />

      </mx:Canvas>

      <mx:HBox width="100%" height="50%">

      <mx:ColumnChart id="provinceChart1" width="100%" height="100%" paddingLeft="5" paddingRight="5" dataProvider="{chart1Provider}" itemClick="selectItemHandler(event)" showDataTips="true">

      <mx:horizontalAxis>

      <mx:CategoryAxis id="province" dataProvider="{chart1Provider}" categoryField="province" />

      </mx:horizontalAxis>

       

      <mx:horizontalAxisRenderers>

      <mx:AxisRenderer labelRotation="45"  axis="{province}" />

      </mx:horizontalAxisRenderers>

       

      <mx:series>

      <mx:ColumnSeries id="chart1Series1" selectable="true" yField="countTotal" xField="province" displayName="Projects published by Databuild {Header}" showDataEffect="slideUp" hideDataEffect="slideDown" />

      <mx:ColumnSeries id="chart1Series2" selectable="true" yField="countClient" xField="province" displayName="Projects for {companyName}" showDataEffect="slideUp" hideDataEffect="slideDown" />

      </mx:series>

      </mx:ColumnChart>

      </mx:HBox>

      <mx:Canvas width="100%" height="50%">

      <mx:Label id="lblChart2" width="45%" textAlign="left" styleName="boldLabel" text="Projects published {Header}" />

      <mx:Spacer width="10%" />

      <mx:Label id="lblChart3" width="45%" right="0" textAlign="left" styleName="boldLabel" text="Projects for {companyName}" />

      <mx:PieChart id="btypeChart1" width="314" height="214" left="0" top="20" dataProvider="{chart3Provider}" showDataTips="true">

      <mx:series>

      <mx:PieSeries labelFunction="showPercentage" displayName="Series 1" field="count" nameField="btype" labelPosition="insideWithCallout" showDataEffect="slideRight" hideDataEffect="slideLeft" />

      </mx:series>

      </mx:PieChart>

      <mx:Legend width="10%" top="0" bottom="0" horizontalCenter="-20" dataProvider="{btypeChart1}" />

      <mx:PieChart id="btypeChart2" width="342" height="214" right="0" top="20" dataProvider="{chart4Provider}" showDataTips="true">

      <mx:series>

      <mx:PieSeries labelFunction="showPercentage" displayName="Series 1" field="count" nameField="btype" labelPosition="insideWithCallout" showDataEffect="slideRight" hideDataEffect="slideLeft" />

      </mx:series>

      </mx:PieChart>

       

      </mx:Canvas>

      </mx:VBox>

      <mx:Canvas id="dateRangeWindow" y="-160" width="283" height="184" backgroundColor="#D5D5D5" borderStyle="solid" cornerRadius="16" horizontalCenter="0">

      <mx:DateField id="txtFromDate" x="79" y="90" width="115" formatString="YYYY-MM" />

      <mx:DateField id="txtToDate" x="79" y="120" width="115" formatString="YYYY-MM" />

      <mx:Label x="6" y="92" width="65" textAlign="right" text="From Date" />

      <mx:Label x="6" y="122" width="65" textAlign="right" text="To Date" />

      <mx:Button x="212" y="120" label="Apply" click="applyDates()" />

      <mx:LinkButton id="lbDateRange" y="160" horizontalCenter="0" textAlign="center" label="Change Date Range" click="showHideDates()" />

      <mx:Label x="84" y="62" styleName="boldLabel" text="Change Date Range" />

      </mx:Canvas>

      <mx:Image x="754" y="10" width="16" height="16" source="@Embed('/assets/printer.png')" click="doProjPrint()" buttonMode="true" />

      </mx:Canvas>

      </mx:Application>