2 Replies Latest reply on Jan 26, 2007 8:39 AM by davidmedifit

    Using a Slider with a Chart

    davidmedifit Level 1
      Any help would be appreciated, as I am stumped!

      I have a chart application that is working fine, except for when I use a slider to change the range of data to be displayed. The code is listed below, but a few things first:
      1) An image of the chart can be seen here: http://img403.imageshack.us/my.php?image=flexchart4tv.jpg - that should give you an idea of the data set I am dealing with too
      2) I believe the error is in the "ColumnSeries" tags, as I tested in the following manner:
      2a) If I remove the "ColumnSeries" tags, I see the contents of the datagrid, AND the horizontal axis filter when I use the slider (i.e., the app works just fine)
      3) The error message can be seen here: http://img444.imageshack.us/my.php?image=flexcharterror9jf.jpg

      As an aside, I also seem to get an error when I take out the datagrid - I'm not sure if that is a related issue

      The code, in its entirety is as follows - as I'm using CF for my datasource, I'm not sure how best to relate the data to you - I can give you a CFC with test data, if you don't see anything obviously wrong with my code.

      Thanks in advance.

      David

      Code is as follows:

      <?xml version="1.0" encoding="utf-8"?>
      <mx:Application xmlns:mx=" http://www.adobe.com/2006/mxml" layout="vertical"
      creationComplete="reportManager.getProTicketInformation()">
      <mx:Script>
      <![CDATA[
      import mx.utils.ArrayUtil;
      import mx.charts.*;
      import mx.controls.Alert;
      import mx.rpc.events.FaultEvent;
      import mx.collections.ArrayCollection;
      import mx.rpc.events.ResultEvent;

      [Bindable] public var slicedTicketData:ArrayCollection = new ArrayCollection();
      //[Bindable] public var qResult:ArrayCollection;
      [Bindable] public var qResult2:Array;

      public function handleQueryResult(event:ResultEvent):void{
      //qResult = event.result as ArrayCollection;
      qResult2=event.result.list.source as Array;
      slicedTicketData.source = qResult2;
      slider.maximum = qResult2.length - 1;
      slider.values = [0, qResult2.length - 1];

      }
      private function getSliderLabel(value:String):String
      {
      return qResult2[parseInt(value)].datesubmitted;
      }

      private function rangeChange():void
      {
      slicedTicketData.source = qResult2.slice(slider.values[0], slider.values[1] + 1);
      }

      ]]>
      </mx:Script>


      <mx:RemoteObject
      id="reportManager"
      destination="ColdFusion"
      source="reports"
      showBusyCursor="true">
      <mx:method name="getProTicketInformation"
      fault="Alert.show(event.fault.message)" result="handleQueryResult(event)"/>

      </mx:RemoteObject>
      <mx:SeriesInterpolate id="interpolate" elementOffset="30"/>
      <mx:DataGrid id="dg" dataProvider="{slicedTicketData.source}" hide="1"/>

      <mx:HSlider id="slider" width="180" thumbCount="2" snapInterval="1" minimum="0" dataTipPlacement="bottom"
      dataTipFormatFunction="getSliderLabel" change="rangeChange()"/>

      <mx:ColumnChart id="monthlyStats" dataProvider="{slicedTicketData.source}" type="stacked"
      showDataTips="true" width="100%" height="100%">
      <mx:horizontalAxis>
      <mx:CategoryAxis categoryField="datesubmitted" dataProvider="{slicedTicketData.source}"/>
      </mx:horizontalAxis>

      <mx:series>
      <mx:Array>
      <mx:ColumnSeries name="counter1" yField="count1" showDataEffect="{interpolate}"/>
      <mx:ColumnSeries name="counter2" yField="count2" showDataEffect="{interpolate}"/>
      </mx:Array>
      </mx:series>
      </mx:ColumnChart>

      </mx:Application>


        • 1. Re: Using a Slider with a Chart
          davidmedifit Level 1
          I created a CFC with test data - and verified the data works, and the error still occurs:

          <cffunction name="getProTicketInformation" access="remote" returntype="query">
          <cfset myQuery = QueryNew("datesubmitted, count1, count2, totalsum")>
          <cfset newRow = QueryAddRow(MyQuery)>
          <cfset temp = QuerySetCell(myQuery, "datesubmitted", "1/2/2007")>
          <cfset temp = QuerySetCell(myQuery, "count1", "11")>
          <cfset temp = QuerySetCell(myQuery, "count2", "2")>
          <cfset temp = QuerySetCell(myQuery, "totalsum", "13")>

          <cfset newRow = QueryAddRow(MyQuery)>
          <cfset temp = QuerySetCell(myQuery, "datesubmitted", "1/3/2007")>
          <cfset temp = QuerySetCell(myQuery, "count1", "5")>
          <cfset temp = QuerySetCell(myQuery, "count2", "6")>
          <cfset temp = QuerySetCell(myQuery, "totalsum", "11")>

          <cfset newRow = QueryAddRow(MyQuery)>
          <cfset temp = QuerySetCell(myQuery, "datesubmitted", "1/4/2007")>
          <cfset temp = QuerySetCell(myQuery, "count1", "8")>
          <cfset temp = QuerySetCell(myQuery, "count2", "12")>
          <cfset temp = QuerySetCell(myQuery, "totalsum", "20")>

          <cfset newRow = QueryAddRow(MyQuery)>
          <cfset temp = QuerySetCell(myQuery, "datesubmitted", "1/5/2007")>
          <cfset temp = QuerySetCell(myQuery, "count1", "6")>
          <cfset temp = QuerySetCell(myQuery, "count2", "7")>
          <cfset temp = QuerySetCell(myQuery, "totalsum", "13")>

          <cfset newRow = QueryAddRow(MyQuery)>
          <cfset temp = QuerySetCell(myQuery, "datesubmitted", "1/6/2007")>
          <cfset temp = QuerySetCell(myQuery, "count1", "11")>
          <cfset temp = QuerySetCell(myQuery, "count2", "14")>
          <cfset temp = QuerySetCell(myQuery, "totalsum", "25")>

          <cfreturn myQuery>
          </cffunction>

          Again, any help would be apprecaited.

          Cheers,

          David
          • 2. Using a Slider with a Chart
            davidmedifit Level 1
            I resolved this problem (kind of):
            I took out the "showDataEffect" properties, and the error disappeared.

            <mx:ColumnSeries name="counter1" yField="count1"/>
            <mx:ColumnSeries name="counter2" yField="count2"/>

            I"m not sure why, and I'm a little disappointed, as I really like the chart transition effects. If anyone knows what the issue is, I'd appreciate a response.

            *** Addendum ***
            It appears the problem is related to the chart series being "stacked"
            <mx:ColumnChart id="monthlyStats" dataProvider="{slicedTicketData.source}" type="stacked" .....

            It appeasr you can have the chart stacked OR use the change effect, but not both (?)




            Cheers,

            David