Here is an example graph containing "stacked bars" or perhaps better stated "overlaid bars":
http://leo.cuckoo.org/projects/SVG-TT-Graph/examples/bar_multi.svg
If you look in that file, you will find that each set of data that corresponds to each set of stacked bars is preceded by the code:
<!-- find the lowest data value for each dataset -->
Here are lines from the SVG file representing two sets of bars (omitting many newline characters):
<!-- find the lowest data value for each dataset -->
<path d="M306 280 V145 h82 V280 Z" class="fill1"/>
<text x="352" y="139" class="dataPointLabel">45</text>
<path d="M306 280 V211 h82 V280 Z" class="fill2"/>
<text x="352" y="205" class="dataPointLabel">23</text>
<!-- find the lowest data value for each dataset -->
<path d="M398 280 V79 h82 V280 Z" class="fill1"/>
<text x="444" y="73" class="dataPointLabel">67</text>
<path d="M398 280 V52 h82 V280 Z" class="fill2"/>
<text x="444" y="46" class="dataPointLabel">76</text>
By the way, lowercase commands are relative and UPPERCASE are absolute.
For the code:
<path d="M398 280 V52 h82 V280 Z" class="fill2"/>
"M398 280" moves the cursor to position 398, 280
"V52" draws from that point to the absolute vertical position 52 units from the top of the image.
"h82" draws a horizontal line 82 units long.
"V280" draws a vertical line down to the absolute vertical position 280 units from the top of the image.
"Z" returns the cursor to its starting point (i.e. 398,280), thus completing the box.
class="fill2" simply references the coloring scheme "fill2" that is defined earlier in the file.
The new algorithm we need to implement your side-by-side clusters of bars would need to provide enough space at each "x-value" for the desired number of bars. We would then divide up the space for each bar etc . . .
Is that helpful?
By the way, the code that generates the SVG is written using the Template Toolkit.
Anyway, I hope this is helpful. Feel free to ask for further clarifications, help, etc.
--Christopher (molecules)