I am building a dashboard using JS, that will show users plots of their sales data. Can you suggest a js library, which:
Can plot many points (100k for instance or even more)
Interactive
Supports SSR without losing interactivity (if it’s possible. I just assume that the only way to load this number of data without hurting UX is SSR)
Optional: works with React
Many thanks for any help!
There's probably many options but one could be Victory Chart. The library is built on top of D3.js and is heavily customizable. For your large dataset, I can think of one solution I used that is documented here.
One reason I'd suggest Victory is because they have a nice support community here.
I read many blog posts about that topic, here's one that compares a few "big" chart libraries with React Components.
For time series, I'd suggest having a look at this library.
If nothing works with large datasets, I think that your best option would be D3.js (with or without a React implementation).
We have to display huge SVG documents (about 20mb) inside a web application. Users should be able to zoom in and move the image.
Rendering the SVG directly as a DOM object is too slow and the performance is inconsistent. The same applies for painting it on a canvas.
Generally, handling SVG on the client side seems weak. So I thought of implementing a server-side solution for providing the data in small chunks, in a non-vector format. If the user is not interacting with the document, the buffer starts lazy loading higher detailed pieces. My concern with this solution is, that the network traffic could be critical.
We will be rendering 2D DWG / DXF files, which will be converted to SVG.
The AutoCAD API seems really slow. The DWG sample does not work on any of our devices. Also, the application has to run without an internet connection, so we can't use the AutoCAD REST API.
How would you solve this? Are browsers even built for handling huge vector graphics?
When it comes to SVG it depends on the number of nodes, gradients, opacity and blur effects; however, why not use the end-user's graphics accelerator to handle this?
Most modern web browsers are made to support graphics acceleration through WebGL -with which you can build very complex (and "huge") rich graphics in 2D (or 3D) that is handled as fast as your graphics accelerator can handle it; exactly like modern games.
Using a WebGL library is recommended where a lot of work has been done for you already:
PlayCanvas : https://playcanvas.com/ -- you can import other formats, build & script your scenes with a friendly interface. PlayCanvas is well documented.
Three.js : http://threejs.org/ -- an advanced WebGL library, aimed at coders. ThreeJS can also handle many different types of 3D formats and this library is also well documented.
With Three.js you can also render your graphics as SVG, however, using WebGL is recommended for the obvious advantages in speed and quality.
Both of these libraries are very powerful, have an active community and is well supported in modern web browsers; however there are many others you can try.
For more information on the libraries mentioned above, it's best to visit the sites where extensive information and examples are available.
Instead implementing yourself, I would suggest you use the Autodesk Viewer, also available for developers with full REST + JavaScript APIs.
Basically this library will convert your DWG file (2D or 3D) into a JSON stream and adjust the amount of data according to the browser/device capabilities. It uses Three.js, but you don't need to handle the geometry directly (but you can).
Check the Forge Github for samples. I like the Galley better.
You may also run it locally using NodeJS to server it to the browser. The Extract sample does the whole process.
I'm building a dashboard receiving tons of data from MQTT in JSON format (data frequency ± 4Hz). I'm trying to visualize this data and initially picked Highcharts (http://www.highcharts.com/) but quite quickly realized that browser can't simply handle that amount of information.
I'm quite new to visualizing such amounts of data so would appreciate any advice on how to handle that amounts of data (currently arduino's post data to given topics and I receive them on the server, store in mongo and send to the browser to be updated). There's a chance my entire approach is completely wrong so please guide me to a path!
Your problem is likely that the SVG that Highcharts is creating is too large for the browser to handle in a timely manner. If you have too many data points, you'll need to do 1 of 2 things.
Switch to a charting library that uses an HTML5 Canvas instead of an SVG
Pare down your data using a best fit or some other curve interpolation.
If you switch to a Canvas based chart, you'll lose some of the cool features that SVGs have, but every data point will make it to the page. I've used jqChart for this in the past. It's not free though.
If you pare down your data, not every data point will make it to the page, but the nice features that SVGs allow will still be there. You'll still probably be able to use highcharts.
I think you need to have a look at crossfilter (filtering lib), dc.js (helper library for d3 and crossfilter) they can handle large amount of data well
After using Highcharts for more than 3 years I can recommend it even for the questioned use case. To follow recommendations to use other charting libraries might be not a good choice if you already picked Highcharts (after comparison with others) and invested quite some time in it. If you like it, stick with it.
To address this edge-case with thousands of data points the team announced the boost.js module.
It originated from this issue on Github. The discussion reveals lots of background information about the problem domain. And it demonstrates how well the Highcharts team is doing customer-/community-driven development.
Looks like you can do it with Highcharts - if you still want. :-)
Last but not least I can recommend the Highcharts Cookbook from Packt
I use grafana to visualise my time series data. I don't believe it supports mongodb at the moment. I use influxdb as the data back end.
Locked. This question and its answers are locked because the question is off-topic but has historical significance. It is not currently accepting new answers or interactions.
Would anyone recommend a particular JavaScript charting library - specifically one that doesn't use flash at all?
There is a growing number of Open Source and commercial solutions for pure JavaScript charting that do not require Flash. In this response I will only present Open Source options.
There are 2 main classes of JavaScript solutions for graphics that do not require Flash:
Canvas-based, rendered in IE using ExplorerCanvas that in turns relies on VML
SVG on standard-based browsers, rendered as VML in IE
There are pros and cons of both approaches but for a charting library I would recommend the later because it is well integrated with DOM, allowing to manipulate charts elements with the DOM, and most importantly setting DOM events. By contrast Canvas charting libraries must reinvent the DOM wheel to manage events. So unless you intend to build static graphs with no event handling, SVG/VML solutions should be better.
For SVG/VML solutions there are many options, including:
Dojox Charting, good if you use the Dojo toolkit already
Raphael-based solutions
Raphael is a very active, well maintained, and mature, open-source graphic library with very good cross-browser support including IE 6 to 8, Firefox, Opera, Safari, Chrome, and Konqueror. Raphael does not depend on any JavaScript framework and therefore can be used with Prototype, jQuery, Dojo, Mootools, etc...
There are a number of charting libraries based on Raphael, including (but not limited to):
gRaphael, an extension of the Raphael graphic library
Ico, with an intuitive API based on a single function call to create complex charts
Disclosure: I am the developer of one of the Ico forks on github.
If you're using jQuery I've found flot to be very good - try out the examples to see if they suit your needs, but I've found them to do most of what I need for my current project.
Additionally ExtJS 4.0 has introduced a great set of charts - very powerful, and is designed to work with live data.
Check out http://www.highcharts.com !
Highcharts is a charting library written in pure JavaScript, offering an easy way of adding interactive charts to your web site or web application. Highcharts currently supports line, spline, area, areaspline, column, bar, pie and scatter chart types.
It maybe not exactly what you are looking for, but
Google's Chart API is pretty cool and easy to use.
There is another javascript library based on SVG. It is called Protovis and it comes from Stanford Visualization Group
It also allows making nice interactive graphics and visualizations.
http://vis.stanford.edu/protovis/ex/
Although it is only for modern web browsers
UPDATE: The protovis team has moved to another library called d3.js (Data Driven Documents) as they said:
"The Protovis team is now developing a new visualization library, D3.js, with improved support for animation and interaction. D3 builds on many of the concepts in Protovis"
The new library can now be found in:
http://mbostock.github.com/d3/
UPDATE 2:
"Rickshaw" is a JavaScript toolkit for creating interactive time series graphs. Based on d3.js that simplifies a lot the work with d3.js although is a little bit less powerful.
http://code.shutterstock.com/rickshaw/
I was recently looking for a javascript charting library and I evaluated a whole bunch before finally settling on jqplot which fit my requirements very well. As Jean Vincent's answer mentioned you are really choosing between canvas based and svg based solution.
To my mind the major pros and cons were as follows. The SVG based solutions like Raphael (and offshoots) are great if you want to construct highly dynamic/interactive charts. Or if you charting requirements are very much outside the norm (e.g. you want to create some sort of hybrid chart or you've come up with a new visualization that no-one else has thought of yet). The downside is the learning curve and the amount of code you will have to write. You won't be banging out charts in a few minutes, be prepared to invest some real learning time and then to write a goodly amount of code to produce a relatively simple chart.
If your charting requirements are reasonably standard, e.g. you want some line or bar graphs or perhaps a pie chart or two, with limited interactivity, then it is worth looking at canvas based solutions. There will be hardly any learning curve, you'll be able to get basic charts going within a few minutes, you won't need to write a lot of code, a few lines of basic javascript/jquery will be all you need. Of course you will only be able to produce the specific types of charts that the library supports, usually limited to various flavors of line, bar, pie. The interactivity choices will be extremely limited, that is to say non-existent for many of the libraries out there, although some limited hover effects are possible with the better ones.
I went with JQplot which is a canvas based solution since I only really needed some standard types of charts. From my research and playing around with the various choices I found it to be reasonably full-featured (if you're only after the standard charts) and extremely easy to use, so I would recommend it if your requirements are similar.
To summarize, simple and want charts now, then go with JQplot. Complex/different and not pressed for time then go with Raphael and friends.
jqPlot is great. If your requirements are fairly "normal" and you just want to draw some charts, you're probably overwhelmed by the quantity of js charting options. Assuming you don't want to do hours of research, just go with jqPlot as it's probably your best bet. It covers most use cases for most people well. Some of the alternatives are specialised on a certain type of chart or built with a certain use case in mind.
As some kind of late answer, try d3.js
http://mbostock.github.com/d3/
It's the continuation of protovis.
The big difference to flot is in the number of features supported.
Though flot may be simpler, d3.js is definitely more powerful.
Flotr is another, pure Javascript chart-library based on Prototype and inspired by Flot
Try PlotKit
I'd recommend gRaphaël for pure JavaScript charting along with the pure JavaScript vector graphics library it's built on (Raphaël).
gRaphaël currently supports Firefox 3.0+, Safari 3.0+, Opera 9.5+ and Internet Explorer 6.0+.
a framework: http://www.simile-widgets.org/
a basic: http://www.filamentgroup.com/examples/charting_v2/index_2.php
good looking: http://www.highcharts.com/
Another is RGraph: Javascript charts and graph library:
http://www.rgraph.net
Canvas based so it's fast and there's roughly 20 different chart types. It's free for non-commercial use too!
My favourite (flot) has already been mentioned.
But be sure to investigate Ortho.
It is excellent for tree charts and timelines.
There is a lot of activity in the dojo charting library, and what is great I am using it inside an AIR application without problems too, pretty cool!
See for example there http://www.sitepen.com/blog/2008/05/27/dojo-charting-event-support-has-landed/
Check out Google Visualization API, which is kind of a generalization of the simpler Chart API
http://code.google.com/apis/visualization/documentation/gallery.html
Has very cool interactive options including maps, gauges, and charts.
We just bought a license of TechOctave Charts Suite for our new startup. I highly recommend them. Licensing is simple. Charts look great! It was easy to get started and has a powerful API for when we need it. I was shocked by how clean and extensible the code is. Really happy with our choice.
Try the MIT simile timeline which could be made into a chart - http://simile.mit.edu/timeline/
or the final one, http://code.google.com/p/gchart/
Not a Javascript library but it may be a suitable alternative - check out Google Charts where you can generate charts by passing querystring data to their web service.
Take a look at Bluff. It's a JavaScript port of the Gruff graphing library for Ruby.
Protochart is all you need
Sencha acquired Raphael and now their charts are pure javascript as of version 4. Emprise and HighCharts mentioned above are my two favorites.
http://www.sencha.com/
For the more unusual charts: http://thejit.org/
I can recommend ArcadiaCharts. A brand-new professional charting library for JavaScript and GWT. Runs in all browsers without plugins. Easy and fast to use: creates great looking charts with just a few lines of code.
Free for non-commercial use.
Fusion charts has a new javascript/jquery library that looks promising.
In case what you need is bar chart only. I published some code I've been using in an old project. Someone told me the VML implementation is broken on recent versions of IE, but the SVG should work just fine. Might be getting back to the project and release some serverside renderers I already have and maybe WebGL rendering layer. There's a link: http://blog.conquex.com/?p=64
Probably not what the OP is looking for, but since this question has become a list of JS charting library options: jQuery Sparklines is really cool.
Check out ZingChart HTML5 Canvas, SVG, VML and Flash Charts. Very powerful and compatible library. I'm on the Zing team - mention us on twitter #zingchart or shoot any questions to support#zingchart.com.
Currently, I am evaluating the creating of a map based system to plot data. This data would consists of shape layers (a grid - stored in a SQL 2008 Geography column) and multiple points (~5500 initially - Lat/Lon points in the same DB) that will plot the location of items on the grid. So, my question is - is there a large difference between the SilverLight Bing Map implementation and the JavaScript based implementation. Here is what I can gather from my research:
SilverLight Pros
Can handle large amounts of data more quickly
API/SDK to tie directly to .NET application code
JavaScript Pros
Do not have to download/install Silverlight on client side
Can leverage JQuery or other frameworks to pull data from webservice (I know SL can do this to using WCF, but I know JQuery rather well)
I know from this list that it looks like I should go with Silverlight, however I also have 'NEVER' done a bit of coding using the XAML stuff. Most of my experience as of late is the .NET MVC stuff and I cannot help but to take that into account as well. Does anyone know the performance 'ratio' between SilverLight and Javascript or at what point JavaScript implementation will choke? One more thing, I have looked at the DataConnect project on codeplex, but it seems to be broken - I cannot get the WKT or XAML functions to work either on their live site or the downloaded project.
If anyone out there has done a comparison/has words of wisdom for guidance/can add to my list for either of the two, I am all ears.
EDIT
I found a great Javascript/.NET MVC application example using SQL 2008 on CodePlex - Ajax Map Data Connector. It gives examples of pulling polygons, lines and points of interest from the database, placing them on the map using images tiles or the MS API as well as using intersection to determine items around a point or within a bounded box.
Personally I prefer the Javascript version because it's more multiplatform (e.g. mobiles) and easy to integrate in a webapp (plus I also love jQuery), but I think the deciding factor is probably what do you want to use the application for ?
However for Javascript, even if I love version 7, you may want to stick with version 6.3 for now because too many core components were removed (but are planned to be re-added in the future), e.g. infoboxes and client-side clustering (of course you can do your own implementations, that's what I did personally, but I would advise to use 6.3 for now).
I'd go with the javascript control (better support for multi-devices, is currently being more actively developed than the Silverlight control, sounds better suited to your skill set). However, don't try to plot 5,500 points on it. It will die.
What's more, if you're thinking about plotting 5,500 points then there's something wrong with your application design anyway - an end user is not going to be able to discern that many different points on the map. Let them filter for particular types of points, or only retrieve those that are visible in the current mapview, or use clustering to group up points at higher zoom levels - you should only be looking to have at most maybe 100 - 200 data visible data points on the map at any one time. If you really must plot that many points, then pre-render them as a tile layer and cache this rather than trying to plot dynamic vector data on the map.
And, I disagree with wildpeaks - v 7.0 is the latest stable release of the Bing Maps AJAX platform, and is a major change from v6.3. If you start coding with v6.3 now you'll only have to go through upheaval at a later date when you have to migrate to v7.0. Best to start off with v7.0 than learn a deprecated API.