4 Replies Latest reply on Jan 14, 2010 6:41 AM by mgargiullo

    Pie Chart summarizing grid data

    mgargiullo

      New to Flex.  Searched for a method to build a pie chart based on a column in the grid we've created.

       

      So Far:

       

      The grid gets created based on info passed in a form.

      I can get two pie charts to be created based on specific columns in the data.

       

      The pie charts currently have 1 slice per row of data.

       

      Am I missing an easy way to build a Pie Chart that summarizes this?

       

      Instead of One Pie Slice per record, how do we get one pie slice per unique value in the data column?

       

      For instance:

       

      a datagrid of   source IP | Dest IP | Dest Port | Action

       

      I'd like a pie chart showing the percent of data per source IP.

       

      Is there something built in to Flex to handle this?

        • 1. Re: Pie Chart summarizing grid data
          msakrejda Level 4

          var ipSummary:Object = {};

          for each (var record:Object in ipData) {

            ipSummary[record.sourceIp] = (ipSummary[record.sourceIp] || 0) + 1;

          }

          var pieData:Array = [];

          for (var key:String in ipSummary) {

            pieData.push({ sourceIp: key, activityCount: ipSummary[key] });

          }

           

          Then assign pieData to your Pie, with nameField as sourceIp and field as activityCount.

          • 2. Re: Pie Chart summarizing grid data
            mgargiullo Level 1

            Cool...  So if my XML looks like this:

             

            <options>

            <option>

              <datetime>2008-04-21 14:15:49</datetime>

              <origin>stone</origin>

              <action>reject</action>

              <rule>default</rule>

              <srcip>192.168.93.64</srcip>

              <dstip>192.168.201.10</dstip>

              <dport>988/tcp</dport>

            </option>

            </options

             

            And datagrid dataprovider is {eventData},

             

            eventData = event.result.option as XMLList;

             

            would it be:

             

             

            var ipSummary:Object = {};

            for each (var record:Object in eventData) {

              ipSummary[record.srcip] = (ipSummary[record.srcip] || 0) + 1;

            }

            var pieData:Array = [];

            for (var key:String in ipSummary) {

              pieData.push({ srcip: key, activityCount: ipSummary[key] });

            }

             

            The PieChart would look like:

             

            <mx:PieChart id="piechart2" dataProvider="{pieData}" showDataTips="true">

            <mx:series>

              <mx:PieSeries id="pieact" displayName="Source IP" field="activityCount"/>

            </mx:series>

            </mx:PieChart>

             

             

            Obviously I'm New at Flex...  

            • 3. Re: Pie Chart summarizing grid data
              msakrejda Level 4

              I think that's more-or-less the right approach. XML works a little differently because of e4x, but the general idea is still applicable. Make sure to set the nameField in your PieSeries.

              1 person found this helpful
              • 4. Re: Pie Chart summarizing grid data
                mgargiullo Level 1

                I couldn't get it to work.  In the end, I've found it easier to modify the source XML.  Not my first choice, and I'll have to revisit this.

                 

                In the mean time, if anyone has additional ideas on how to summarize data within and XMLList, I'd love to hear it.

                 

                Thanks,

                 

                Mike