2009-09-24 8 views
5

Estoy buscando un gráfico simple y fácil de integrar para mostrar las estadísticas de ventas en una aplicación web.Gráficos de PHP/Javascript rápidos y fáciles

Básicamente le proporcionaré el nombre del mes y un número numérico de ventas en ese mes. Me gustaría que luego trace un gráfico que muestre las estadísticas.

¿Cuál es la mejor solución para esto? Preferiría algo atractivo pero fácil de integrar

Respuesta

7

Google Charts. Hay algunas envolturas de PHP para esto:

+1

Un par más para añadir a la lista: http://pchart.sourceforge.net/ http://teethgrinder.co.uk/open-flash-chart-2/ –

+0

@Phill: esos no son para Google Charts Solo he incluido los envoltorios de Google Charts. – cletus

2

Puede usar el plugin jQuery visualize, es un componente personalizable y fácil de usar, este usa el elemento html, por lo que deberá comprobar la compatibilidad del navegador.

jQuery Visualize

1

El mejor y la solución más fácil sería utilizar amCharts (http://amcharts.com/). Es un componente flash (tal vez no lo que está buscando), pero siempre sería mi elección.

1

Si no necesita un gráfico muy sofisticado, puede dibujar un gráfico de barras simple con un simple HTML. He visto diseñadores de interfaz de usuario hacer que esta técnica se vea realmente impresionante.

Lo mejor es que no necesita una biblioteca adicional o se preocupa por el rendimiento o el peso de la página.

Como un simple ejemplo de lo que quiero decir:

<html> 
    <body> 
    <div width="100%"> 
     <div style="float:left; width:70px">Jan</div> 
     <div style="background: #0A0; width: 300px; margin-left:70px" >$300</div> 
    </div> 
    <div width="100%"> 
     <div style="float:left; width:70px">Feb</div> 
     <div style="background: #A00; width: 122px; margin-left:70px" >$122</div> 
    </div> 
    <div width="100%"> 
     <div style="float:left; width:70px">Mar</div> 
     <div style="background: #00A; width: 421px; margin-left:70px" >$421</div> 
    </div> 
    <div width="100%"> 
     <div style="float:left; width:70px">Apr</div> 
     <div style="background: #0AA; width: 17px; margin-left:70px" >$17</div> 
    </div> 
    </body> 
</html> 
Cuestiones relacionadas