25 jQuery Charts And Graphs

About a code

donutgraph.js

Animated donut graph jQuery plugin with D3js.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: donutgraph.js, d3.js

About a code

Pie Chart

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: -

About a code

Donut in 2D : Chart Gallery

A variation of the pie chart, the doughnut 2D chart has a blank space at the center to show useful information about the data being plotted.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: yes

Dependencies: fusioncharts.js, fusioncharts.theme.fusion.js, fusioncharts.jqueryplugin.js

Flot

Flot is a pure JavaScript plotting library for jQuery, with a focus on simple usage, attractive looks and interactive features.

Peity

Peity (sounds like deity) is a jQuery plugin that converts an element's content into a mini svg pie, donut, line or bar chart.

Cytoscape.js

Cytoscape.js is a fully featured graph theory library. Do you need to model and/or visualise relational data, like biological data or social networks? If so, Cytoscape.js is just what you need.
Cytoscape.js contains a graph theory model and an optional renderer to display interactive graphs. This library was designed to make it as easy as possible for programmers and scientists to use graph theory in their apps, whether it's for server-side analysis in a Node.js app or for a rich user interface.

Arbor

Arbor is a graph visualization library built with web workers and jQuery. Rather than trying to be an all-encompassing framework, arbor provides an efficient, force-directed layout algorithm plus abstractions for graph organization and screen refresh handling.
It leaves the actual screen-drawing to you. This means you can use it with canvas, SVG, or even positioned HTML elements; whatever display approach is appropriate for your project and your performance needs.
As a result, the code you write with it can be focused on the things that make your project unique – the graph data and your visual style – rather than spending time on the physics math that makes the layouts possible.

jQuery Sparklines

This jQuery plugin makes it easy to generate a number of different types of sparklines directly in the browser, using online a line of two of HTML and Javascript.

OrgChart

It's a simple and direct organization chart plugin. Anytime you want a tree-like chart, you can turn to OrgChart.

• Supports both local data and remote data (JSON)
• Smooth expand/collapse effects based on CSS3 transitions
• Align the chart in 4 orientations
• Allows user to change orgchart structure by drag/drop nodes
• Allows user to edit orgchart dynamically and save the final hierarchy as a JSON object
• Supports exporting chart as a picture or pdf document
• Supports pan and zoom
• Users can adopt multiple solutions to build up a huge organization chart(please refer to multiple-layers or hybrid layout sections)
• Touch-enabled plugin for mobile divice

jOrgChart

jQuery OrgChart is a plugin that allows you to render structures with nested elements in a easy-to-read tree structure. To build the tree all you need is to make a single line call to the plugin and supply the HTML element Id for a nested unordered list element that is representative of the data you'd like to display. If drag-and-drop is enabled you'll be able to reorder the tree which will also change the underlying list structure.

• Very easy to use given a nested unordered list element
• Drag-and-drop functionality allows reordering of the tree and underlying ul structure
• Showing/hiding a particular branch of the tree by clicking on the respective node
• Nodes can contain any amount of HTML except li and ul
• Easy to style
• You can specify that sub-trees should start collapsed, which is useful for very large trees

jQuery Plugin Circliful

jQuery circle statistic plugin.

• show infos as circle statistics, no images used
• based on SVG and jquery
• many options can be set
• fully responsive

jQuery.ganttView

The jQuery.ganttView plugin is a very lightweight plugin for creating a Gantt chart in plain HTML...no vector graphics or images required. The plugin supports dragging and resizing the Gantt blocks and callbacks to trap the updated data.

Pizza Pie Charts

Pizza is a responsive pie, donut, bar, and line graph charting library based on the Snap SVG framework from Adobe. It focuses on easy integration via HTML markup and CSS instead of JavaScript objects, although you can pass JavaScript objects to Pizza as well.

jQuery Visualize

HTML5 canvas charts driven by HTML table elements.

HighChartTable

jQuery plugin to convert HTML tables to HighCharts graphs.

jQuery.Flowchart

jquery.flowchart.js is an open source javascript jQuery ui plugin that allows you to draw and edit a flow chart.

• Draw boxes (called operators) and connections between them
• Methods are provided so that the end-user can edit the flow chart by adding/moving/removing operators, creating/removing connections between them
• The developper can save/load the flowchart.
• Operators and links can be customized using CSS and the plugin parameters
• Some methods allow you to add advanced functionalities, such as a panzoom view or adding operators using drag and drop

jQuery.Graphviz.SVG

jQuery plugin to make Graphviz SVG output more interactive and easier to navigate.

• Highlight nodes/edges
• Zoom in/out
• Graph navigation - select linked nodes
• Fancy UI tooltips; bootstrap supported out the box
• Move things forward/back in the graph

Chartinator

A jQuery plugin for transforming HTML tables into charts using Google Charts.

• Creation of all chart types using Google Charts - Visit https://developers.google.com/chart/interactive/docs/gallery
• Extraction of data from HTML tables, Google spreadsheets, and JavaScript arrays
• Accessible data - Using HTML tables as data sources makes data accessible to screen readers and searchbots
• Generation of HTML tables from other data sources - Makes data extracted from JS arrays and Google Sheets accessible
• Showing and hiding of HTML tables accessibly
• Manipulation of data extracted from HTML tables and Google Sheets using JavaScript arrays
• Transposition of data - swapping of rows and columns
• Resizing of charts on screen resize - Responsive Web Design
• Chart aspect ratio control
• Art direction - Zoom and offset of chart - Useful for refining the region displayed in geoCharts
• Customization of chart tooltips and annotations
• Customization of all Google Chart options - Fonts, colors, chart formatting, etc.
• Adding Google Chart event handlers - Event handlers can be defined in the options

ZingChart jQuery

Easy ZingChart manipulation and interactivity for jQuery users. 35+ chart types & modules.

Ivis

IVIS is a chart editor for interactive visualisation, based on jQuery and HighCharts. Chart types include dot/scatter, 2D scatter, line, bar/column, pie, and heat map. It's powerful when analysing large data sets.

IguanaChart

IguanaCharts is HTML5 jQuery stock charts library.

• Zoom and load chart history with mouse wheel
• Draw on chart trend lines, fibonacci, corners and plenty other figures
• Use technical analysis indicators
• Show trades on chart and trade from the chart
• Set browser width or full screen modes (when supported by the browser)
• Change themes, languages and cultures on the fly
• Decide where to store information, or from where to load specific information used
• Change the complete layout of the chart, if necessary by adjusting themes and CSS classes
• Add/Remove/Detect changes for studies/drawings