1 Reply Latest reply on Apr 3, 2008 7:14 AM by flashharry!

    Help we column chart display

    flashharry! Level 1
      HI,
      I'm extending my dashboard to display printer information.

      From the sample data below I want to display, each printers job total count for each quarter.
      Bottom access should show Q2-07,Q3-07-Q1-08 vertical axis should show integers.
      From the table below I want to display in each quarter a column bar for each printer showing total jobs, and another column in same quarter showing page total for each printer

      AEc2880->JOBCOUNT:AEc2880->PAGECOUNT:CreativeFirey240->JOBCOUNT:CreativeFirey240->PAGECOUN T:

      I can either get the grid to show quarters but only on printer, or printers but only one quarter.
      <ColumnChart id="colChart" width="100%" height="100%" showDataTips="true" visible="true" >
      <horizontalAxis>
      <CategoryAxis categoryField="Quarter" />
      </horizontalAxis>
      <series>
      <ColumnSeries yField="JOBCOUNT" xField="Quarter" />
      <ColumnSeries yField="JOBCOUNT" xField="Quarter" />
      <ColumnSeries yField="JOBCOUNT" xField="Quarter" />
      </series>
      </ColumnChart>

      +------------------+----------+-----------+---------+-------------------+
      | PrinterName | JOBCOUNT | PAGECOUNT | Quarter | printStartQuarter |
      +------------------+----------+-----------+---------+-------------------+
      | AEc2880 | 748 | 1034 | Q2-07 | 2007-04-01 |
      | CreativeFirey240 | 2404 | 5454 | Q2-07 | 2007-04-01 |
      | AEc2880 | 2248 | 6552 | Q3-07 | 2007-07-01 |
      | AEiR5055 | 979 | 2845 | Q3-07 | 2007-07-01 |
      | CreativeFirey240 | 5017 | 12321 | Q3-07 | 2007-07-01 |
      | AEc2880 | 1439 | 6256 | Q4-07 | 2007-10-01 |
      | AEiR5055 | 1753 | 5587 | Q4-07 | 2007-10-01 |
      | CreativeFirey240 | 4731 | 9990 | Q4-07 | 2007-10-01 |
      | AEc2880 | 1817 | 2707 | Q1-08 | 2008-01-01 |
      | AEiR5055 | 1158 | 2817 | Q1-08 | 2008-01-01 |
      | CreativeFirey240 | 3822 | 9665 | Q1-08 | 2008-01-01 |
      +------------------+----------+-----------+---------+-------------------+

      Thanks in advance
      Dean
        • 1. Re: Help we column chart display
          flashharry! Level 1
          Sorry this losses formating:
          I'm posting this hoping that it will point others in a direction right or wrong. Also hoping to get some feed back on improvements or even 'dude what where you smoking this code is awful'.


          Test Data I'm playing with from mysql.:
          +------------------+----------+-----------+---------+-------------------+
          | PrinterName | JOBCOUNT | PAGECOUNT | Quarter | printStartQuarter |
          +------------------+----------+-----------+---------+-------------------+
          | AEc2880 | 748 | 1034 | Q2-07 | 2007-04-01 |
          | CreativeFirey240 | 2404 | 5454 | Q2-07 | 2007-04-01 |
          | AEc2880 | 2248 | 6552 | Q3-07 | 2007-07-01 |
          | AEiR5055 | 979 | 2845 | Q3-07 | 2007-07-01 |
          | CreativeFirey240 | 5017 | 12321 | Q3-07 | 2007-07-01 |
          | AEc2880 | 1439 | 6256 | Q4-07 | 2007-10-01 |
          | AEiR5055 | 1753 | 5587 | Q4-07 | 2007-10-01 |
          | CreativeFirey240 | 4731 | 9990 | Q4-07 | 2007-10-01 |
          | AEc2880 | 1817 | 2707 | Q1-08 | 2008-01-01 |
          | AEiR5055 | 1158 | 2817 | Q1-08 | 2008-01-01 |
          | CreativeFirey240 | 3822 | 9665 | Q1-08 | 2008-01-01 |
          +------------------+----------+-----------+---------+-------------------+

          Each row is a printerName, JobCount, PageCount,Quarter, printStartQuarter (first day of each quarter)

          Requirements:

          I need to display summaries in a column chart of Queue (printer) usage. For each Queue summary I need to show total jobs sent (printed) and total pages sent (printed) for a given period.

          The one I'm dealing with here is quarterly view. With the sample data above I want to show for each quarter total job, total pages for AEc2880,CreativeFirey240 and AEIR5055

          If I use the data has is, I only get one queue per quarter. I need to have each queue its own column, twice. One for total jobs and total pages. Then one row per quarter for it to work.


          AEc2880_TJ - AEc2880_TP - CreativeFirey240_TJ - CreativeFirey240_TP - AEIR5055_TJ - AEIR5055_TJ - Quater - printStartQuarter.

          Now for the big issue, the queues are dynamic. The test data is from 3 queues only. There could be 1 to n number of queues and not all quarters will be the same as queues get added and deleted.

          This is how I approached this in AS Flex 2, I have flex 3 but not installed yet, I can not find much info on the new grouping classes to see if they will help.
          Most examples are with the advanced data grid. There is also very little information on charting bar the basics around.

          My data comes in from PHP middle ware as JSON.

          First think we need to do is pass the de-serialized array into a function that finds all the unique queue names.

          [Bindable]
          private var groupQueueEvent:ArrayCollection;
          private function setUpHandler(event:ResultEvent):void{
          //get the raw JSON data and cast to String
          var rawData:String = String(event.result);
          //decode the data to ActionScript using the JSON API
          //in this case, the JSON data is a serialize Array of Objects.
          var arr:Array = (JSON.decode(rawData) as Array);

          //Send array for processing.
          groupPrinters(arr);


          }
          //function that takes quartly events and finds unique queues
          private function populateComboYearArray(eventsArray:Array):Array {
          var queueArrayHashMap : Object = new Object(); //create hass array, used to make sure array unique
          var queueArray : Array = new Array; //create arry to hold queues

          //now run through each row of passed data looking for queue names
          for (var i:int = 0; i < eventsArray.length; i++)
          {
          //check to see if this queue is all ready in hash.
          if (queueArrayHashMap[eventsArray
          .PrinterName] == undefined){
          //it not in hash so add it
          queueArrayHashMap[eventsArray .PrinterName] = new Object();
          // now add the queue array
          queueArray.push(eventsArray
          .PrinterName);
          }
          }
          return queueArray; //send back final array
          }
          private function groupPrinters(data:Array):void {
          //create array to hold unique names
          var printerNames:Array = new Array();
          //process data and get unique queue names back
          printerNames = populateComboYearArray(data);

          var printGroup:Array = new Array;//hold the final array
          var tempRowArray:Object;//used to build each row of new data
          var pgCountColumnName:String;//used to build queue names for page count
          var jobCountColumnName:String;/used to build queue names for job count
          for (var printRow:int = 0; printRow < data.length; ) { //run through each row of data
          tempRowArray = new Array; //create a new row each time
          // we will always want the Quarter and printStartQaurter in every row so add now
          tempRowArray.Quarter = data[printRow].Quarter;
          tempRowArray.printStartQuarter = data[printRow].printStartQuarter;
          // now for the tricky bit, we need to process each queue name
          for (var i:int = 0; i < printerNames.length; i++) {
          // we need to see if we have a queue name match not all quarters will
          // have the same queue names
          if (printerNames .PrinterName == data[printRow].PrinterName) {
          //if match found add to our row
          //make dynamic column name would like to use queue name but may be tainted
          pgCountColumnName = "column" + String(i) + "pgcount";
          jobCountColumnName = "column" + String(i) + "jbcount";
          now create the columns with the names and add the data to them
          tempRowArray[pgCountColumnName] = data[printRow].PAGECOUNT;
          tempRowArray[jobCountColumnName] = data[printRow].JOBCOUNT;
          // we found a match so move along in outer loop
          printRow++;
          }
          // we didn't find a match don't advance outer loop
          }
          // we checked all the queue names advanced outer loop where needed,
          // next time trough we should be in new quarter

          printGroup.push(tempRowArray);// push temporary row to our array

          }
          //assign are data to an array collection
          groupQueueEvent = new ArrayCollection(printGroup);
          //assign data to test grid for checking
          detailedPrintReport.dataProvider = groupQueueEvent;
          //assign data to chart.
          colChart.dataProvider = groupQueueEvent;

          //now make up the dynamic series
          //PLEASE NOTE this code does not work yet still playing with it
          // testing purpose hard coded in mxml
          /*
          var dynamicColumnSeries:ColumnSeries = new ColumnSeries;
          colChart.series = [dynamicColumnSeries];
          for ( i = 0; i < printerNames.length; i++) {
          pgCountColumnName = "column" + String(i) + "pgcount";
          jobCountColumnName = "column" + String(i) + "jbcount";
          dynamicColumnSeries = new ColumnSeries;
          dynamicColumnSeries.yField = 'jobCountColumnName;
          dynamicColumnSeries.xField="Quarter";
          dynamicColumnSeries.displayName = printerNames
          .PrinterName;
          colChart.series.push(dynamicColumnSeries);
          dynamicColumnSeries = new ColumnSeries;
          dynamicColumnSeries.yField = pgCountColumnName;
          dynamicColumnSeries.displayName = printerNames .PrinterName;
          colChart.series.push(dynamicColumnSeries);
          }
          */

          }

          <ColumnChart id="colChart" width="100%" height="100%" showDataTips="true" visible="true" >
          <horizontalAxis>
          <CategoryAxis categoryField="Quarter" title="Quartly" labelFunction="defineLabel"/>
          </horizontalAxis>
          <series>
          <ColumnSeries yField="column0jbcount" xField="Quarter" />
          <ColumnSeries yField="column0pgcount" xField="Quarter" />
          </series>
          </ColumnChart>
          <DataGrid id="detailedPrintReport" visible="true" width="100%" height="100%"/>