Html5 node graph? - javascript

Is there a html5 version or similar to Asterisq Roamer?
I looked at this list of charts from Daniel Davis list, but can't find any that has:
Loading data from xml(better json)
Minimum level of connections 2
Animated custom boxes
This is Asterisq:

There are several graph visualizers that I know of:
arbor.js
JavaScript InfoVis Toolkit
d3.js
I think their APIs are straightforward enough that adding graphs and edges programatically based on your loaded model is easier than adapting your data to some kind of fixed schema.

Related

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.

Pareto Chart/Graph using Javascript/Html/JSON

Im trying to find any plugins, examples or related resources on how to built a Pareto Chart for an html page. I'd like to be able to built it out of html, style it w/ CSS and populate data via json. Im willing to build it out of scratch by using a combination of a line graph and bar graph, however want to be sure there isnt anything already out there for this.
Here is an example of the output i hope to produce
Based on my searches i can only seem to find How-To's, Examples, etc on how to build one in Excel, however nothing for the web.
Any ideas or suggestions are greatly appreciated.
Pareto charts come standard in quite a few JS charting libraries. Here's a demo of one in ZingChart.
You can view the docs for creating pareto charts here. I'm part of the ZingChart team, and you're welcome to reach out to us if you have any questions at support#zingchart.com.
I am not sure from your description whether you would like to build from scratch or if you want to use a charts package. Normally, I would avoid re-inventing the wheel, but I sometimes do a challenge to learn. Below are a few links to pre-made packages of javascript charts that can do pareto, found with a google search (javascript pareto chart -excel -matlab).
http://cyberpython.github.io/AwesomeChartJS/ is apache 2.0
one of the better paid-for versions is http://www.dundas.com/ but there are others.
Sorry that this is a list of links. I would like to be able to rattle off the method from my memory, but I do not do HTML charts as much as I would like to.
It seems some of the options aren't free and/or open source :(
For building from scratch, or at least basing on common libraries, d3 might be a good choice. I ran into a similar issue looking to generate histograms with a cumulative frequency line included in the chart, and to build my own based on some examples. I then investigated further for options for pareto charts and sorted histograms.
If you want to try it with d3, here's some examples to start from (they're not as pretty rendered like the other answers, but a charting/UI web developer can prettify it I'm sure):
a basic d3 pareto chart based off Excel example
a histogram-based pareto chart in d3 - at the time of this post, this d3 sample is incomplete

Javascript big-data visualisation

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.

How to edit a node graph?

With d3js it is possible to visualize node graphs, like this example
Now I would like to let the user interact with the graph. It must be possible to:
create/delete nodes and edges
attach data to a node/edge, by clicking on it.
push the data to the server, so that it can be made persistent
Is it possible to do that with d3js? Is there any other tool which offers this kind of functionality?
Sure, all of these things are relatively easy to do with d3. You can see lots of different examples of force directed graphs at http://bl.ocks.org/mbostock. Here are a couple that you might find useful:
Adding nodes and edges to a graph:
http://bl.ocks.org/mbostock/929623
http://bl.ocks.org/rkirsling/5001347
Loading data from an XML file to create a layout
http://bl.ocks.org/mbostock/1080941
Listening for mouse over
http://bl.ocks.org/mbostock/2706022
From personal experience I would say that d3 would be the best tool for doing this sort of thing. I'd suggest playing around with it a bit and then asking more specific questions when you have them.

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)

Categories