title: Generating a linear, timeline-based, representation from items that consume time and items which do not, but still need space to be drawn on
body: <p>This is a question about generating an image, or any other representations, for a set of parallel data. Is is not about drawing or GUI programming but calculating positions. 
  First I'll explain a bit where I stand right now and the second image and example shows my problem.</p>
  
  <h1>Current Status</h1>
  
  <p><a href="http://www.wargsang.de/text3935.png">exampleOne-Easy http://www.wargsang.de/text3935.png</a></p>
  
  <p>I have one-dimensional objects but they are aligned by placing them on parallel "lines". Let's call this one-dimensional objects "events" which have a "Duration" as a unit of time.
  These events have a variant where nothing happens, objects with no data but a duration; A "gap"-object. </p>
  
  <p>So we get a timetable with simulatanious objects consisting of events and gaps, which is pretty easy to handle as three lists of objects.
  The visualization is simple as well: Loop over the lists and draw each object according to its duration.</p>
  
  <pre><code>class Event():
      def __init__(self, duration, displacement = 0):  #displacement is explained in the second example and the core problem of this question
          self.duration = duration
          self.displacement = displacement
          #additional data
  
      def self.draw(self, start_coordinate):
          """draw duration * 10 pixels in black"""
          #drawing code using start_coordinate to place the drawn object. see example graphic
          return duration * 10
  
  
  class Gap():
      def __init__(self, duration, displacement = 0):
          self.duration = duration
          self.displacement = displacement
          #no data
  
      def self.draw(self, start_coordinate):
          """draw duration * 10 pixels in transparent"""
          #drawing code using start_coordinate to place the drawn object. see example graphic
          return duration * 10
  
  row_one = [Event(1), Gap(1), Event(1), Gap(1), Event(1), Gap(1), Event(2)]
  row_two = [Event(1), Gap(2), Event(1), Event(1), Gap(1), Event(1), Gap(1), ]
  row_thr = [Gap(1), Event(1), Gap(1), Event(1), Gap(1), Event(3),]
  
  timetable = [row_one, row_two, row_thr]
  
  for row in timetable:
      pixelcounter = 0 # the current position.
      for item in row:
          ret = item.draw(pixelcounter) #draw on the current position. Get how width the item was
          pixelcounter += ret #save width for the next iteration        
      #instructions to move the "drawing cursor" down a few pixels so the next row does not overlap.     
  </code></pre>
  
  <h1>The Problem</h1>
  
  <p>Now to the problem. There are objects which need a graphical space but have zero duration. 
  I call this "Displacement". </p>
  
  <p><a href="http://www.wargsang.de/text4120.png">exampleTwo-Problematic http://www.wargsang.de/text4120.png</a></p>
  
  <p>Or we need objects which have duration but also have displacement. 
  This is still not a problem when we only have a single row, but synchronizing the rows is more complex and I don't have a solution for this. </p>
  
  <p>In the picture above the red blocks have zero duration and are displaced. Blue blocks have duration and are displaced, too.</p>
  
  <p><strong>Example</strong>:
  *Imagine a timetable for a conference with different speaker slots each hour (our duration-slots). Each row represents a different conference-room.</p>
  
  <ul>
  <li><p>The black blocks are speeches and maybe have a short topic written within them (graphically).</p></li>
  <li><p>Blue blocks are speeches, too, but the topic was too long to write so we need more space once. </p></li>
  <li><p>Red are notes like a room-number change. They don't take time of their own but relate to all items which come after them.*</p></li>
  </ul>
  
  <p>The task is to find a way to calulate the pixelcounter from the function above so that it is correct for each row alone but also that displacement in one row affects all other rows and creates additional space there. 
  The goal is that durations are fixed and aligned in each row. Any event or gap that should start on, for example, unit-count 4, should begin at the same absolute position. </p>
  
  <p>This means that any zero-duration/displacement object starts at a real point in time/duration but does not consume any time/duration itself so that all subsequent items start on the very same duration until the next real duration event is included. From another point of view that also means that zero-duration items start always before the events which have duration.</p>
  
  <p>In the picture we can see a rather simple case in column 2, which also means this starts the second duration slot. Eventhough there are three real events in that column that are shifted to the right because a displace item is there. 
  Column 4 has a duration item which has displacement as well. Again, All items that start in slot 5 are shifted to the right.
  Colum 6 is the most interesting and my real problem, I can't find a solution here. Again, all real events in column 6 are shifted to the right and still start at the same time. But here we have a)Displacement-Objects in two rows and two b) two objects right behind each other. 
  So it is important for the real events to know the complete displacement but also important for the second object in the third row to know that there is one more displacement item before it. </p>
  
  <p><strong>Warning</strong>: The graphical representation may suggest a table-based approach where each column has an individual width. But this is where this example ends. The real application deals with common duration of 300-10,000 per event but durations of 1 are unlikely but technically possible. So the table would have a column-width of one duration. Considering we got into the hundred thousands of complete duration (times the number of rows) this may drag down the performance.</p>
  
  <p>The data of this picture would look like this. How can I draw the second image with this data? Or what needs to be changed, I am open for all suggestions.</p>
  
  <p>Thank you very much for your time and interest. If you don't know a solution please don't hesitate to ask me questions or show me flaws of my concept, it will help me think as well.</p>
  
  <pre><code>row_one = [ Event(1), #1
              Event(0,1), Event(1), #2
              Gap(1), #3
              Event(1), #4
              Gap(1), #5
              Event(0,1), Event(1), #6
              Event(1), #7
              ] 
  row_two = [ Event(1), #1
              Event(1), #2
              Gap(1), #3
              Event(1, 0.5), #4, 0,5 is not important. we can also simply to just ints. The important bit is that it has both values.
              Event(1), #5
              Event(1), #6
              Event(1), #7
              ] 
  row_thr = [ Event(1), #1
              Event(1), #2
              Event(1), #3            
              Event(1), #4
              Event(1), #5            
              Event(0,1), Event(0,1), Event(1), #6   #Please pay attention to this case.
              Event(1), #7
              ] 
  </code></pre>