examples/charts/grouped_columns.svg

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg height="600" version="1.1" width="800" xmlns="http://www.w3.org/2000/svg"><g><rect fill="#f9f9f9" height="600" width="800" x="0" y="0" /><g transform="translate(40 40)"><g transform="translate(32 0)"><text fill="#333" font-family="Monaco" font-size="16" x="0" y="0">Columns</text><g transform="translate(0 20)"><g transform="translate(0 0)"><rect fill="#d190b6" height="10" width="10" x="0" y="-10" /><text fill="#666" font-family="Monaco" font-size="14" x="14" y="0">Hello</text></g><g transform="translate(86 0)"><rect fill="#51b2e5" height="10" width="10" x="0" y="-10" /><text fill="#666" font-family="Monaco" font-size="14" x="14" y="0">World</text></g><g transform="translate(172 0)"><rect fill="#d365ba" height="10" width="10" x="0" y="-10" /><text fill="#666" font-family="Monaco" font-size="14" x="14" y="0">Goodbye</text></g><g transform="translate(274 0)"><rect fill="#168dd9" height="10" width="10" x="0" y="-10" /><text fill="#666" font-family="Monaco" font-size="14" x="14" y="0">Yellow</text></g></g></g><g transform="translate(0 38)"><g transform="translate(32 0)"><g class="axis bottom"><g class="tick"><line stroke="#eee" stroke-width="1" x1="114.6666666666666666666666666" x2="114.6666666666666666666666666" y1="0" y2="464.0" /><text dy="1em" fill="#9c9c9c" font-family="Monaco" text-anchor="middle" x="114.6666666666666666666666666" y="468.0">first</text></g><g class="tick"><line stroke="#eee" stroke-width="1" x1="343.9999999999999999999999999" x2="343.9999999999999999999999999" y1="0" y2="464.0" /><text dy="1em" fill="#9c9c9c" font-family="Monaco" text-anchor="middle" x="343.9999999999999999999999999" y="468.0">second</text></g><g class="tick"><line stroke="#eee" stroke-width="1" x1="573.3333333333333333333333332" x2="573.3333333333333333333333332" y1="0" y2="464.0" /><text dy="1em" fill="#9c9c9c" font-family="Monaco" text-anchor="middle" x="573.3333333333333333333333332" y="468.0">third</text></g></g><g class="axis left"><g class="tick"><line stroke="#eee" stroke-width="1" x1="-4" x2="688.0" y1="306.6666666666666666666666667" y2="306.6666666666666666666666667" /><text dy="0.32em" fill="#9c9c9c" font-family="Monaco" text-anchor="end" x="-8" y="306.6666666666666666666666667">2.5</text></g><g class="tick"><line stroke="#eee" stroke-width="1" x1="-4" x2="688.0" y1="153.3333333333333333333333333" y2="153.3333333333333333333333333" /><text dy="0.32em" fill="#9c9c9c" font-family="Monaco" text-anchor="end" x="-8" y="153.3333333333333333333333333">5</text></g><g class="tick"><line stroke="#eee" stroke-width="1" x1="-4" x2="688.0" y1="0" y2="0" /><text dy="0.32em" fill="#9c9c9c" font-family="Monaco" text-anchor="end" x="-8" y="0">7.5</text></g><g class="tick"><line stroke="#a8a8a8" stroke-width="1" x1="-4" x2="688.0" y1="460" y2="460" /><text dy="0.32em" fill="#9c9c9c" font-family="Monaco" text-anchor="end" x="-8" y="460">0</text></g></g><g><g class="series grouped-columns"><rect fill="#d190b6" height="61.3333333333333333333333333" width="102.2000000000000000000000000" x="11.46666666666666666666666666" y="398.6666666666666666666666667" /><rect fill="#51b2e5" height="306.6666666666666666666666667" width="102.2000000000000000000000000" x="114.6666666666666666666666667" y="153.3333333333333333333333333" /><rect fill="#d190b6" height="429.3333333333333333333333333" width="102.2000000000000000000000000" x="240.8000000000000000000000000" y="30.6666666666666666666666667" /><rect fill="#d365ba" height="245.3333333333333333333333333" width="102.2000000000000000000000000" x="344.0000000000000000000000000" y="214.6666666666666666666666667" /><rect fill="#d190b6" height="429.3333333333333333333333333" width="67.8000000000000000000000000" x="470.1333333333333333333333333" y="30.6666666666666666666666667" /><rect fill="#d365ba" height="184.0" width="67.7999999999999999999999999" x="538.9333333333333333333333333" y="276.0" /><rect fill="#168dd9" height="245.3333333333333333333333333" width="67.8000000000000000000000000" x="607.7333333333333333333333332" y="214.6666666666666666666666667" /></g></g></g></g></g></g></svg>