I am working on http://tradingderivatives.nl/DAX-root.html . Obvious problem: sliding is slow. Reason behind this is that the indexing to 100 on the left side of the selection has to be done by explicit coding in Javascript - at least, I did not find a better way to do this. The Google Vizualisation libary is also slow - much slower than the Dygraphs annotated timeline.
I found the range-selector example in the dygraphs online gallery. This is almost what I need - apart from the automated indexing to 100 on the left of the graph.
Questions/feature requests:
Is there a way to have the graph automatically indexed to 100? This indexing would make Dygraphs suddenly ideal for comparing trends of different data sets over any time range! Cool. I need this re-indexing even after zooming in to selected data of the full data range.
Can the area below a section of the graph be coloured as is currently done in http://tradingderivatives.nl/DAX-root.html? In this way I don't have to work with three data series. This trick is clear from the code of the DAX page. Highlighting a section of the graph is supported in Dygraphs, colouring below a graph is supported, but conditional highlighting per data segment appears to be unsupported - and this is the easiest way to work with automatic indexing to 100.
See the straw broom example for how to have the graph automatically indexed to 100 by using the rebase plugin:
https://github.com/danvk/dygraphs/blob/master/tests/straw-broom.html
<script src="../dist/dygraph.js"></script>
<script src="../src/extras/rebase.js"></script>
<script>
...
var rebase = new Dygraph.Plugins.Rebase(100);
new Dygraph(chartDiv, stockData, { plugins: [rebase] });
</script>
Related
I've been looking all over but not found any answers for this.
So a bit of background. I've created an in-house analytics system for the company I work for off the back of highcharts. The analytics data is pulled from a nosql database via elasticsearch queries. The returned information is converted into formats suitable for different highcharts graphs. The range and interval of the data is user defined and plumbed into the query, manipulating that query behind the scenes to say "now-1d" to "now" or "now-1w" etc for the range of data required.
So i'm trying to add a flag series to my system. The flags are based on a number of comments pulled from the same database. The problem is that, whilst I can remove the flag series from the main legend area, the older flags expand the graph out of recognition (Example Image)
The range of the data is user defined, like I said, but in a different format to one supported in javascript. This means I cant just force the min and max of the x-axis.... because I don't know (or even care) about what they are in my system.
Im wondering if there is any way to force a specific series to not scale the x-axis of the graph and be ignored in that regard.
Thanks
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.
I would like to make a scatter plot using D3 with the ability of only looking at a small section at a time using some sort of slider across the x-axis. Is there a method in javascript where I can efficiently buffer the data and quickly access the elements as the user scrolls left or right?
My goal is similar to this protovis example here, but with 10 times the amount of data. This example chokes when I make that many data points.
I have done a scatterplot with around 10k points where I needed to filter sections of the plot interactively.
I share a series of tips that worked for me, which I hope some may hopefully help you too:
Use a key function for your .data() operator as it is done at the end of this tutorial. The advantage of using keys is that you do not need to update elements that do not change.
Not related to d3, but I divided my data space into a grid, so that each data point is associated to a single cell (in other words each cell is an index to a set of points). In this way, when I needed to access from, let's say, from x_0 to x_1, I knew what cells I needed, and hence I could access a much more refined set of possible data points (avoiding iterating along all points).
Avoid transitions: from my personal experiences the .transition() is not very smooth when thousand of SVG elements are selected (it may be better now in newer versions or with faster processors)
In my case it was more convenient to make points invisible (.attr("display","none")) or visible rather than removing and creating SVG elements (I wonder if this is more time efficient too)
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.
Are there any JavaScript libraries out there that allow you to create heatmaps using in-browser graphic rendering features such as <canvas> or SVG?
I know about HeatMapAPI.com, but their heat maps are generated on the server side. I think that in the era of <canvas> element we don't need that anymore!
If there is nothing like this yet, are there any volunteers to participate in creating such a tool?
I created a demo including a real-time heatmap with the <canvas> element and javascript. I also added the documented code next to the heatmap sample. The heatmap generation process is based on an alpha map in the canvas element which depends on the users mouse movement.
You can take a look at my demo right here:
http://www.patrick-wied.at/static/heatmap/
I created a hit map with the help of Google Visualization API [http://code.google.com/apis/visualization/documentation/]. It uses SVG & VML, and also cross browser compatible. Hope it'll help.
I have some js/canvas/web worker code here though there's plenty of work that could be done with it. It's also pushed online at http://heatmapthing.heroku.com/. Your browser needs to support web workers for this.
Please send pull requests if you improve it. The pseudo-gaussian smoothing is slooooooooow as hell right now.
I also gave it a try, but without doing the Gaussian smoothing my self, I let canvas do that for me. Basically I draw a radial gradient for every point in gray scale and then colorize this gray scale image (see "Creating Heat Maps with .NET 2.0 (C#)" for a detailed explanation, my implementation differs a bit).
The result looks like this:
(source: bitbucket.org)
The rendering time isn't that bad on Chrome/Chromium. I think the most time consuming part is the colorizing, because I am looping over every pixel.
You can find the code here: http://trac.openlayers.org/browser/sandbox/camptocamp/canvas/openlayers/lib/heatmap-js/heatmap.js
I played with heatmap a few years ago. See http://www.urbigene.com/treemapphp/, the algorithm came from here: http://www.cs.umd.edu/hcil/treemap-history/
Heatcanvas looks quite good. It also has a leaflet extension to run on top of openstreetmaps
https://github.com/sunng87/heatcanvas
It runs quite well on few points (< 200) or so, but gets a bit slow on many thousands of points. I think it might also recalculate more often than necessary after pan and zoom, and I had some problems with changing the heatmap on the fly (replacing heatmap with another using javascript), guess I need to experiment a bit more with it, or contact the author