Flex: Stacked column chart – programmatically in actionscript

By bishopondevelopment

I was looking for ages for an example of a dynamically generated stacked column chart in Flex, but most of the examples were incorporating some MXML, or contained hard-coded series objects.

The example below is based on Adobe Livedocs, but I show how to generate the series arrays programatically in as3, with no use of mxml code, and apply these series to a column chart (added topanelActionscript as seen in the code below). Also, this could be easily adapted to a barchart.

If youve got any suggestions, let me know.

Flex Stacked Chart

 

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
creationComplete="initApp()" width="622" height="660">

<mx:Script>

<![CDATA[
   import mx.charts.CategoryAxis;
   import mx.charts.series.ColumnSeries;
  import mx.charts.ColumnChart;
  import mx.charts.series.ColumnSet;
   import mx.charts.Legend;
   import mx.charts.BarChart;
   import mx.charts.series.BarSet;
   import mx.charts.series.BarSeries;
   import mx.collections.ArrayCollection;

[Bindable]
     private var yearlyData:ArrayCollection = new ArrayCollection([
        {month:"January", revenue:120, costs:45, overhead:102, oneTime:23},
        {month:"February", revenue:108, costs:42, overhead:87, oneTime:47},
        {month:"March", revenue:150, costs:82, overhead:32, oneTime:21},
        {month:"April", revenue:170, costs:44, overhead:68},
        {month:"May", revenue:250, costs:57, overhead:77, oneTime:17},
        {month:"June", revenue:200, costs:33, overhead:51, oneTime:30},
        {month:"July", revenue:145, costs:80, overhead:62, oneTime:18},
        {month:"August", revenue:166, costs:87, overhead:48},
        {month:"September", revenue:103, costs:56, overhead:42},
        {month:"October", revenue:140, costs:91, overhead:45, oneTime:60},
        {month:"November", revenue:100, costs:42, overhead:33, oneTime:67},
        {month:"December", revenue:182, costs:56, overhead:25, oneTime:48},
        {month:"May", revenue:120, costs:57, overhead:30}
     ]);

private function initApp():void {

// Create a column chart object
        var stackedColumnChart:ColumnChart = new ColumnChart();
        stackedColumnChart.dataProvider = yearlyData;
        stackedColumnChart.showDataTips = true;
 stackedColumnChart.width = 460;
 
 // Set the horizontal axix category
        var xAxis:CategoryAxis = new CategoryAxis();
        xAxis.categoryField = "month";
        stackedColumnChart.horizontalAxis = xAxis;

 // ColumnSet.series is an array which contains
 // an array of ColumnSeries objects.
        var columnSet:ColumnSet = new ColumnSet();
        columnSet.type = "stacked";

// Each item in seriesDetails becomes a different segment of
        // a column in the stacked chart i.e. each item represents a series.
        var seriesDetails:ArrayCollection = new ArrayCollection([
        {YField:"costs", DisplayName:"Recurring Costs"},
        {YField:"overhead", DisplayName:"Overhead Costs"},
        {YField:"oneTime", DisplayName:"One-Time Costs"}
        ]);

// Create a ColumnSeries, and an array to be
        // populated with dynamically generated columnSeries objects
        var columnSeries:ColumnSeries;

var seriesArray:Array = new Array();

// Generate an array of ColumnSeries objects
        // which are then be applied to the ColumnSet series.
        for(var i:int = 0; i < seriesDetails.length; i++){
        columnSeries = new ColumnSeries();
        columnSeries.yField = seriesDetails[i].YField;
        columnSeries.displayName = seriesDetails[i].DisplayName;
        seriesArray.push(columnSeries);
        }
        columnSet.series = seriesArray;

 // c.series could take an array of column sets
 // for displaying mixed charts i.e. c.series = [columnSet1, columnSet2];
 stackedColumnChart.series = [columnSet];

var legend:Legend = new Legend();
        legend.direction = "horizontal";
        legend.dataProvider = stackedColumnChart;

panelActionscript.addChild(stackedColumnChart);
        panelActionscript.addChild(legend);

}

  ]]></mx:Script>
  <mx:VBox height="100%">
    <mx:Panel title="Stacked chart (dynamically created in ActionScript)"
    id="panelActionscript" width="490">
    </mx:Panel>
  </mx:VBox>
  <mx:Panel title="Same chart created solely in MXML" id="panelMxml" width="490">
    <mx:ColumnChart id="mxmlColumnChart" dataProvider="{yearlyData}"
    showDataTips="true" width="470">
      <mx:horizontalAxis>
           <mx:CategoryAxis categoryField="month"/>
       </mx:horizontalAxis>
       <mx:series>
           <mx:ColumnSet type="stacked">
               <mx:ColumnSeries
                   yField="costs"
                   displayName="Recurring Costs"/>
               <mx:ColumnSeries
                   yField="overhead"
                   displayName="Overhead Costs"/>
               <mx:ColumnSeries
                   yField="oneTime"
                   displayName="One-Time Costs"/>
           </mx:ColumnSet>
       </mx:series>
    </mx:ColumnChart>
    <mx:Legend dataProvider="{mxmlColumnChart}" direction="horizontal"/>
  </mx:Panel>
</mx:Application>

flex stacked column graph的更多相关文章

  1. Hello Stacked Column Chart

    <navigation:Page xmlns:toolkit="http://schemas.microsoft.com/winfx/2006/xaml/presentation/to ...

  2. [转]VS Code 扩展 Angular 6 Snippets - TypeScript, Html, Angular Material, ngRx, RxJS & Flex Layout

    本文转自:https://marketplace.visualstudio.com/items?itemName=Mikael.Angular-BeastCode VSCode Angular Typ ...

  3. FCC---CSS Flexbox: Apply the flex-direction Property to Create a Column in the Tweet Embed

    The tweet embed header and footer used the flex-direction property earlier with a row value. Similar ...

  4. Flex 布局教程:实例篇

    该教程整理自 阮一峰Flexible教程 今天介绍常见布局的Flex写法.你会看到,不管是什么布局,Flex往往都可以几行命令搞定. 我的主要参考资料是Landon Schropp的文章和Solved ...

  5. CSS布局之div交叉排布与底部对齐--flex实现

    最近在用wordpress写页面时,设计师给出了一种网页排布图样,之前从未遇到过,其在电脑上(分辨率大于768px)的效果图如下: 而在手机(分辨率小于等于768px)上要求这样排列: 我想到了两种方 ...

  6. 在移动端中的flex布局

    flex布局介绍: flex布局很灵活, 这种布局我们也可以称之为弹性布局,  弹性布局的主要优势就是元素的宽或者高会自动补全; flex布局实例: 比如有两个div,一个div的宽度为100px, ...

  7. flex实验总结

    1.父元素 .box{ display:flex; flex-direction: column;//铺满垂直排列 flex-direction: column-reverse;//铺满垂直反向排列 ...

  8. 解决UC浏览器或微信浏览器上flex兼容问题

    在UC浏览器上使用display:flex;时会不起作用,要加上兼容性写法,如下 display: -webkit-box; /* OLD - iOS 6-, Safari 3.1-6 */ disp ...

  9. flex引起height:100%失效

    <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content ...

随机推荐

  1. July 31st 2017 Week 31st Monday

    Elegance is the only beauty that never fades. 优雅是唯一不会褪色的美. Even the most beautiful apperace would be ...

  2. java数组回顾---线性查找最大值最小值---二分查找

    import java.util.Scanner; public class ArrayDemo { public static void main(String []args) { //------ ...

  3. Java的Stream流

    yi.控制台输入输出流, 1.读取控制台输入 Java的控制台输入由System.in完成.为了获得一个绑定到控制台的字符流,可以把System.in包装在一个BufferedReader对象中来创建 ...

  4. angularJs的过滤器

    一.currency   货币格式化 <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta ...

  5. FP又称为Monadic Programming

    什么是Monad? trait Monad[+T] { def flatMap[U]( f : (T) => Monad[U] ) : Monad[U] def unit(value : B)  ...

  6. 《metasploit渗透测试魔鬼训练营》学习笔记第六章--客户端渗透

    四.客户端攻击      客户端攻击与服务端攻击有个显著不同的标识,就是攻击者向用户主机发送的恶意数据不会直接导致用户系统中的服务进程溢出,而是需要结合一些社会工程学技巧,诱使客户端用户去访问这些恶意 ...

  7. WEB测试—兼容测试

    现在的操作系统,浏览器越来越多样性,导致软件兼容性测试在目前软件测试领域占有很重要的地位,我在测试项目经历中,以浏览器的兼容测试为主,平台.分辨率为辅. (我的经验前提:我测试过3类的不同行业的web ...

  8. priority_queue详解

    priority_queue是一个安排好的顺序存储的队列,队首是优先级最高的元素. Template<class T , class Container = vector<T> , ...

  9. redis单节点集群

    一.概念 redis是一种支持Key-Value等多种数据结构的存储系统.可用于缓存.事件发布或订阅.高速队列等场景.该数据库使用ANSI C语言编写,支持网络,提供字符串.哈希.列表.队列.集合结构 ...

  10. Java中的集合框架-Map

    前两篇<Java中的集合框架-Commection(一)>和<Java中的集合框架-Commection(二)>把集合框架中的Collection开发常用知识点作了一下记录,从 ...