12 Replies Latest reply: Jul 4, 2011 1:07 PM by johny blaze RSS

    Help Solutioning Line Chart - Live Data

    ehusar Community Member

      I have a situation that I could use some feedback on.  Here is the situation. I have a line chart that has 1 to 4 lines being charted.  The chart represents race data and is real time data from a hardware device. I am using the standard arrayCollection and adding values as they arrive and binding the chart to the data. All good so far.  There is a set distance that I am able to predefine so I do know what data point is the end point. I can stop the data collection at that time.

       

      My first problem is that the line chart data spans the entire chart no matter how many points I have. So let's assume that the distance is 100. I have 5 of the 100 points added to the arrayCollection. It might look like this.

       

      example1.gif

       

      I don't want this.  Since I know I will be charting 100 points, I want it to look something more like this below at the point I only have 5 of the 100 points. I assume that a NULL value is not plotted at all and not like having a 0 entry where the line would drop down to a 0 value. I want it cut off like in the screenshot.

       

      example2.gif

       

      As far as I can figure out in my testing I cannot set a pre-defined max like a bar chart can be set.If I could I think the problem would be solved.

       

      So how can I achieve he second example and build the line as the data comes in as related to the pre-defined length.

       

      One thought I have is pre-populating the arrayCollection to the length I need. If the race was to 100 then I would enter 100 entired with a value of NULL.  If I then set interpolateValues to false and started to update (not adding new) the arrayCollection this it might give me the display I want.

       

      Is there any easier way without prepopulating the arrayCollection?  I want to make sure I am not missing something obvouse on the line graph.

        • 1. Re: Help Solutioning Line Chart - Live Data
          msakrejda Community Member

          Can't you just set min and max values on the horizontal axis?


          • 2. Re: Help Solutioning Line Chart - Live Data
            ehusar Community Member

            I tried that last night without any luck. I will give it another look tonight. I thought the min/max on the hoizontal axis did not work on a line chart.  But I am probalby wrong. I will update as soon as I get home and test it again.  If it is not working will post my code.

            • 3. Re: Help Solutioning Line Chart - Live Data
              ehusar Community Member

              No luck at all setting min and max range on  line chart.  The Category Axis cannot take a min and max setting.  But you can put a min/max on the vertical asix in the Linear Axis. Here is my code.

               

              How can I set a min/max on the Category Axis?

               

              <mx:LineChart x="25" y="228" id="speed"
                      height="172" width="748"
                      dataProvider="{speedArray}"
                      backgroundElements="{bge2}" >
                     
                      <mx:verticalAxis>
                          <mx:LinearAxis
                            id="vaxis"
                            minimum="0"
                            maximum="80"
                            />
                      </mx:verticalAxis>
                           
                      <mx:verticalAxisRenderers>
                          <mx:AxisRenderer
                                showLabels="false"
                                axis="{vaxis}"
                                tickLength="0"
                                labelGap="5">
                              <mx:axisStroke>
                                 <mx:Stroke color="0xA8A8A8"/>
                              </mx:axisStroke>
                          </mx:AxisRenderer>
                      </mx:verticalAxisRenderers>   
               
                      <mx:horizontalAxis  >
                           
                         <mx:CategoryAxis
                              dataProvider="{speedArray}"
                              categoryField="time"
                              id="h1"
                              ticksBetweenLabels="false"
                               />
                      </mx:horizontalAxis>
                     
                      <mx:horizontalAxisRenderers>
                              <mx:AxisRenderer 
                                  axis="{h1}"
                                  showLabels="false" />
                      </mx:horizontalAxisRenderers>

               

                      <mx:series>
                          <mx:LineSeries yField="racerOne" >
                            <mx:lineStroke>
                              <mx:Stroke color="0xFF0000" weight="2"/>
                            </mx:lineStroke>
                          </mx:LineSeries>

               

                          <mx:LineSeries yField="racerTwo" >
                            <mx:lineStroke>
                              <mx:Stroke color="0x0000FF" weight="2"/>
                            </mx:lineStroke>
                          </mx:LineSeries>

               

                          <mx:LineSeries yField="racerThree" >
                            <mx:lineStroke>
                              <mx:Stroke color="0xE0E804" weight="2"/>
                            </mx:lineStroke>
                          </mx:LineSeries>

               

                          <mx:LineSeries yField="racerFour" >
                            <mx:lineStroke>
                              <mx:Stroke color="0x00CA00" weight="2"/>
                            </mx:lineStroke>
                          </mx:LineSeries>
                        </mx:series>
                  </mx:LineChart>

              • 4. Re: Help Solutioning Line Chart - Live Data
                msakrejda Community Member

                If your horizontal axis is graphing time, why is it a CategoryAxis?

                can't you just use LinearAxis for both horizontal and vertical?

                • 5. Re: Help Solutioning Line Chart - Live Data
                  ehusar Community Member

                  The lable on the field may be 'time' but I am trying to experiment on what gets put into 'time' to get the visual of what I want.  It started out as milliseconds being upt into time. I am not entering just a incremented number into time(1,2,3,4,5). Last night I switched to the LinearAxis and I was able to set the min and max and the line chart to grow like I need. But that created a second problem.  Entering the time won't work since there are multiple racers and they all complete the race and progress at different times. In the end I just want to show their speed over a set race distance. I don't care how long it took a racer just what their speed was a relative pace in the race.  For example what each speed was at the completed of a lap.  So in my case think of the race distance in laps. 100 laps completes the race for example. So back to the original post, if I know a race is 100 entries into my arrayCollection  I can end a participants data stream/entry.  When using time you may complete the race faster than I do so I can't use time.  But I can use laps since I know when you would complete a lap to when I complete a lat.  Graphing our speed at that point is what I want to show.

                   

                  Having multiple people on the line chart is going to be hard since they all do their laps at different points in the race. Remember this is real time data and I want the graph to post their line (speed) as soon as they hit their lap. I would have to wait for the last person to post their first lap to graph them all at the same time.  That is unless I pre-populated the arrayCollection with NULLs and just updated the position in the arrayCollection at each lap for each racer.  The reason I think this is a bad idea is that what I have been referring to as laps occur every few milliseconds.  And a race might have 1000+ laps to it.  I hope that make sense but I am probably not explaining it very well.

                   

                  Last night I experimented with creating 4 line charts. Each with their own arrayCollection bound to it.  Then set the charts background to transparent and layed them out all on top of each other.  That actually works since they are all independent of each other and can post their lap speed as they complete it.  But for some reason the lengths of the complete lines for each racer on different charts were not the same total distance on the overlayed charts.  Each racer stopped at 100 laps but their lines were not the same length.

                   

                  So now I am looking for a way to sent the length of each line that is graphed to be the same length. I think that will do it for me to get the visual I want.  I will post a graphic tonight to better visualize it of the different line sizes.

                  • 6. Re: Help Solutioning Line Chart - Live Data
                    msakrejda Community Member

                    How about separate series on the same chart? Each series can have a separate dataProvider, and you can update these independently. Since you're interested in laps, update each data source according to the current number of items (since from the description it sounds like your situation is append-only), instead of tracking the actual times. E.g., when you receive input for racerA, do something like


                    function updateRacerData(racerId:String, racerSpeed:int):void {

                      var racerData:ArrayCollection = racerDataMap[racerId];

                      racerData.addItem({ lap: racerData.length, speed: racerSpeed });

                    }

                    • 7. Re: Help Solutioning Line Chart - Live Data
                      ehusar Community Member

                      Okay, I am going to go back and put them in one chart with their own series again. Each racers will have their own arrayCollection. Each independent from the other. I now see that I don't really need to keep the lap id since that is just the position in the array anyway.   What I was doing wrong on my frist attempt was to have one data source for all the racers. So it was something like this...

                       

                      racer:0, time: 3456, speed: 0

                      racer:1, time: 3456, speed: 25

                      racer:2, time: 3456, speed: 12

                      racer:3, time: 3456, speed: 10

                      racer:0, time: 6734, speed: 10

                      racer:1, time: 6734, speed: 15

                      racer:2, time: 6734, speed: 22

                      racer:3, time: 6734, speed: 15

                       

                      That was not working since everyone would not finish at the same time based on time milliseconds and their speed.

                       

                      Having them all in one chart BUT with different arrayCollections pretty much ensures that the distance between the entries are the same.  As long as they don't get an arrayCollection enty outside of a "lap" trigger it should be fine.

                       

                      Now I just need to get home to try this out. i will update tonight with a real screenshot to show you who it looks.

                       

                      Thanks!

                      • 8. Re: Help Solutioning Line Chart - Live Data
                        ehusar Community Member

                        Wait, how can each series have a different data provider? Can you put a dataProvider on the LineSeries instead of on the AxisRender? I have not seen that before.

                        • 9. Re: Help Solutioning Line Chart - Live Data
                          msakrejda Community Member

                          Yep. I do this all the time.

                          • 10. Re: Help Solutioning Line Chart - Live Data
                            ehusar Community Member

                            Okay, I think this is working. I put the dataProvider on the LineSeries!


                            • 11. Re: Help Solutioning Line Chart - Live Data
                              ehusar Community Member

                              I wanted to send a big thanks!  Just got it working like I wanted. Here is a screenshot of the the result with two racers.

                               

                              Picture 2.png

                              • 12. Re: Help Solutioning Line Chart - Live Data
                                johny blaze Community Member

                                Hi Ehusa

                                 

                                Its been a very long search on google for a solution to this problem. I have live data coming which I am plting against the current time, I have used Datetimeaxis but did not get any result. Glad to see that you got this solved. Please see my code here http://pastebin.com/U6E3hzNm. Hope you can help or kindly paste the code that worked. many thanks in advance.

                                 

                                Johnny