Scalable Bar Chart?

Discuss SVG code, accessible via the XML Editor.
interlocked
Posts: 1
Joined: Mon Apr 02, 2012 7:37 am

Scalable Bar Chart?

Postby interlocked » Mon Apr 02, 2012 7:54 am

Hello,

I'm trying to come up with a bar chart that is scaled dependent on its parent (it doesn't have a "fixed" size, not coded as x by y pixels, etc.) but am running into difficulty. Specifically, I'm finding it tricky aligning graphics with the text on the axes. Here's what I have so far:-

Code: Select all

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
 "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
 viewBox="0 0 800 640" preserveAspectRatio="xMidYMid meet">
  <g stroke="#000000" stroke-linecap="round">
    <line x1="2em" y1="1em" x2="2em" y2="600"/>
    <line x1="2em" y1="600" x2="800" y2="600"/>
  </g>
  <g transform="translate(16,600) scale(16,-10)">
    <g fill="#F0F0F0">
      <rect x="0" y="0" width="1" height="37"/>
      <rect x="1" y="0" width="1" height="44"/>
      <rect x="2" y="0" width="1" height="39"/>
      <rect x="3" y="0" width="1" height="41"/>
      <rect x="4" y="0" width="1" height="39"/>
      <rect x="5" y="0" width="1" height="41"/>
      <rect x="6" y="0" width="1" height="33"/>
      <rect x="7" y="0" width="1" height="37"/>
      <rect x="8" y="0" width="1" height="43"/>
    </g>
    <g fill="#C0FFFF">
      <rect x="9" y="0" width="1" height="35"/>
      <rect x="10" y="0" width="1" height="40"/>
      <rect x="11" y="0" width="1" height="26"/>
      <rect x="12" y="0" width="1" height="34"/>
      <rect x="13" y="0" width="1" height="31"/>
      <rect x="14" y="0" width="1" height="35"/>
      <rect x="15" y="0" width="1" height="40"/>
      <rect x="16" y="0" width="1" height="48"/>
      <rect x="17" y="0" width="1" height="42"/>
      <rect x="18" y="0" width="1" height="36"/>
    </g>
    <g fill="#FFC0E0">
      <rect x="19" y="0" width="1" height="32"/>
      <rect x="20" y="0" width="1" height="32"/>
      <rect x="21" y="0" width="1" height="29"/>
      <rect x="22" y="0" width="1" height="46"/>
      <rect x="23" y="0" width="1" height="41"/>
      <rect x="24" y="0" width="1" height="42"/>
      <rect x="25" y="0" width="1" height="47"/>
      <rect x="26" y="0" width="1" height="45"/>
      <rect x="27" y="0" width="1" height="43"/>
      <rect x="28" y="0" width="1" height="40"/>
    </g>
    <g fill="#C0FFC0">
      <rect x="29" y="0" width="1" height="45"/>
      <rect x="30" y="0" width="1" height="46"/>
      <rect x="31" y="0" width="1" height="55"/>
      <rect x="32" y="0" width="1" height="49"/>
      <rect x="33" y="0" width="1" height="52"/>
      <rect x="34" y="0" width="1" height="43"/>
      <rect x="35" y="0" width="1" height="47"/>
      <rect x="36" y="0" width="1" height="41"/>
      <rect x="37" y="0" width="1" height="38"/>
      <rect x="38" y="0" width="1" height="55"/>
    </g>
  </g>
  <g font-family="Arial" text-anchor="end">
    <text x="1.5em" y="604">0</text>
    <text x="1.5em" y="504">10</text>
    <text x="1.5em" y="404">20</text>
    <text x="1.5em" y="304">30</text>
    <text x="1.5em" y="204">40</text>
    <text x="1.5em" y="104">50</text>
    <text x="1.5em" y="4">55</text>
  </g>
</svg>

As you can see, I have defined a viewBox of 800x640, which kind of goes against what I said, but in a way specifies the aspect ratio.

I would like it so that the lines of the axes are aligned so that they are always next to the labels.
I would also like it so that each of the category labels at the bottom (not in the source because I couldn't get them to work) fit exactly inside the width of a bar.
The bars should have a single pixel stroke, but I can't seem to do that and have them fully scalable. One trick I tried was embedding another svg element and rendering the bars in there, scaling that with the chart area. As soon as I tried applying a stroke, everything went black. :(

Any ideas, or a link to somewhere that has done this before?

User avatar
LiquidAsh
Posts: 71
Joined: Fri Apr 22, 2011 11:35 pm
Contact:

Re: Scalable Bar Chart?

Postby LiquidAsh » Wed Apr 18, 2012 11:51 pm

I think you'll need to go through and make these alignments on at a time.

Re: I would like it so that the lines of the axes are aligned so that they are always next to the labels.
1) select the left bar, and then hold shift to also select the numbers
2) click the upper-left icon in the alight and distribute dialog to align the numbers with the left side of your bars (be sure that the relative to mode is set to first selected)
3) with the numbers selected, hold ctrl and shift before pressing G to ungroup the numbers
4) align the top number with the top of your graph, and the bottom number with the bottom of the graph
5) then select all of the numbers and choose to distribute them with equal amount of horizontal space (under the align and distribute dialog, this is one icon to the left of the bottom left icon in the distribute pane)

Re: I would also like it so that each of the category labels at the bottom (not in the source because I couldn't get them to work) fit exactly inside the width of a bar.

This will also require more un-grouping (of your bars and labels), and then using the alignment tools to move them into place.

Re: The bars should have a single pixel stroke, but I can't seem to do that and have them fully scalable.

In the main programs second toolbar from the top, next to the word "Affect", the first of which allows you to toggle whether the stroke of an object is scaled along with the object itself. I believe that you may want to turn this off.

chriswww
Posts: 383
Joined: Fri Nov 19, 2010 3:04 pm

Re: Scalable Bar Chart?

Postby chriswww » Fri Apr 20, 2012 1:41 pm

have a look at the (early version at moment) nicecharts extension. it renders bar and pie charts with labels. looking at the output svg might provide some clues as to how the developer made it so things line up? just a thought.

there's a lengthy post somewhere on the web which is about using xml input data and transforming it whith xslt into nice pretty charts. i'm sure the explanations and techniques there could help structuring it right. this is the one i think http://fgeorges.blogspot.com.au/2008/04 ... -xslt.html
There's also an old carto.net example http://www.carto.net/svg/samples/xslt/


Return to “SVG / XML Code”