Best jQuery Chart & Graph Plugins & Tutorials with Demo

JointJS – JavaScript Diagramming Library

JointJS - JavaScript Diagramming Library

JointJS is a JavaScript diagramming library. It can be used to create either static diagrams or, and more importantly, fully interactive diagramming tools and application builders.Rappid is a diagramming framework for advanced applications, delivering the best of HTML 5 + SVG and providing you with the right tools to build outstanding products.

Features:

  • basic diagram elements (rect, circle, ellipse, text, image, path)
  • ready-to-use diagram elements of well-known diagrams (ERD, Org chart, FSA, UML, PN, DEVS, …)
  • custom diagram elements based on SVG or programmatically rendered
  • interactive elements and links
  • connecting diagram elements with links
  • customizable links, their arrowheads and labels
  • links smoothing (bezier interpolation)
  • magnets (link connection points) can be placed basically anywhere
  • hierarchical diagrams
  • serialization/deserialization to/from JSON format
  • highly event driven – you can react on any event that happens inside the paper
  • zoom in/out
  • touch support

G2: The Grammar of Graphics in JavaScript

G2: The Grammar of Graphics in JavaScript

G2 is a visualization grammar, a data-driven visual language with a high level of usability and scalability. It provides a set of grammars, takes users beyond a limited set of charts to an almost unlimited world of graphical forms. With G2, users can describe the visual appearance of a visualization just by one statement.

Rete.js : JavaScript Framework for Visual Programming

Rete.js : JavaScript Framework for Visual Programming

Rete is a modular framework for visual programming. Rete allows you to create node-based editor directly in the browser. You can define nodes and workers that allow users to create instructions for processing data in your editor without a single line of code.

Apexcharts.js : Interactive Charts library with JavaScript & SVG

Apexcharts.js : Interactive Charts library with JavaScript & SVG

Apexcharts.js is a modern JavaScript charting library to build interactive charts and visualizations with simple API.

Features:

  • Annotations
  • Mixed Charts
  • Heatmaps
  • Sparklines
  • Gauges
  • Dynamic Data Updation

Dailychart.js : SVG Charting library

Dailychart.js : SVG Charting library

Dailychart.js is a tiny standalone SVG charting library to display daily graph of a stock market security.

Picasso.js : A Charting library streamlined for building Visualizations

Picasso.js : A Charting library streamlined for building Visualizations

Picasso.js is a charting library streamlined for building visualizations for the Qlik Sense Analytics platform.

SVGFlowBox : SVG based Event Highlighting

SVGFlowBox : SVG based Event Highlighting

SVGFlowBox is a lightweight SVG based event highlighting on flow paths.

js2flowchart.js : Beautiful SVG Flowchart Library

js2flowchart.js : Beautiful SVG Flowchart Library

js2flowchart – a visualization library to convert any JavaScript code into beautiful SVG flowchart. Imagine a library which takes any JS code and generate SVG flowchart from it, works on client and server. Allows you easily adjust styles scheme for your context or demonstrate your code logic from different abstractions levels. Highlighting, destructing whole blocks, custom modifiers for your needs etc.

 

ECharts : Interactive Charting & Visualization Library

ECharts : Interactive Charting & Visualization Library

ECharts is a free, powerful charting and visualization library offering an easy way of adding intuitive, interactive, and highly customizable charts to your commercial products. It is written in pure JavaScript and based on zrender, which is a whole new lightweight canvas library.

KoolChart : HTML5 CANVAS based Charting Solution

KoolChart : HTML5 CANVAS based Charting Solution

HTML5 CANVAS-based charting solution with excellent performance Works on all HTML5-supported browsers With a single development effort, the chart layout and style can be used on multiple devices.

  • 30 essential chart types, which is the most numerous provided in a single package.
  • Brilliant 2D and 3D charts with animation effects.
  • 400 ready-to-use sample charts are pre-packaged by default.
  • Customize styles, themes, tooltips, axes, labels, user-defined JavaScript functions, etc.
  • Simulate charts with Data Editor.