2009-09-24 6 views
5

Je suis à la recherche d'un graphique simple et facile à intégrer pour afficher les statistiques de ventes dans une application Web.Graphiques PHP/Javascript rapides et faciles

Je vais essentiellement lui fournir le nom du mois, et un nombre numérique de ventes au cours de ce mois. J'aimerais qu'il trace un graphique montrant les statistiques.

Quelle est la meilleure solution pour cela? Je préférerais quelque chose d'attrayant mais toujours facile à intégrer

Répondre

7

Google Charts. Il y a quelques enveloppeurs PHP pour cela:

+1

Un couple de plus à ajouter à la liste: http://pchart.sourceforge.net/ http://teethgrinder.co.uk/open-flash-chart-2/ –

+0

@Phill: ce ne sont pas pour les graphiques Google Je n'ai répertorié que les wrappers Google Maps. – cletus

2

Vous pouvez utiliser le plugin jQuery visualize, c'est un composant personnalisable et facile à utiliser, il utilise l'élément html donc vous devrez vérifier la compatibilité du navigateur.

jQuery Visualize

1

La meilleure et la solution la plus simple serait d'utiliser amCharts (http://amcharts.com/). C'est un composant flash (peut-être pas ce que vous cherchez), mais ce serait toujours mon choix.

1

Si vous n'avez pas besoin d'un graphique très sophistiqué, vous pouvez dessiner un graphique à barres simple avec du code HTML simple. J'ai vu des concepteurs d'interface utilisateur rendre cette technique très impressionnante. L'avantage est que vous n'avez pas besoin d'une bibliothèque supplémentaire ou que vous ne vous souciez pas des performances ou du poids de la page.

Comme un exemple simple de ce que je veux dire:

<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> 
Questions connexes