0

I am trying to place two svg files side by side in a web page. This I have done using susy to create the spans, first one is 2 columns wide, the second 10 columns. I place a narrow bar graph in the first span, and a wide line graph in the second span.

The problem I am having is scaling the graphs. they look like this: enter image description here

But I want them to look more like this: enter image description here

They are svg files generated with pygal and I achieved the second image by forcing a size in pygal, but it's not elegant and fails wehn the screen size changes.

How can I make the svg bar chart scale the height without scaling the width and do it dynamically in a web browser instead of manually changing the size in pygal? I also cant manually edit the svg files as they are generated via another system and update frequently.

Rob
  • 2,511
  • 2
  • 20
  • 31

1 Answers1

0

Your graphs should load in two different divs, so that you can set a different width style for each, depending on a view-based css class (like col based classes in Twitter Bootstrap). If you load dynamic svg's (without any explicit_size setting in Pygal) you should be able to handle different window sizes.

lesingerouge
  • 1,160
  • 7
  • 14