Diagramm rechts ausrichten

[Friedel]

Hallo,

ich versuche seit Stunden vergeblich, ein Diagramm in einem Div so anzeogen zu lassen, dass das rechte Ende des Diagramms sichtbar ist. Das Diagramm wird auf der Basis von SVG/Tutorials/Datenvisualisierung/Liniendiagramme erzeugt.

Hier ist der Quellcode des Koordinatensystems. Es geht also um ein Div, in dem ein (anfangs) 2000px breites Svg-Element ist. Da der Body maximal 60em breit ist, sollte das Div in jedem Fall kleiner als das Svg sein.

In diesem Svg-Element soll ein Diagramm erzeugt werden, das jeden Monat 10px breiter wird und für jeden Monat einen Punkt im Koordinatensystem enthält. Die aktuellen Punkte werden jeweils rechts angezeigt. Die waagerechte Achse ist also die Zeitachse und rechts ist das aktuelle Datum.

Natürlich soll der aktuelle Wert beim Laden der Seite angezeigt werden. Das Svg soll also rechtsbündig im Div angeordnet sein, sodass man nach links zu den alten Daten scrollen kann.

Wie erreiche ich das?

      <div id="Diagrammbox">
      	<svg>
        	<defs>
          	<pattern id="grid" patternUnits="userSpaceOnUse" width="10" height="10" x="0" y="0">
            	<path d="M0,0 v10 h10" stroke="#57c4ff" fill="none" />
          	</pattern>
        	</defs>
        	<rect x="0" y="0" width="2000" height="600" fill="url(#grid)"></rect>
      	</svg>
      </div><!-- Ende Diagrammbox -->

body {
	max-width: 60em;
	margin: 0 auto;
	font-family:"Sans Serif";
}

svg {
	right: 0;
	margin-right: 0;
	background: #fcc;
	border: thin dotted #999;
	width: 2000px;
	height: 600px;
	overflow: visible;
	padding: 0;
	margin: 0;
}

rect {
	margin-right: 0;
}


#Diagrammbox {
	position: relative;
	border: thin solid #999;
	width: 99%;
	overflow: scroll;
	padding: 0;
}