¿Cuál es una buena técnica para las barras de resultado de la encuesta?

Estoy creando algunos progtwigs de encuestas y actualmente estoy investigando técnicas para hacer barras de gráficos de resultados de encuestas. Nada complicado, solo algunas barras de resultados simples.

Me preguntaba si hay algunos mejores métodos probados y verdaderos para esto. Lo mejor que se me ocurre es tener un contenedor div para cada barra, y luego una imagen u otro elemento donde se establece el tamaño (ancho) igual al porcentaje del resultado de las opciones (css en línea).

Ejemplo de esto

texto fuerte

// Option 1 Results 
// Option 2 Results

etc …

¿Conoces alguna técnica mejor, o es así como la mayoría lo hace?

Sí, esa es una buena manera de hacerlo.

Aquí está la misma idea con más refinamiento:

Demo en vivo

HTML:

 
69 100 200 666 Over 9000!!

CSS:

 .pollBars { width: 300px; background: #ccc } .pollBars span { display: block; padding: 3px; margin: 7px 0; font: bold 14px/1 sans-serif; -moz-border-radius: 4px; border-radius: 4px; text-shadow: 1px 1px 1px #444; } .t1 { color: #fff; border: 1px solid red; background: #f85032; /* old browsers */ background: -moz-linear-gradient(top, #f85032 0%, #f16f5c 50%, #f6290c 51%, #f02f17 71%, #e73827 100%); /* firefox */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f85032), color-stop(50%,#f16f5c), color-stop(51%,#f6290c), color-stop(71%,#f02f17), color-stop(100%,#e73827)); /* webkit */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827',GradientType=0 ); /* ie */ } .t2 { color: #fff; border: 1px solid blue; background: #6db3f2; /* old browsers */ background: -moz-linear-gradient(top, #6db3f2 0%, #54a3ee 50%, #3690f0 51%, #1e69de 100%); /* firefox */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#6db3f2), color-stop(50%,#54a3ee), color-stop(51%,#3690f0), color-stop(100%,#1e69de)); /* webkit */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de',GradientType=0 ); /* ie */ }