arbor.js
Réalisez un histogramme avec CSS
Dans cet exemple, je n'utilise pas de JavaScript, ni aucune application en arrière-plan. Tout ce sur quoi je compte est un balisage bien formé et du CSS. Donc, l'objectif est de présenter des données sous forme graphique. Si cela n'a pas de sens en raison de mes piètres capacités d'explication :) disons que ce que je vais faire est transformer ceci : en cela : uniquement avec du css. Dans mon exemple, j'ai utilisé une période des 12 derniers jours et présenté mon niveau d'énergie au travail en pourcentage, 100% étant l'énergie la plus élevée que j'ai jamais déployée dans un travail. Quoi qu'il en soit, pour la structure de ce type de données, j'ai choisi la liste de définitions. La définition du titre contient le titre du jour : Et la description des définitions contient la valeur À l'intérieur de l'élément de description des définitions je vais ajouter un span et un élément em imbriqués. Alors la description de définition ressemble maintenant à ceci: Passons aux choses sérieuses.
RGraph - Free HTML5 and JavaScript charts
Introduction aux APIs graphiques d’HTML5: SVG & Canvas (2/2) - David Rousset
Nous allons voir ici les scénarios clés d’utilisation de canvas ou SVG après avoir vu les bases dans l’article précédent. Cet article fait donc parti de cette série : 1 – les bases de SVG et de Canvas 2 – les scénarios clés d’utilisation de ces 2 jeux d’APIs En complément, il existe un cours MVA de 40 min en français et en vidéo reprenant la base de cet article (y ajoutant d’ailleurs en plus un peu de WebGL) : Graphismes HTML5 grâce à SVG, Canvas 2D et WebGL (module 2). Le but du jeu étant de vous donner quelques éléments de réponse et des orientations d’usage pour vous aider à choisir le mode potentiellement le plus adapté à vos besoins. Tableau récapitulatif des grandes différences Commençons tout d’abord par rappeler les grandes différences entre <canvas> et SVG : Pour ceux qui connaissent la programmation sur Windows Phone 7, vous savez que vous avez 2 choix possibles pour vos interfaces: XNA ou Silverlight (avant l’arrivée de Mango qui peut les mélanger). Bref, vous voyez l’idée. Voilà.
Gantt - Editable JavaScript DHTML Gantt Chart with Rich API
dhtmlxGantt is an open source JavaScript Gantt chart that helps you visualize a project schedule in a nice-looking chart. It can show the dependencies between tasks as lines and allows you to set up different relationships between tasks (finish-to-start, start-to-start, end-to-end). dhtmlxGantt provides flexible API and a large number of event handles, which gives you the freedom to customize it for your needs. Basic Gantt Chart Filtering and Zooming Hours Scale Baselines Critical Path Hiding/Showing Columns Export Data Loading Big Datasets Auto Scheduling Click the appropriate images to view the demo. Features Note that some features are available in the PRO Edition only. Easy Initialization With dhtmlxGantt, you can create a comprehensive tool for visual project management and provide the end users with a convenient way to schedule their activities. Fully Customizable Intuitive User Interface Rich Feature Set Export to PDF and PNG By default, the generated PDF/PNG document includes a watermark.
Protovis
Protovis composes custom views of data with simple marks such as bars and dots. Unlike low-level graphics libraries that quickly become tedious for visualization, Protovis defines marks through dynamic properties that encode data, allowing inheritance, scales and layouts to simplify construction. Protovis is free and open-source, provided under the BSD License. It uses JavaScript and SVG for web-native visualizations; no plugin required (though you will need a modern web browser)! Although programming experience is helpful, Protovis is mostly declarative and designed to be learned by example. Protovis is no longer under active development.The final release of Protovis was v3.3.1 (4.7 MB). This project was led by Mike Bostock and Jeff Heer of the Stanford Visualization Group, with significant help from Vadim Ogievetsky. Updates June 28, 2011 - Protovis is no longer under active development. September 17, 2010 - Release 3.3 is available on GitHub. May 28, 2010 - ZOMG! Getting Started
Cross-Browser JavaScript/HTML5 Charts - dhtmlxChart
dhtmlxChart is a JavaScript charting library for generating cross-browser HTML5 charts. It supports the most common chart types: line, spline, area, bar, pie, donut, scatter, and radar charts. For complex charting needs, you can create a chart series, plotted separately side by side, or stacked. You can also display a combination of different charts types on a single chart (e.g. combine line and bar charts). The charts can be loaded from XML, JSON, JavaScript array, or CSV and updated on the fly (by using Ajax) to show changing graphical data. Live demos Area Charts Bar Charts Column Charts Donut Chart Line Charts Pie Chart Radar Charts Scatter Charts Spline Charts The dhtmlxChart library is written in JavaScript using Canvas and works in all major web browsers: IE, FF, Safari, Opera, Chrome, or any other browsers based on Mozilla or the Webkit engine. As part of DHTMLX toolkit, dhtmlxChart is compatible with other DHTMLX components. View Feature Details Editions and Packages Licenses Download
Crossfilter
Fast Multidimensional Filtering for Coordinated Views Crossfilter is a JavaScript library for exploring large multivariate datasets in the browser. Crossfilter supports extremely fast (<30ms) interaction with coordinated views, even with datasets containing a million or more records; we built it to power analytics for Square Register, allowing merchants to slice and dice their payment history fluidly. Since most interactions only involve a single dimension, and then only small adjustments are made to the filter values, incremental filtering and reducing is significantly faster than starting from scratch. Crossfilter uses sorted indexes (and a few bit-twiddling hacks) to make this possible, dramatically increasing the performance of live histograms and top-K lists. For more details on how Crossfilter works, see the API reference. Example: Airline on-time performance February 28, 2001 236 mi. +139 min. 304 mi. +83 min. 569 mi. +172 min. 646 mi. +97 min. 370 mi. +73 min. 325 mi. +92 min. +16 min. 361 mi.
JS Charts - Free JavaScript charts
