1 Reply Latest reply on Dec 2, 2015 10:57 PM by darius.ralys

    Drag And Drop BarChart Series Invalid Position

    darius.ralys

      Hello,

       

      Drag And Drop BarChart item strange behavior.

      DragAndDrop target is last item when any chart item is dragged on the first item with label "SERIES 01" on the area marked with red rectange.

      When barChart.height = 240 as in picture below, then it is some area for dragging to "SERIES 01"

      When barChart.height = 120,  then, it is imposible to drag  to "SERIES 01"

       

      Image: BarChart with trace output on drop to "SERIES 01"

      DragAndDroop.png


      <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

      <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

       

       

          <head>

              <title>flexGraphTest</title>

              <meta name="google" value="notranslate" />     

              <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

              <style type="text/css" media="screen">

                  html, body  { height:100%; }

                  body { margin:0; padding:0; overflow:auto; text-align:center;background-color: #ffffff; }

                  object:focus { outline:none; }

                  #flashContent { display:none; }

              </style>

       

       

              <script type="text/javascript" src="swfobject.js"></script>

              <script type="text/javascript">

                  var swfVersionStr = "16.0.0";

                  var xiSwfUrlStr = "playerProductInstall.swf";

                  var flashvars = {};

                  flashvars.barChartWidth = 760;

                  flashvars.barChartHeight = 240;

                  var params = {};

                  params.quality = "high";

                  params.bgcolor = "#ffffff";

                  params.allowscriptaccess = "always";

                  params.allowfullscreen = "true";

                  var attributes = {};

                  attributes.id = "flexGraphTest";

                  attributes.name = "flexGraphTest";

                  attributes.align = "middle";

                  swfobject.embedSWF(

                      "flexGraphTest.swf", "flashContent",

                      "100%", "100%",

                      swfVersionStr, xiSwfUrlStr,

                      flashvars, params, attributes);

                  swfobject.createCSS("#flashContent", "display:block;text-align:left;");

              </script>

          </head>

          <body>

              <div id="flashContent"/>

         </body>

      </html>

       

      <?xml version="1.0"?>
      <!-- charts/UsingBarSets.mxml -->
      <s:Application
         xmlns:fx="http://ns.adobe.com/mxml/2009"
         xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/mx"
         creationComplete="initApp()">

         <fx:Script><![CDATA[

        import mx.core.FlexGlobals;

        import mx.charts.BarChart;

        import mx.charts.CategoryAxis;

        import mx.charts.ChartItem;

        import mx.charts.LegendItem;

        import mx.charts.chartClasses.Series;

        import mx.charts.series.BarSeries;

        import mx.charts.series.items.BarSeriesItem;

        import mx.events.DragEvent;

        import mx.events.FlexEvent;

        import mx.graphics.IFill;

        import mx.graphics.SolidColor;

        import mx.managers.DragManager;

        import spark.skins.spark.PanelSkin;

       

        private var barChart:BarChart;

       

        private var jsonLabelsArray:Array = [];

       

         [Bindable]

        public var barChartWidth:Number;

       

         [Bindable]

        public var barChartHeight:Number;

       

        private function initVars():void {

         barChartWidth = FlexGlobals.topLevelApplication.parameters.barChartWidth;

         barChartHeight = FlexGlobals.topLevelApplication.parameters.barChartHeight;

        }

       

        private function initApp():void {

        ExternalInterface.addCallback("loadGraphDataFromJson", loadGraphDataFromJson);

         initVars();

         createGraph();

       

        var d:String = '{"employee":"DARIUS","0_series_1":60,"0_series_2":30,"0_series_3":120,"0_series_4":60}';

        var l:String = '[["0_series_1","SERIES 01",-16712960,1.0],["0_series_2","SERIES 02",-6710887,1.0],["0_series_3","SERIES 03",-5000269,1.0],["0_series_4","SERIES 04",-32768,0.4]]';

         loadGraphDataFromJson(d,l,0,"");

       

        }

       

        private function createGraph():void {

         barChart = new BarChart();

         barChart.showDataTips = true;

         barChart.width = barChartWidth;

         barChart.height = barChartHeight;

         barChart.dragEnabled = true;

         barChart.selectionMode = "single";

         barChart.type = "stacked";

       

        var vAxis:CategoryAxis = new CategoryAxis();

         vAxis.categoryField = "employee";

         barChart.verticalAxis = vAxis;

       

         barPanel2.addElement(barChart);

         barPanel2.addElement(legend);

        }

       

        public function loadGraphDataFromJson(jsonDataString:String, labelsString:String, graphId:int, panelTitle:String):void {

         loadGraphData(jsonDataString, labelsString, panelTitle);

        }

       

        private function loadGraphData(jsonDataString:String, labelsString:String, panelTitle:String):void {

         barChart.series = [];

         legend.removeAllChildren();

         barChart.dataProvider = JSON.parse(String(jsonDataString));

       

         jsonLabelsArray = (JSON.parse(labelsString) as Array);

       

        if (jsonLabelsArray.length < 1)

        return;

        for (var i:uint = 0; i < jsonLabelsArray.length; i++) {

        var series:BarSeries = new BarSeries();

         series.name = jsonLabelsArray[i][0];

         series.xField = jsonLabelsArray[i][0];

         series.displayName = jsonLabelsArray[i][1];

         series.addEventListener(MouseEvent.CLICK, mouseEventHandler);

         series.addEventListener("dragEnter", dragEnterHandler);

         series.addEventListener("dragOver", dragOverHandler);

         series.addEventListener("dragDrop", dragDropHandler);

         series.setStyle("fill", getItemColor(series.name));

       

        var legendItem:LegendItem = new LegendItem();

         legendItem.label = jsonLabelsArray[i][1];

         legendItem.setStyle("fill", getItemColor(series.name));

       

         legend.addChild(legendItem);

         barChart.series.push(series);

         barPanel2.title = panelTitle;

        }

        }

       

        private function setLegendPosition(graphId:int):void {

         legend.direction = "vertical";

        }

       

        private function seriesFillFunction(element:ChartItem, index:Number):IFill {

        return getItemColor(element.element.name);

        }

       

        private function getItemColor(itemName:String):SolidColor {

        var solidColor:SolidColor = new SolidColor(0);

        if (jsonLabelsArray.length > 0) {

        for (var i:uint = 0; i < jsonLabelsArray.length; i++) {

        if (jsonLabelsArray[i][0] == itemName) {

         solidColor = new SolidColor(jsonLabelsArray[i][2]);

         solidColor.alpha = jsonLabelsArray[i][3];

        break;

        }

        }

        }

        return solidColor;

        }

       

        private function mouseEventHandler(event:MouseEvent):void {

        event.preventDefault();

        var series:Series = Series(event.currentTarget);

       

        if (ExternalInterface.available) {

        var result:String = "";

        ExternalInterface.marshallExceptions = true;

        //result = ExternalInterface.call("onFlexChartSeriesSelectEvent", String(series.name));

        }

        }

       

        private function dragEnterHandler(event:DragEvent):void {

        event.preventDefault();

        var barSeriesDst:BarSeries = BarSeries(event.currentTarget);

        var items:Array = event.dragSource.dataForFormat("chartitems") as Array;

        var barSeriesItem:BarSeriesItem = items[0];

        DragManager.acceptDragDrop(barSeriesDst);

        }

       

        private function dragDropHandler(event:DragEvent):void {

        event.preventDefault();

        var barSeriesDst:BarSeries = BarSeries(event.currentTarget);

        var items:Array = event.dragSource.dataForFormat("chartitems") as Array;

        var barSeriesSrc:BarSeriesItem = items[0];

         trace(String(barSeriesSrc.element.name) + " - " +String(barSeriesDst.name));

        if (ExternalInterface.available) {

        var result:String = "";

        ExternalInterface.marshallExceptions = true;

        //result = ExternalInterface.call("onFlexChartSeriesDragDropEvent", String(barSeriesSrc.element.name), String(barSeriesDst.name));

        }

        }

       

        private function dragOverHandler(event:DragEvent):void {

        event.preventDefault();

        var barSeriesDst:BarSeries = BarSeries(event.currentTarget);

        var items:Array = event.dragSource.dataForFormat("chartitems") as Array;

        var barSeriesSrc:BarSeriesItem = items[0];

        DragManager.showFeedback(DragManager.MOVE);

        }

       

        protected function panel_creationCompletedHandler1(event:FlexEvent):void {

        var skin:PanelSkin = barPanel1.skin as PanelSkin;

         skin.topGroup.includeInLayout = false;

         skin.topGroup.visible = false;

        }

       

        protected function panel_creationCompletedHandler2(event:FlexEvent):void {

        var skin:PanelSkin = barPanel2.skin as PanelSkin;

         skin.topGroup.includeInLayout = true;

         skin.topGroup.visible = true;

        }

       

       

        ]]></fx:Script>

       

         <s:Panel controlBarVisible="false" height="100%" borderVisible="false" dropShadowVisible="false" id="barPanel1" creationComplete="panel_creationCompletedHandler1(event)">

         <s:layout>

         <s:HorizontalLayout/>

         </s:layout>

         <s:Panel controlBarVisible="true" height="100%" borderVisible="true" dropShadowVisible="false" id="barPanel2" creationComplete="panel_creationCompletedHandler2(event)">

         <s:layout>

         <s:VerticalLayout/>

         </s:layout>

         <mx:Legend id="legend" updateComplete="setLegendPosition(0)" direction="vertical" width="100%"/>

         </s:Panel>

         </s:Panel>

      </s:Application>


      Could somebody help to solve this problem?

        • 1. Re: Drag And Drop BarChart Series Invalid Position
          darius.ralys Level 1

          After adding 'fictive' series on the end of the bar without event listeners the bug was evaded

           

          barChart.series.push( getTerminator());

           

          private function getTerminator():BarSeries {

            var series:BarSeries = new BarSeries();

             series.name = "terminator";

             series.xField = "terminator";

             series.displayName = "terminator";

             series.setVisible(true);

             series.setStyle("fill", new SolidColor(0));

            return series;

          }

           

          Is not this how it should be but still better than nothing