grafico - highcharts php mysql ejemplo

Gráfico de barra horizontal simple usando php

Question

He visto una aplicación de Facebook en la que al hacer clic en un botón de radio aparece un gráfico.

Como puede ver abajo:

texto alternativo http://img684.imageshack.us/img684/539/poll1.png

texto alternativo http://img694.imageshack.us/img694/3415/poll2.png

Quería saber si existe una biblioteca gráfica similar a través de la cual pueda generar el mismo gráfico en php.

Gracias,

Pankaj

Answer 1

Puede hacerlo con solo CSS al establecer la posición de fondo de una imagen de fondo de un tramo.

Digamos que el ancho máximo de la barra es de 200 píxeles. El HTML y el CSS para esta barra pueden verse más o menos así:

<label>49%</label><span class="bar">Sweaters with leggings</span>

Y CSS:

span.bar {
background: url(bar_bg.png) 0 0 repeat-y;
display: block;
width: 200px;
line-height: 20px;
}

Observe la imagen de fondo? Para eso, necesitas una imagen de 400px * 1px, donde los 200 píxeles más a la izquierda están coloreados con el color que deseas que sean las barras, el resto es blanco o transparente. Si configura este fondo en el tramo con la posición de fondo de 0 0 , la barra estará 100% coloreada, y si coloca una posición de fondo de -200px 0 , la barra estará en blanco. Por lo tanto, solo tendrá que determinar dónde establecer su posición de fondo entre estos extremos para cada uno de sus valores.

Primero debe encontrar el máximo de los valores que desea representar. El valor máximo tiene una posición de fondo de 0 0 , mientras que el valor de 0 tiene una posición de fondo de -200px 0 .

El código PHP para calcular y aplicar la posición de fondo es el siguiente:

$values = array(
49 => ''Sweaters with leggings'',
37 => ''Scarves with everything'',
14 => ''Cute knit hats and gloves'');
// Find the maximum percentage
$max = max(array_keys($values));
foreach($values as $percentage => $label) {
// Calculate the position, maximum value gets position 0, smaller values approach 200
$pos = 200 - ($percentage / $max) * 200;
// Output the label that shows the percentage
echo ''<label>''.$percentage.''%</label>'';
// Output the span, apply style rule for the background position
echo ''<span class="bar" style="background-position: -''.$pos.''px 0;">''.$label.''</span>'';
}

Si desea utilizar una barra de color diferente para el valor más alto como en su ejemplo, puede hacer otra imagen de fondo y aplicar una clase al tramo con el valor más alto:

echo ''<span class="bar ''.($value == $max ? ''bar_max'' : '''').''" style="background-position: -''.$pos.''px 0;">''.$value.''</span>'';

Y en CSS:

span.bar.bar_max {
background: url(bar_max_bg.png) 0 0 repeat-y;
}

Y eso es todo, no hay necesidad de bibliotecas DIV o externas adicionales, solo dos imágenes de fondo simples. Si eres útil, incluso puedes combinar las dos imágenes en una sola. Por favor, avíseme si esto es útil, y también si no le expliqué algo suficientemente claro.

Answer 2

PChart parece prometedor.

Esta entrada de blog detalla 6 candidatos y sus pros / contras. La mayoría de ellos tienen una representación bastante estilizada. Un vistazo rápido sugiere que el diagrama de barras de ezComponent es bastante sencillo (en términos de presentación) y quizás lo que está buscando.

Creo que el aspecto inusual de su solicitud es la orientación horizontal del diagrama de barras, pero dado que la mayoría de las bibliotecas anteriores se ven poderosas, eso no debería ser un dolor de cabeza.

Answer 3

de hecho, generar este tipo de gráfico es bastante fácil: simplemente use dos DIV s, una es una barra de 100% de ancho, otra DIV está en ese primer DIV que hace el fondo de color que usted necesita. incluso puedes incluir texto en eso. fácil, simplemente HTML / CSS.

ACTUALIZAR:

HTML:

<div class="bar">
<div class="percentage" style="width:66%">This is 66% wide div</div>
</div>

CSS:

.bar { width: 99%; border: 1px solid #000; }
.percentage { background: #000; }