background preloader

Humble software development - HumbleFinance Financial Graphs

Humble software development - HumbleFinance Financial Graphs
HumbleFinance is an HTML5 data visualization tool written as a demonstration of interactive graphing in HTML5. It is similar to the Flash tool on The tool itself is written entirely in JavaScript, using the Prototype and Flotr libraries. Demo: This demo displays historical stock data for Google from their IPO to March 5th, 2010. You can mouse over the chart for additional data, as well as zoom and pan the charts using the grey bottons. August 19, 2004 - January 11, 2005 HTML: (hide) <div id="finance"><div id="labels"><div id="financeTitle">NASDAQ:GOOG</div><div id="time"><a onclick="HumbleFinance.zoom(5);">1w</a><a onclick="HumbleFinance.zoom(21);">1m</a><a onclick="HumbleFinance.zoom(65);">3m</a><a onclick="HumbleFinance.zoom(127);">6m</a><a onclick="HumbleFinance.zoom(254);">1y</a><a onclick="HumbleFinance.zoom(1265);">5y</a></div><div id="dateRange"></div></div></div> demo.js: (hide)

Update to jQuery Visualize: Accessible Charts with HTML5 from Designing with Progressive Enhancement Posted by Maggie on 03/12/2010 Topics: accessibility dwpe book jQuery progressive enhancement A while ago, we came up with a technique for creating accessible charts and graphs that uses JavaScript to scrape data from an HTML table and generate bar, line, area, and pie chart visualizations using the HTML5 canvas element. We've updated the Visualize plugin — adding ARIA attributes to clarify the chart's role to screen reader users, so they're better informed about which elements contain useful data; and providing two style variations to demonstrate how you can use CSS to customize the charts' appearance. Visualize is one of the 12 fully-accessible, project-ready, progressive enhancement-driven widgets that accompanies our new book, Designing with Progressive Enhancement. How the Visualize plugin works The Visualize plugin parses key content elements in a well-structured HTML table, and leverages that native HTML5 canvas drawing ability to transform them into a chart or graph visualization.

RGraph: HTML5 canvas graph library based on the HTML5 canvas tag CanvasXpress - Contact 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. Nous pourrions dire que la graphique est un objet en deux dimensions. 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. Passons aux choses sérieuses.

Raphaël—JavaScript Library 8393) 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à.

Easy Graphs with Google Chart Tools Google Chart Tools provide several ways to easily add charts to any web page. Charts may be static or interactive, and in this tutorial, we'll learn how to use both of them. There are two different types of graphs that Chart Tools can generate: image charts (static graphs) and interactive charts. Image Charts.- Use the Google Chart API.Interactive Charts.- Use the Google Visualization API. Image Charts are quite easy to use, however, interactive charts are far more flexible, because they can trigger events which we can use to interact with other elements in the page. Yes, there is a super-easy way to include a chart in your page - as easy as writing a URL like this: if you copy and paste this url in your browser, you'll see the following: You can place the image anywhere in your page using the URL as the src attribute of an image tag: That's the Google Charts API. This is the base URL; we'll use it for all image chart requests. cht=p3 This is the chart type.

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

Related: