We Keep Coding

Fastest javascript charting library for really huge data [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I need to develop an ASP.NET web application ( not MVC ) which shows charts which are generated using massive data sources (like 1 billion record for a chart).
Charts should have at least these 2 features:
zoom + pan through zoomed chart
mouseover displays summary data of points
Needed chart types:
line chart
bar/column chart
pie chart
area chart (not that necessary)
bubble chart ( not that necessary )
and combinations of chart types:
column chart + line chart
area chart + line chart ( not that necessary )
bubble chart + pie chart ( not that necessary )
Supported Browsers:
Modern versions of Chrome, Firefox, Opera, Safari(not that necessary)
IE 7+
Possible solutions I have in mind:
Server-side chart image generation: This solution is good for performance but does not provide enough chart features.
Javascript-based charts: This solution has so many libraries but most of them does not provide enough performance ( as far as I know from my research ). Things I found:
canvasjs
dygraphs
google charts
highcharts
amcharts
jqchart
d3js
Generate the image on server, manipulate it using javascript: This solution probably will do it but I could not find any library which works like this. I do not know how much time it will cost if we decide to develop this.
The highest priority is the performance of chart-generation and internet-browser. User experience is the key here.
Which direction should I choose?

JavaScript-based charts will accommodate your features requirements.
While D3 will make your required chart types and do zoom, pan, and hover effects, it would require significant building time on your part to create all the possible user interactions. For that reason, a “store-bought” option would probably be more cost effective.
But even with a robust option like D3 when rendering such a large dataset, you are certainly going to come across a few issues.
If your goal is to serve an interactive web chart, your first consideration should be where your data is sampled. And you will have to sample: monitors cannot display 1 billion individual data points. Also, transferring 1 billion data points from the server to the client will require a substantial load time for the data transfer.
So where does that leave you? One JavaScript charting library I did not see on your list is ZingChart, which will meet all these requirements. We have worked with similar sized datasets and can certainly make recommendations about sampling. One is simply geared towards performance and the other accuracy.
Sampling with exact:false would be the fastest option.
Smart sampling will evaluate the difference in space between nodes. If consecutive nodes are more than x pixels apart the node is shown. This ensures outliers and anomalies in your data are not removed.
To address issues for rendering in the browser, ZingChart offers SVG, HTML5 Canvas, and VML options. There are benefits to both SVG and Canvas, but with datasets of this size Canvas provides several benefits (especially if you need render bar charts with large datasets). The library was built out of frustration working with other products with large data sets, and it is capable of rendering hundreds of thousands of nodes (without sampling) on the client.
ZingChart also provides the interactive functionality to allow end users to navigate your data and make visual queries. The API is incredibly powerful and allows you to control every part of a visualization programmatically or in response to user events.
You might be particularly interested in the Node.js library. This is a server-side image generation library which works from a very similar codebase as ZingChart’s Canvas client-side library. It includes image map functionality with our server-side build which provides a certain amount of interactivity. Plus, there is the benefit of providing identical charts on the server and on the client. This allows for some interesting UX opportunities when working with such large datasets.
I’m on the ZingChart team, so please feel free to reach out if you have any questions about how our answer relates to the possible solutions you are weighing right now.

I analyzed all the answers but did not find what I needed, and decided to use dygraphs.
Dygraphs provides enough performance and ui-specific features for free. Does not support pie-charts but other chart types are supported ( or possible to be supported using plotter-plugin ).

My suggestion would be jqchart or d3js. The charting libraries which you have mentioned are popular only.
Before choosing a library, kindly check with following criteria
Browser Support (IE8+)
Mobile device support
Image conversion
Clear documentation of product (Most important)
Support availability for library
library supports customization in styles or functionalities
Choose based on your needs.
I have attempted my trying with highcharts, jqchart, jqplot, amchart, d3js previously.

Three.js is a lightweight javascript library to create 3D visualisations (using WebGL, SVG, Canvas or another renderer).
Famo.us is a javascript rendering engine to create web-apps with 3D
user interfaces that promises to run smooth (60FPS) on mobile
devices.
Famo.us claims to solve the HTML5 performance issue by avoiding DOM-layout and repaints, which are very expensive computations. Instead, Famo.us keeps a flat DOM and uses CSS3 transforms for all layout and positioning.

How to create a topology diagram using Javascript

I need to create a topology (network) diagram, which will be integrated with my extJS application. Is anyone familiar with some Javascript packages with APIs for creating such a diagram, taking care of: positioning the nodes in the diagram, zooming, and dragging the nodes?
In addition I want to use some custom icons for the nodes in the diagram.

You might look into yEd/yFiles (https://www.yworks.com/products/yed) It's Java, not JavaScript, but it will definitely run as an applet since it does so from their site as a demo. Might work if this is for an intranet to just embed it in the middle of an ExtJS panel. Otherwise I recommend you read and re-read the drag and drop API for ExtJS and review the source code for them as well if you intend to code it yourself. Also from a google search:
https://github.com/jgraph (commercial)
https://www.jointjs.com/ (MIT Licenses)

Any jQuery Gantt Chart with Treeview, Zoom and editing features?

I have to integrate a Gantt Chart like tool in a room booking solution using jQuery. The Gantt should be very interactive one rather than simply displaying data. It should respond to drag & drop, it should have a tree view on the left side to group the tasks, and it should have the zoom feature to zoom in and out of the timeline. I did a lot of research but all those available currently on the web is lacking atleast any one of the mentioned features.
Could anyone tell me if there is anything like this using jQuery?
I know this may sound crazy to have these many features in a single thing. So a subset of the mentioned features would also be very helpful.
Thank you

I developed this one: http://roberto.open-lab.com/2012/08/24/jquery-gantt-editor/
is a complete editor based on jQuery.
New release available: http://roberto.open-lab.com/2014/05/15/jquery-gantt-editor-collapsible-branches

I have been using this one on http://taitems.github.com/jQuery.Gantt/ - its not 100% perfect yet but for my needs which are basic presentation of time tracking - it works very well.

Take a look at dhtmlxGantt, it supports all mentioned features:
interactive Gantt chart - respond to drag-and-drop
a tree view at the left
zoom feature (customizable timescale)
easy integration with jQuery
It's free under GPL.
(Disclaimer: I work for DHTMLX)

Simple opensource javascript library for creating (stacked) line graph?

I need a lightweight javascript library to create a stacked line graph (a bit like what is used in financial graphs). The X axis will be dates and the Y axis will be ordinary float values.
There will be two sections of the graph:
Top graph which is a line graph. I want to be able to specify the color of a line segment (i.e. joining two dated points)
The bottom part is just a rectangle/bar which represents the value. Once again, I want to be able to specify the color of the bar for a particular date.
It would be cool if the library used JQuery (since I have used jQuery in the past) - but even plain old JS code library would be equally useful.

I recommend Google Chart API / Chart Tools (examples) and Google Visualization API (examples).
The former being less powerful than the latter, but also more low-tech, so possibly easier to use (and more portable across platforms. The basic Chart API generates static images for you).
But you can also use:
gRaphael
Bluff
PlotKit
CanvasGraphJS
Grafico
RGraph
Plotr
Or even use a more high-level library like ExtJS (examples).

look at JQPlot http://www.jqplot.com/

UPDATE: Here is a recent and very impressive chart library built by Baidu folks:
http://ecomfe.github.io/echarts/index-en.html
And this one is open source.
Another free option are the Google visualisations.
They could be an overkill for your needs. But you can provide to the users different kind of graphics as they all share the same dataset structure.
The good, you don't host them, they are on the Google's infrastructure and save you the bandwith. The bad, you don't host them... It is not opensource, you can't hack them if you want.
We use them in our web app and are quite happy from it.
Except they don't work with Android, as many use SVG/VML that is off by default for now.

Use raphaeljs and the complimentary charting library. The charting library link has a few examples that will show you what you can do - just view source them to see how easy it is.

Graph visualization library in JavaScript [closed]

Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed last month.
This question's answers are a community effort. Edit existing answers to improve this post. It is not currently accepting new answers or interactions.
I have a data structure that represents a directed graph, and I want to render that dynamically on an HTML page. These graphs will usually be just a few nodes, maybe ten at the very upper end, so my guess is that performance isn't going to be a big deal. Ideally, I'd like to be able to hook it in with jQuery so that users can tweak the layout manually by dragging the nodes around.
Note: I'm not looking for a charting library.

I've just put together what you may be looking for: http://www.graphdracula.net
It's JavaScript with directed graph layouting, SVG and you can even drag the nodes around. Still needs some tweaking, but is totally usable. You create nodes and edges easily with JavaScript code like this:
var g = new Graph();
g.addEdge("strawberry", "cherry");
g.addEdge("cherry", "apple");
g.addEdge("id34", "cherry");
I used the previously mentioned Raphael JS library (the graffle example) plus some code for a force based graph layout algorithm I found on the net (everything open source, MIT license). If you have any remarks or need a certain feature, I may implement it, just ask!
You may want to have a look at other projects, too! Below are two meta-comparisons:
SocialCompare has an extensive list of libraries, and the "Node / edge graph" line will filter for graph visualization ones.
DataVisualization.ch has evaluated many libraries, including node/graph ones. Unfortunately there's no direct link so you'll have to filter for "graph":
Here's a list of similar projects (some have been already mentioned here):
Pure JavaScript Libraries
vis.js supports many types of network/edge graphs, plus timelines and 2D/3D charts. Auto-layout, auto-clustering, springy physics engine, mobile-friendly, keyboard navigation, hierarchical layout, animation etc. MIT licensed and developed by a Dutch firm specializing in research on self-organizing networks.
Cytoscape.js - interactive graph analysis and visualization with mobile support, following jQuery conventions. Funded via NIH grants and developed by by #maxkfranz (see his answer below) with help from several universities and other organizations.
The JavaScript InfoVis Toolkit - Jit, an interactive, multi-purpose graph drawing and layout framework. See for example the Hyperbolic Tree. Built by Twitter dataviz architect Nicolas Garcia Belmonte and bought by Sencha in 2010.
D3.js Powerful multi-purpose JS visualization library, the successor of Protovis. See the force-directed graph example, and other graph examples in the gallery.
Plotly's JS visualization library uses D3.js with JS, Python, R, and MATLAB bindings. See a nexworkx example in IPython here, human interaction example here, and JS Embed API.
sigma.js Lightweight but powerful library for drawing graphs
jsPlumb jQuery plug-in for creating interactive connected graphs
Springy - a force-directed graph layout algorithm
JS Graph It - drag'n'drop boxes connected by straight lines. Minimal auto-layout of the lines.
RaphaelJS's Graffle - interactive graph example of a generic multi-purpose vector drawing library. RaphaelJS can't layout nodes automatically; you'll need another library for that.
JointJS Core - David Durman's MPL-licensed open source diagramming library. It can be used to create either static diagrams or fully interactive diagramming tools and application builders. Works in browsers supporting SVG. Layout algorithms not-included in the core package
mxGraph Previously commercial HTML 5 diagramming library, now available under Apache v2.0. mxGraph is the base library used in draw.io.
Commercial libraries
GoJS Interactive graph drawing and layout library
yFiles for HTML Commercial graph drawing and layout library
KeyLines Commercial JS network visualization toolkit
ZoomCharts Commercial multi-purpose visualization library
Syncfusion JavaScript Diagram Commercial diagram library for drawing and visualization.
Abandoned libraries
Cytoscape Web Embeddable JS Network viewer (no new features planned; succeeded by Cytoscape.js)
Canviz JS renderer for Graphviz graphs. Abandoned in Sep 2013.
arbor.js Sophisticated graphing with nice physics and eye-candy. Abandoned in May 2012. Several semi-maintained forks exist.
jssvggraph "The simplest possible force directed graph layout algorithm implemented as a Javascript library that uses SVG objects". Abandoned in 2012.
jsdot Client side graph drawing application. Abandoned in 2011.
Protovis Graphical Toolkit for Visualization (JavaScript). Replaced by d3.
Moo Wheel Interactive JS representation for connections and relations (2008)
JSViz 2007-era graph visualization script
dagre Graph layout for JavaScript
Non-Javascript Libraries
Graphviz Sophisticated graph visualization language
Graphviz has been compiled to Javascript using Emscripten here with an online interactive demo here
Flare Beautiful and powerful Flash based graph drawing
NodeBox Python Graph Visualization
Processing.js Javascript port of the Processing library by John Resig

Disclaimer: I'm a developer of Cytoscape.js
Cytoscape.js is a HTML5 graph visualisation library. The API is sophisticated and follows jQuery conventions, including
selectors for querying and filtering (cy.elements("node[weight >= 50].someClass") does much as you would expect),
chaining (e.g. cy.nodes().unselect().trigger("mycustomevent")),
jQuery-like functions for binding to events,
elements as collections (like jQuery has collections of HTMLDomElements),
extensibility (can add custom layouts, UI, core & collection functions, and so on),
and more.
If you're thinking about building a serious webapp with graphs, you should at least consider Cytoscape.js. It's free and open-source:
http://js.cytoscape.org

In a commercial scenario, a serious contestant for sure is yFiles for HTML:
It offers:
Easy import of custom data (this interactive online demo seems to pretty much do exactly what the OP was looking for)
Interactive editing for creating and manipulating the diagrams through user gestures (see the complete editor)
A huge programming API for customizing each and every aspect of the library
Support for grouping and nesting (both interactive, as well as through the layout algorithms)
Does not depend on a specfic UI toolkit but supports integration into almost any existing Javascript toolkit (see the "integration" demos)
Automatic layout (various styles, like "hierarchic", "organic", "orthogonal", "tree", "circular", "radial", and more)
Automatic sophisticated edge routing (orthogonal and organic edge routing with obstacle avoidance)
Incremental and partial layout (adding and removing elements and only slightly or not at all changing the rest of the diagram)
Support for grouping and nesting (both interactive, as well as through the layout algorithms)
Implementations of graph analysis algorithms (paths, centralities, network flows, etc.)
Uses HTML 5 technologies like SVG+CSS and Canvas and modern Javascript leveraging properties and other more ES5 and ES6 features (but for the same reason will not run in IE versions 8 and lower).
Uses a modular API that can be loaded on-demand using UMD loaders
Here is a sample rendering that shows most of the requested features:
Full disclosure: I work for yWorks, but on Stackoverflow I do not represent my employer.

As guruz mentioned, the JIT has several lovely graph/tree layouts, including quite appealing RGraph and HyperTree visualizations.
Also, I've just put up a super simple SVG-based implementation at github (no dependencies, ~125 LOC) that should work well enough for small graphs displayed in modern browsers.