I'm basically asking the same question as this guy, but newer: Fastest javascript charting library for really huge data
All the libraries seem to say their the "fastest".
I'm doing this so I can make a mobile application that can show several hundred line charts at the same time, however the way I'm doing it now (With plot.ly express) is so slow sometimes it crashes the phone. They also should support some limited interactivity, like zooming and panning.
Cross posted to: https://softwarerecs.stackexchange.com/questions/84514/fastest-js-library-web-library-for-graphs
I believe that LightningChart is the fastest available. You can see their testing results or try a live test. They also have a huge variety of available charting methods.
You could use the CanvasRenderingContext2D API (no library) if you want the fastest possible drawing (maybe in conjunction with requestAnimationFrame).
Related
I came across this proof of concept earlier today (on TechCrunch.com) and was blown away and intrigued as to how they had managed to accomplish the end result. They state that they don't use webGL or any plugins yet they are able to interact directly with the GPU and render 3D visuals at up to 60 fps using nothing but Javascript. Any ideas how this could be done, or how to access the GPU from Javascript in general without the use of plugins?
Site Address is: famo.us
ps: Try using your arrow keys to shift orientation its far out!!
They're using standard HTML5 Javascript APIs to achieve this.
I saw several references to requestAnimationFrame in their code. This method allows one that uses a compatible browser, to display more fluid and optimized animations, with far better frame rates than setInterval based animations will ever allow you to have. This is certainly achieved by using the GPU and the available hardware background.
GPU or every other hardware component cannot be accessed directly using any Javascript routines. Instead, the browser, based on the called JS directives and the execution context, will use the GPU if possible to optimize some specific treatments, calculus and renderings.
EDIT
For future references, I recently found out (7 years after the original answer) that a new initiative - the W3C GPU for the Web Community Group, has recently been created in 2020 to do just that. It describes itself as follow.
The mission of the GPU on the Web Community Group is to provide an interface between the Web Platform and modern 3D graphics
and computation capabilities present in native system platforms. The
goal is to design a new Web API that exposes these modern technologies
in a performant, powerful and safe manner. It should work with
existing platform APIs such as Direct3D 12 from Microsoft, Metal from
Apple, and Vulkan from the Khronos Group. This API will also expose
the generic computational facilities available in today's GPUs to the
Web, and investigate shader languages to produce a cross-platform
solution.
In the long-term, this initiative might allow developers to directly interact with the GPU from all web browsers. You can track the implementation status of the WebGPU API Spec on Github here.
Concerning famo.us: they did analysed the bottlenecks of the Webkit rendering pipe and then found a way to bypass them while building the pages. Basically: the DOM tree construction, the Render tree construction, the Layout of Render Tree are bypassed. Take a look on this article for a whole explanation.
They're using CSS 3D transforms. Web browsers are increasingly using hardware acceleration to do these kinds of CSS3 things.
i think the webGL glsl.js library might be good for this, though i havnt seen benchmarks...
https://github.com/gre/glsl.js/
also this approach seems viable;
basically to use the gpu in the way we like to, hardware optimised functions (have a little look into "blas") are used, you do not want to write these! strangely it seems that people still use the old fortran blas.... there is some stuff with compiling via llvm and then using emscripten to turn it into javascript.
Use Emscripten with Fortran: LAPACK binding
the emscripten way seems the most versatile, im just about to check it out, but it looks like a mountain, also this topic seems to be somewhat of a call to arms, emscripten only works with fortran if you hack it (see links from the second link). i think what we are looking for is blas support in javascript, this is not a closed issue by any means, and for a few of us out here it is very frustrating! hopefully someone has a link to these blas libraries we cant find...
please let me know if i dont quite have my head round this issue, js is new to me.
also, suggesting html5 is sufficiently "optimised" to use the hardware, how can we trust this!? we need gpu optimised blas (basic linear algebra subprograms) e.g. dot product.
i think maybe also that these old fortran blas arnt actually the right thing for a modern gpu? node-cuda seems very likely the best thing i have found...
Is it possible/what is the easiest way to take 3D model from max and create a Flash or Javascript carousel that can work on the web? It should function like a real world CD carousel with say 100 or so models built in.
(http://www.thechiplab.com/stacks/Untitled-2.jpg)
Buttons on each side scroll through the chips. Thanks so much for looking at my question. This is my first one and I didn't see any similar questions asked. Sorry for not embedding the image...it wouldn't let me because this is my first post.
Chase
For working with 3D graphics in Flash you can use a library like Away3D or Papervision3D (the latter used to be the main one, but the former seems to have more momentum these days.)
Away3D will get hardware acceleration once that is available in the next version of Flash, but for now the complexity of your graphics will be limited by the software renderers. As a result, I don't know if a 100 disc carousel is really feasible.
Another option for doing web 3D is WebGL (already mentioned) but that's not supported in every browser yet (if ever, darn IE.)
Yet another option is using Unity. Their plugin will work in more browsers than WebGL, but is not installed as widely (or rather WebGL doesn't require any plugin.)
The specific file format you would use varies with each platform/engine, but the most common file format for web 3D is Collada. The best Collada exporter for 3ds Max is at http://www.opencollada.org
I'll just add this to #jhocking's (correct) answer:
I've used this asConverter max script to convert 3dsmax models into native Flash AS3 classes on a few different projects. Whats nice is that it exports to / extends native classes (extending the TriangleMesh3D Papervision class, for example). This way, you manage to bypass some of the issues you run into when exporting models out of 3dsmax. I've found it to produced quite reliable results - well formed geometry, and good uvw maps. It has support for PV3d, Away3d, and Sandy.
It looks like a defunct project now, but it was reworked by Mr. Doob at some point.
btw #jhocking: did you know Unity is going to support AS3 / export to SWF in the "near future" (when molehill releases, I assume)? Unity is an amazing application, and export to SWF would be... great.
You can certainly do this with Flash, but it is also doable with WebGL in some HTML5 supported browsers.
If you haven't worked with programming/JavaScript, you could have a look at something like copperlicht. If you are interested in coding, there are plenty of good WebGL frameworks around such as:
scenejs
three.js
glge
spidergl
canvas3d
As for the models, you'll need to export them into a format supported by webgl, for example into json objects.
Flash is of course another option, but I'll leave that option for somebody else to go into detail with.
I'm a bit stuck with which charting library I will use in my project. Im stuck with this two (but also open for other suggestions)
For YUI Charts :
Pro :
- Very robust and configurable
Cons :
- Uses flash 9 >, which might potentially be inaccessible for users without up to date flash version
- Does not support export to image (for flash versions < 10 only)
For Google Visualization API
pros:
- small file size for the libraries,
- can be exported to static image charts (via separate API call)
Cons
- limited configuration options
So there, please help me decide. YUI charts has the edge over configuration options but Google Visualization API has the edge in terms of accessibility as it uses SVG to render the grapsh instead of Flash. For users that are hand-cuffed by corporate IT prohibitions , they cant just upgrade their Flash version and the page will not work.
Thanks!
I would choose Google's API as it requires only a javascript interpreter or internet access (to Google).
The fewer dependencies, the better. Not to mention there is quite an array of tools for manipulating SVG images.
If you really cannot make do without certain features in YUI or cannot find simpler ways to express your charts, then choose YUI.
You might also want to take a peek at http://www.simile-widgets.org/ It might be overkill / bad fit for your needs, but it is positively sexy.
If you don't want flash for drawing charts in your application it is better to choose
Google Visualization API...
The Google Visualization JavaScript API lets you access structured data and visualize that data using JavaScript in your web pages. The Google Visualization API also enables creation of gadgets.
I want to draw some 3D network diagrams in a web browser, and the data for these diagrams are in a Rails app (in the database).
I already use flotomatic as a Rails interface for pretty Javascript plots (e.g., independent variable, dependent variable). Certainly there are packages for drawing simple things in Javascript.
What I'm looking for is (a) a Javascript package for 3D drawings that are displayed in a web browser (without a plugin), and (b) a Ruby API for that package, if possible.
Any recommendations? Many thanks!
I haven't found a definitive answer, but something like this might be useful:
http://www.canvasdemos.com/2009/04/05/processingjs/
http://processingjs.org/
In short, processing has been ported to javascript and makes use of the HTML5 canvas element.
Processing.js does not yet support 3D (as canvas doesn't support it due to lack of acceleration), but it shouldn't be a big deal to create a wireframe.
I'm doing some research for a JavaScript project where the performance of drawing simple primitives (i.e. lines) is by far the top priority.
The answers to this question provide a great list of JS graphics libraries. While I realize that the choice of browser has a greater impact than the library, I'd like to know whether there are any differences between them, before choosing one.
Has anyone done a performance comparison between any of these?
Updated answer (2019):
The core advice is still the same: for maximal performance use thin wrappers or use raw browser API's, and also avoid the DOM or any DOM-like structure. In 2019 this means avoiding SVG (and any library built on top of it) because it may cause performance issues when trying to rapidly change the DOM.
Canvas is the go-to solution for high performance web graphics, both for the 2d and 3d (webgl) contexts. Flash is dead so no longer an option, but even if it weren't its performance was eventually matched by the native browser API's.
Original answer (2009):
If you're not doing 3d, just use raw canvas with excanvas as an explorer fall-back. Your bottleneck will be javascript execution speed, not line rendering speed. Except for IE, which will bog down when the scene gets too complex because VML actually builds a dom.
If you're really worried about performance though, definitely go with flash and write the whole thing in actionscript. You'll get an order of magnitude better performance, and with the flex sdk you don't even need to buy anything. There are several decent libraries for 3d in flash/flex available.
Raphael JavaScript Library
http://raphaeljs.com
None of them have good performance. It is 2009 and the state of programmable graphics rendering in web browsers is truly depressing. I could do faster interactivity on a vt125 terminal 25 years ago. If you are doing anything interactive, think about using Flash... Else I'd go for some server-side heavy solution depending on your needs
Up to now - is used processing.js (javascript canvas implementation of "Processing" language) and/or raphael.js (tiny and handy VML/SVG javascript library).
The performance recomendations depends on task:
highly dynamic, complex primitives (or huge amount of it) - canvas (pixels, low-level API)
lower amount of primitives, highly scalable, integrated in DOM - SVG/VML (vector, high-level API)
I know you said browser had more influence, so why not stick with using optimized SVG calls? Then, it "could" work in all browsers but...
Chrome is robust enough to do render 3D modeling efficiently:
http://www.chromeexperiments.com/detail/monster/
How about http://www.jsgl.org? It uses SVG/VML.
For basic drawing (such as lines, circles, and polygons), I would recommend Walter Zorn's Graphics Library. It was built with performance in mind and works in a ton of browsers.