Is it possible to highlight 2 series at once in Dygraphs? - javascript

I've got a whole set of graphs I produce from a financial model: each one has, say, 5-10 data series on it.
I now want to compare the outputs of two different models: they produce exactly equivalent data series, just with (probably) different numbers in them. I can see three ways of displaying a comparison:
have a graph just showing 2 series, one from each model. Allow the user to select which series to show. This is pretty easy to do, but has the disadvantage that it doesn't show any relationships there might be between series coming from the same model.
Have side by side graphs, one for each model. The highlighting is synchronized, so that the series highlighted on one is highlighted on the other, and the same x value is also highlighted. It seems that this is possible (see this question). This has the disadvantage that the two versions of the series you are most interested in at the moment (the one that is highlighted) are on different charts, so are more difficult to compare.
Have a graph showing all the series from both models. Use the same colors for the series, but have model 1 solid line and model 2 dotted line, say. When you highlight one series, its pair is also highlighted (presumably using the highlight callback). But is it possible to highlight two series at once? This would definitely be my preferred option, if it's possible.
So, is it possible to highlight two series at once? Or, alternatively, is there a better way to show the comparison?

It's not possible to highlight two series at once (in the sense of highlightSeriesOpts), but you can do something similar. When the selected series changes, call:
g.updateOptions({series: { otherSeriesName: { strokeWidth: 2 } })
Or however you want to indicate highlighting. You can do this using highlightCallback and unhighlightCallback.

Related

Routing algorithm for drawing non-intersecting lines

I'm working on a flowchart system in JS, that allows the user to click on one element followed by another, and the program inserts an arrow connecting them. For this, I need a line-drawing algorithm which meets the following criteria:
Only straight lines/90deg turns
Guaranteed to take an efficient route, such that...
... it can take into consideration other lines (as it cannot intersect) - e.g, if I insert one line, and then another, it is able to draw the second without having to rearrange the first, or take a wildly inefficient route to get to its destination to avoid the first line.
If you know any algorithms which fit the bill (I've only found ones that match just one or at most two of the criteria), I'd be interested; also, if there's a JS implementation I can steal then please link that too.
Some notes:
Time complexity does not matter, as long as the result is aesthetically pleasant
There can be multiple lines originating from or entering one element. This is to allow for loopbacks/subroutines.
Lines can go on top of each other, just not perpendicularly across one another.
Examples:
image 1
I click on one element...
image 2
... and then on another, which then inserts the arrow between them.
image 3
If I continue this, I expect to get a linear sequence, with the arrows inserted automagically.
image 4
Alternatively, I can make use of multiple inputs/outputs to get a more closed chart, generating a more complex result.
image 5
I should be able to do this in any order to get the same result.

How to have multiple of the same objects appear at once

I am writing a simple program, in this I want multiple ellipses to appear at the same time, is there a function for this to happen or a method to follow for multiple ellipses of the same kind to be produced all across the screen in different places?

Highcharts error when add and shift data to hidden series

So there seems to be an error when dynamically adding data to a hidden series in Highcharts.
Say I have two series on a chart that both update on the same interval of time. Say also that I'd like to ensure that neither of the two series have more than a certain number of points, therefore leading me to use the optional shift boolean during a series.addPoint() operation.
The problem I run into is that, if one of the series is toggled and made invisible for some time, when re-toggling that series, much of the data that should've been shifted is still present.
I've made an example fiddle of this (just toggle data1 in the chart legend for a few seconds and then re-toggle)
http://jsfiddle.net/mmuelle4/c00cLfs5/ (change funcToTest to see how various fixes don't quite give the "shift" look)
I'm using the latest version at the time of this post (Highcharts JS v4.0.4).
I think what I've uncovered is still an error that will need to be addressed by Highcharts, but I figured I'd ask the question - is there a better way to perform series length checking and data adding/shifting for multiple series than in the linked fiddle that would get around this issue? I can think of some clunky ones off the top of my head, but I thought I'd come to SO for some elegance :)
Link to bug on Github (for tracking): https://github.com/highslide-software/highcharts.com/issues/3420
You can workaround this issue by managing shift on your own. Simply store in some array all points and shift them there. Then call series.setData(array_of_points,redraw,animation) instead of series.addPoint(points,redraw,animation, shift).
In short:
when series is hidden use series.setData()
when series is visible use series.addPoint() with shift-param set to true|false

Synchronize brushes across different objects

I enhanced the original implementation of parallel coordinates https://github.com/syntagmatic/parallel-coordinates. The current visualisation looks like this http://xmashallax.xm.funpic.de/bc/test_csv.html:
Basically, there are 3 different parallel coordinate widget arranged in form of a matrix with different axes orders now.
My current target is to synchronize brushes between these rows and I don't have any idea how I could achieve this. I have 3 different objects and want them to synchronize their changes immediately (if possible). Let's say I create a brush in row 1 at cylinders. Now row 2 and 3 cylinders should apply that brush to their data.
A "brush" handler is already implemented, but my problem is to inform the other handlers with a callback or anything like this (Observer pattern crosses my mind while I'm writing this). Although I spent many hours within the original code, I still don't understand every detail and need some help.
Yeah, you should use the Observer pattern.

D3 Scatterplot with thousands of data points

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)

Categories