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.
Related
I'm about to develop a UI for medical research application. I need to make a time series line graph. Main issue is the amount of data:
5,000 points per graph, with a few of them displayed simultaneity. I’m expecting 50,000 points processed all together.
The question is what presentation library?
The main features I’m looking for are: Handles huge data sets, Zoom, annotations, live update.
I’m already looking into http://dygraphs.com/ and http://meteorcharts.com/
I wouldn't want any library that renders the data as DOM elements, or that uses SVG (from performance perspective)
Well, I think I'll give everyone my own answer to my question:
Dygraphs (http://dygraphs.com/) seems to be on the spot. The documentation, although a lot of apparent efforts, leaves a lot to be desired. But from performance, features and flexibility, it's the best I've seen. At least for my current project needs.
Way to go, Dygraphs!
Have you checked out D3? I'm using that for a lot of graph visualization. It looks like this example renders to svg.
My stuff renders to a SVG for force graph visualizations too, but it looks like D3 might be able to use either a canvas or SVG, but I'm not positive about what all can be rendered to which. Honestly, I'd give D3 a try even with SVG, it might be fast enough. I remember reading something about someone simulating thousands of particles using D3's force graph visualizations without issues. It's SUPER easy to get your data into the right format for it to use.
Good luck!
I am developing a very similar application.
I am currently using Flot for the chart rendering. It handles annotations and zoom, take a look at their plugin library.
I recommend this downsampling plugin which will speed up graph rendering. Rendering 5000 points on your graph is useless: you have less vertical pixels on your screen than that! so this library will only render those that actually have a visual importance.
This only gives you the graph. You may want some kind of dashboard to present all that... I am currently looking at Grafana, which is used for a totally different purpose but makes awesome dashboards. It may be possible to "rip out" their dashboarding features (it uses Flot as well).
Another option is Hightcharts, but that's not free.
Check raphael js Library
Raphaël is a small JavaScript library that should simplify your work with vector graphics on the web. If you want to create your own specific chart or image crop and rotate widget, for example, you can achieve it simply and easily with this library.
Here is what i am trying to do :
http://mbostock.github.com/d3/talk/20111116/iris-splom.html
But i want to do that in webgl 2d (because SVG performance is very slow, randering 10k SVG only already drops to 12 fps)
On a quick search i found several webgl-2d libs : cocos2d-html5 , pixijs,Three.js and webgl-2d(abandoned?)
They seems to be pretty easy but what i want to do is data visualization.cocos and pixijs are 2d game libraries. I am new to webgl and those libraries so experts at SO can you guys recommend ?
summary of things i need:
Interaction :
Rectangular selection inside plots. Click to select on Some elements.
Zoom and Pan Support (Semitic Zooming if possible)
Renderer :
WebGL2d (according to benchmarks webgl is fastest)
Based on your requirements and summary, I would recommend the latest release of Cocos2D-html5 which includes WebGL rendering support. This is as simple as changing the rendering setting from Canvas to WebGL in the cocos2d.js settings file. For Example, in HelloHTML5World/cocos2d.js change renderMode to 2 for WebGL based rendering.
renderMode:0, //Choose of RenderMode: 0(default), 1(Canvas only), 2(WebGL only)
Cocos2d-html5 is more precisely a graphics library and & maybe construed as a complete game library only in combination with the (default) chipmunk or box2d game physics libraries.
Does it support rectangular selection, or zoom and pan? Yes, you can extend the existing libraries to implement these behaviours.
Other advantage of Cocos2d-html5 platform is added support for visual graphics editing with Cocosbuilder and cross-platform native support (iOS, Android etc) for same codebase with Javascript bindings.
If you have specific platform questions, these can be answered in better detail with code.
You may want to look at the JS reference and the cocos2d-html5 forum for getting started.
Update1: Looked at your data visualization code for iris dataset, The plots are housed in a svg element, with tiny circles plotting each datapoint according to x,y coordinates. These can be accomplished in Cocos2d too via x,y coordinates, grids, boxes with varying opacity and the tiny circles for the data points. Import your iris dataset in json/xmll/csv format via javascript code and plot via above cocos2d methods. Rectangle selection via javascript event callbacks & mousehandler methods and corresponding update of canvas scene.
Update2: On second thoughts, if you find the learning curve for cocos2d steep, you may better restrict yourself to a charting only library which is WebGL based. This project VivaGraphJS seems suitable with high performance being WebGL based.
Also, please ask questions preferably in this format, what you tried in code, what was the expected output, what you got instead. SO is not meant for comparison of libraries. WebGL is a rendering method. The switch, for example in three.js is as simple as
renderer = new THREE.WebGLRenderer();
instead of the canvas one:
renderer = new THREE.CanvasRenderer();
resulting in higher performance.
I am looking for an algorithm or sample solution for drawing connection lines between rectangles. In my case rectangles are elements Gantt chart and connections show depenedencies. I am using the Raphael JS library to draw rectangles and lines. So a solution in JavaScript would be the best, but an algorithm in meta language or other JS similar will be nice also.
I have found an example that looks nice but maybe someone knows something else.
In my case there are a few relevant requirements:
only horizontal and vertical lines are allowed
lines should not cross each other
lines should not cross rectangles
I hope to achieve something similar to this:
It's look like you are looking for javascript gantt charts. Check out this one's:
http://dhtmlx.com/docs/products/dhtmlxGantt/index.shtml
Editable chart
Full control with JavaScript API
Multi-browser/multi-platform support
Loading from XML
Serialization to XML
Movable/resizable activities
Built-in edit menu, plus custom dhtmlxMenu support
Extended properties pop-up
Optional tree view
Customizable task subscription
Percent-complete shadings
Dependency arrows
Fast and smooth rendering
Built-in constraint checking
Print-friendly mode
http://www.bryntum.com/products/gantt/
Built entirely on web standards - HTML/CSS/JavaScript
Use with any server (PHP, Java, ASP.NET)
Supports dependencies, lead/lag and critical path
Export to PDF/PNG, MS Project import
Project, task and resource calendars
Unit tested with Siesta
http://gxt-scheduler.com/
Built entirely on web standards - HTML/CSS/GWT
Integrates with any type of backend
Fully themeable, requiring only basic HTML/CSS knowledge
Drag & drop and resize items easily
Supports all major browsers
http://gantter.com/
google drive integration
FREE cloud-based project scheduling
http://gantt.twproject.com/
in-place editing
drag&drop
zooming
do/undo
multiple dependencies
full editing
dates shortcuts
css skin
multiple browser
resources editing
multiple assignment
milestones
export data in JSON format
resize & scroll
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.
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.