Interactives JavaScript graphiques pour vos projets web

J'ai récemment été recherche en frontend graphiques pour afficher aux visiteurs, principalement pour l'utilisation de nos outils à venir sur Ozzu. Mes deux choix ont été soit va être qu'un Flash basé graphique comme nous utilisons actuellement pour les sondages ici, ou un Javascript basé. J'ai préféré avoir une solution Javascript basé pour de nombreuses raisons, y compris les ayant le graphique à travailler sur l'iPhone. Comme vous devez le savoir, Flash ne fonctionne pas sur l'iPhone ou iPad.

Comme Flash basé graphiques, plus cool, que j'ai trouvé à mon avis a été FusionCharts et il semble être un choix populaire et ont en tout autre choix reste j'ai regardé, tous deux Flash et Javascript base de cartes à une exception près :

JS Highcharts

Dès que j'ai visité le site Web, j'ai été impressionné par le style des graphiques, les effets d'animation lisse et combien vous pouvez adapter les cartes en fonction de votre objectif. Voici une capture d'écran :



Prendre de nombreuses démos highcharts ici :

Galerie de démo Highcharts

Après avoir effectué plusieurs les démos, tout je peux dire, c'est wow. Il semble awesome, sa croix-navigateur compatible et sa juste comme cool comme un éclair sur le graphique. C'est tous les Javascript basée et travaille hors du cadre de jQuery, ou vous pouvez également utiliser outils Moo ou le framework Prototype au lieu de cela. Ces graphiques Javascript base interactives peut être utilisé sur vos applications web ou site Web et prend en charge de nombreux types de cartographie, y compris la ligne, spline, zone, areaspline, colonne, bar, pie et nuages de points.

Il fonctionne dans tous les navigateurs modernes, y compris Mozilla Firefox, Google Chrome, Microsoft Internet Explorer, Opera et Safari. Puisque ce graphique est Javascript toutes fondées et n'utilise aucun Flash il travaillera aussi sur iPad et pommes iPhone. Parfait ! Dans la majorité des navigateurs Highcharts des utilisations SVG pour le rendu graphique, alors qu'il utilise VML pour Internet Explorer. Internet Explorer ne pas réellement supporte SVG jusqu'à la version 9, donc cela permet les charts de travailler dans Internet Explorer 6, 7 et 8.

À noter les fonctionnalités incluent :

Gratuit pour les Non commerciales
Open Source - laisse pour vos propres modifications personnelles et flexibilité
Basé sur les technologies de navigateur natif (sans flash ou propriétaire logiciel requis)
Pas de PHP ou ASP.NET
Pure Javascript et travaille avec l'un des cadres suivants : jQuery, MooTools, ou Prototype
Plusieurs types de graphiques
Syntaxe de Configuration simple
Dynamique - vous pouvez ajouter, supprimer ou modifier le graphique en temps réel après création graphique (très cool)
Plusieurs Axes - vous permet de comparer les variables à différentes échelles (ie, la température par rapport aux précipitations)
Étiquettes de l'info-bulle
Axe - DateTime, puisque de nombreux utilisateurs ont tendance à utiliser des dates avec graphiques, Highcarts est très intelligente sur les valeurs de temps
Exportation et imprimer - si vous activez le module d'exportation, les utilisateurs peuvent exporter au format PNG, JPG, PDF ou SVG (également très cool!)
Zoom
Externe de données chargement (très cool)
Graphique inversée ou axe inversée
Rotation du texte des étiquettes

Lorsque vous allez par le biais de la Galerie de démo de Highcharts vous pouvez obtenir des idées pour toutes sortes d'utilisations différentes que vous pouvez utiliser. Comment vous pourriez en est un exemple qui se démarque à me montrer vos visites quotidiennes de Google Analytics via AJAX pour afficher un graphique à beaucoup mieux (j'ai jamais aimé les cartes Google Analytics). Une capture d'écran est ci-dessous :



Si vous prenez un coup de œil à la Highcharts Options référence vous pouvez voir comment personnalisables cette bibliothèque Javascript graphique est. Comprend toutes sortes de grandes options qui rend ceci, à mon avis, le meilleur choix pour ce que vous voulez utiliser pour les graphiques sur votre site Web. Highcharts souffle toutes les autres solutions Javascript basé hors de l'eau et il est juste comme un bien ou encore mieux que le Flash basé graphiques qui existent.

Certainement une alternative cool à l'API graphique de Google généralement utiliser. L'API Google renvoie des images, alors que ça peut être assez interactive par la porte de l'il.

Il est complètement interactive surtout lorsque combiné avec AJAX. Jetez un œil à ceci :

http://www.highcharts.com/demo/dynamic-update

Qui prend les données aléatoires réelles, et vous pouvez voir que le graphique dynamique continue de mettre à jour. Comment cool est qui ? Vous pourraient facilement faire cette démonstration AJAX basé et saisir des données du serveur si vous vouliez.