background preloader

Rickshaw: A JavaScript toolkit for creating interactive time-series graphs

Rickshaw: A JavaScript toolkit for creating interactive time-series graphs
Graphing Toolkit Rickshaw provides the elements you need to create interactive graphs: renderers, legends, hovers, range selectors, etc. You put the pieces together. See Demo → Built on d3.js It's all based on d3 underneath, so graphs are drawn with standard SVG and styled with CSS. Open Source Rickshaw is free and open source, available under the MIT license. Getting Started Here's a minimal but complete working example. Area Graphs Lines Bars Scatterplot Interactive Legend Add a basic legend: Add functionality to toggle series' visibility on and off: Highlight each series on hover within the legend: Add drag-and-drop functionality to re-order the stack (requires jQueryUI): Interactive Hover Details Show the series value and formatted date and time on hover: Specify formatting callbacks to customize output: See the custom formatter and subclass examples for more. Annotations Add toggleable annotations: annotator.add(timestamp, message);annotator.update(); Range Slider Graphs & Data via AJAX / JSONP Tutorial

http://code.shutterstock.com/rickshaw/

Related:  Node.js | GraphicsGraphique

Cubism.js Time Series Visualization foo7.6 bar−6.2 Gallery · mbostock/d3 Wiki Wiki ▸ Gallery Welcome to the D3 gallery! More examples are available on bl.ocks.org/mbostock. PlotKit - liquidx PlotKit is a Chart and Graph Plotting Library for Javascript. It has support for HTML Canvas and also SVG via Adobe SVG Viewer and native browser support. PlotKit is fully documented and there is a quick tutorial to get you started. PlotKit is a complete rewrite of CanvasGraph. Jeditable - Edit In Place Plugin For jQuery Hi! My name is Jeditable and I am inplace editor plugin for jQuery. With few lines of JavaScript code I allow you to click and edit the content of different html elements. I am based on Dylan Verheul’s editable. For those in hurry download latest source or minified.

Backbone.js Backbone.js gives structure to web applications by providing models with key-value binding and custom events, collections with a rich API of enumerable functions, views with declarative event handling, and connects it all to your existing API over a RESTful JSON interface. The project is hosted on GitHub, and the annotated source code is available, as well as an online test suite, an example application, a list of tutorials and a long list of real-world projects that use Backbone. Backbone is available for use under the MIT software license. You can report bugs and discuss features on the GitHub issues page, on Freenode IRC in the #documentcloud channel, post questions to the Google Group, add pages to the wiki or send tweets to @documentcloud. colony Colony is a neat little visualisation tool for exploring Node projects and their dependencies using d3.js. Each file is represented as a node in the graph. If one file depends on another, a link is made between the two files. Each file is coloured based on the module they belong to. By hovering over a node, you can see the file's name, the files it depends on (light), and the files that depend on it (dark).

Angular.js Directives for nvd3.js and d3.js ~ pie chart ~ nvd3js d3js angularjs How to create a basic chart Include angularjs-nvd3-directives.js in your HTML file. Include other dependencies for nvd3.js and d3.js. In the Angular App, include nvd3ChartDirectives as a dependency. var app = angular.module("nvd3TestApp", ['nvd3ChartDirectives']); Create an Angular.js Controller, and assign json data to a scope variable. Choice Free JS Datavis Library Since there are many javascript solutions for graphics, the purpose of this article is to consider only those that popular among developers. For completeness, here is a list of libraries that have been considered, but excluded for various reasons: PlotKit - has not been updated for more than 5 years;Chronoscope - website not available;Ortho - no interactive examples;FusionCharts - no free versions;ZingChart - commercial;Protovis - is no longer under active development.

Related:  StatsD & GraphiteJSd3Data MiningJavascript Visualisation Libraries