How to have smooth (horizontal) transition on a c3js dynamic chart - javascript

I started playing with c3js hoping to get a good looking dynamic chart. While testing it I noticed that the transition between each load functions seems to happen without any sort of transition. I also tried to use the flow function but got to the same result. I couldn't find anything on this topic only but basically is there a way to change this behavior and have a smooth transition when a new data point comes in?
You can see my example here:
transition: {
duration: 0
},
https://jsfiddle.net/g4cq6pg0/1/
When I actually enable transition it works well (horizontally), until I start removing some data to add new metrics, then things go south. Instead of just transitioning horizontally it also transition vertically which makes things very hard to look at (350 is the default value):
transition: {
duration: 350
},
https://jsfiddle.net/g4cq6pg0/2/
How can I force a smooth horizontal transition only?? Here is an examples (using D3 only) of what I mean:
http://bl.ocks.org/simenbrekken/6634070

Yeah, the line's moving, but the points are just bobbing up and down vertically to fit the current values, not moving with the line...
Have a look at the question here --> Dynamic timeseries C3js chart
The flow api lets you do what you ask but has a significant bug (see my answer there), so adjusting the questioner's own answer may be your best bet for the smooth horizontal transition
PS. If you also want to stop the y axis auto-sizing, you'll need this in the chart declaration:
axis: {
y: {
max: 1 // translates to 100% on the y axis
}
}

c3js has a .flow method specifically for this: http://c3js.org/samples/api_flow.html
Be aware it starts to freeze if you switch to other tab and return after a while.

Related

Highcharts Bubble chart mouseover breaking animation

Good day, trying to figure out one last piece with a code rewrite that we've been working on. We have a bubble chart that animates, to essentially simulate a motion chart, since most of the motion chart libraries we relied on previously incorporated flash.
It seems like the mouseover space for the original render sticks around during animation, and causes the bubbles to "reset", I've noticed the tooltips also stick to the original location. Any ideas/suggestions?
I've copied up a mostly complete version here (the loading of additional variables isn't implemented):
https://nl.communityaccounts.ca/motionchart/motion_dev.asp
I'm working on a standalone jsfiddle as well, can put a link to that soon.
Highcharts uses plotX and plotY point's properties to position the tooltip in a default way. In your case, only properties: x, y, z and point's graphic are updated. You need to also update plotX and plotY:
dataObject.plotX = data.x + data.z;
dataObject.plotY = data.y + data.z;
Live demo: https://jsfiddle.net/BlackLabel/9drynwcz/

Vis.js: Lessen layout noise for multiple central nodes (radial force)

I'm working with vis.js to display some graphs. The problem is that layouts with multiple central nodes get noisy (the central nodes' neighbours overlap). A layout similar to the attached image is desirable.
Is it possible to achieve this using vis.js?
Looks like there is an option that should solve your issue (I've found it after playing with physicsConfiguration like I suggested earlier):
physics has avoidOverlap property (float between 0 and 1) that can be used like this:
var options = {
...
physics: {
barnesHut: {
avoidOverlap: 0.5
},
...
}
}
If you try it in the configuration demo, you'll see that with avoidOverlap equal to 0 it's quite possible to drag and move nodes so that those overlap edges and the network stays in that position:
but once we increase this value, nodes start to be bounced from edges and can't really stay in that position:
Note though, that this option doesn't prevent edge-edge crossing, only edge-node overlapping (see physics/barnesHut/avoidOverlap). The physics docs page doesn't contain the word "cross" at all and each occurance of "overlap" is about edge-node thing.
So this will make the layout less noisy, but won't eliminate crossed edges.

Vis.js not showing graph when many nodes are added

I am making a web app to show relationships between items using Vis.js, everything works perfectly fine until I get to the point where I need to display ~260 nodes with ~1200 edges between them.
Once I get to that amount of nodes, the graph just shows a blank space and a blue line, nothing else. As soon as I try to zoom it, the line disappears and it's all white.
When I look at the position of the nodes I can see that many of them are in negative or very big x, y positions (generally -300 for x and around 478759527705558300000 for y).
I have tried, to no avail, to disable physics. The graph is in hierarchichal mode, with levels manually set in the code, but the levels are correct.
Network options (the improvedLayout option was just a possibility I found on the internet; it works just the same if I remove it):
var options = {
layout: {
improvedLayout: false,
hierarchical: {
direction: direction,
sortMethod: "directed"
}
}
}
Screenshot:
I have hierarchical layout graph which consists of around 615 nodes and 614 edges (excluding 40 odd cluster nodes, some of them cluster of clusters). I landed into same problem with visjs.
One quick thing which helped me to get over this problem was to explicitly call network.stabilize() method with an argument specifying number of iterations. Default iterations are 1000. I passed 10000 and graph stabilized it self nicely. It took a few more seconds, i was fine with that. But stabilization times shoots up as number nodes increased to ~1000. So i started looking into visjs code for solution.
While looking in visjs code, i found that inside function setupHierarchicalLayout() there is a call to _condenseHierarchy().
This method tries to minimize white spaces between nodes and edges (yet to understand the code fully). _condenseHierarchy() modifies coordinates of a node. See Y coordinate before and after call to _condenseHierarchy() below:
(this.body.nodes["node-11"]).y
1530
(this.body.nodes["node-11"]).y
64920
When a node gets a distant position it takes lots of iterations (in stabilize) to bring it closer together with other nodes in graph. I disabled _condenseHierarchy() and got the graph displayed nicely.
I'm sure disabling _condenseHierarchy() would bring in some other issues as i proceed further. I am going to spend some more time to understand and experiment with _condenseHierarchy().
To solve this problem, you can adjust hierarchical layout parameters, such as nodeSpacing, levelSeparation and treeSpacing. Here is an example hierarchicalLayoutWithoutPhysics

Tricky raphael svg animation

I've created a 'donut' chart originally from this jsfiddle, using raphael.
I have tweaked this script to suit my needs and currently have this being rendered.
My aim is to animate each slice (at the same time); for example make the blue slice grow to 60%; and the red slice shrink to 40%.
I have been able to redraw the slices by removing the existing one and quickly re-rendering a new one with adjusted values (e.g. 51, 49). But the problem here is that it is instant.
My question is,
(a) Can I animate this without the need to redraw the object (and how)?
(b) If not, how I can animate this effect using a redraw logic?
Yes. There is an example of doing this very thing on the Raphael demos page where you got the pie chart. See the Growing Pie demo.
You should separate the code in which you generate the path into a standalone function so you can use it later to return new paths. In order to use animate(), you'll need to define a function on the customAttributes object; it should return (at least) an object with the path property set to your slice's new path.
Since you have labels, you'll probably want to modify the code such that the pie slices expand/shrink relative to their center, so that you don't have to move the labels, too, since the labels are centered on their slice's "axis."
Update
Here's a JSFiddle with a simple example, pretty much the same as Dmitri's Growing Pie demo, except more like your chart. I export a setValue() method to change slice sizes and call it when the page loads. See his blog post about adding customAttributes, too.
In my last paragraph above, I was off the mark a bit. Your chart wasn't the one with labels; I had them mixed up. Also, it would be harder to keep slices centered, so I didn't do that after all. The animate() function sets each segment to its new starting and ending points on the circle, and Raphael figures out the intermediate points. As you can see, you can pass multiple arguments in an array.
this.customAttributes.slice = function(a0, a1) { /*...*/ }
// ...
chart.push(paper.path().attr({slice:[0, Math.PI/2 ]})
Can't see all the fiddle because I'm on iPod however it sounds like you need to have an animate call inside a function that you will need to write
Use the callback parameter that calls the function it sits inside.
Code your recursively called function so it eventually completes when all the work is done.
Each call to the function will happen at the end of every elapssed time interval you specify...

Is it possible to rezise the graph dots in the jquery library flot when being hovered?

when working with the jquery library flot (like this), you might want increase precision when hovering over he dots, so my question is if there is any way of making this area of whitin a dot is hovarable bigger?
Use the radius property of the series hash you pass to the $.plot function to set the radius of the clickable data point on the chart. So instead of this as it is now:
points: { show: true }
change it to, say, this:
points: { show: true, radius: 6 }
The measurement is in pixels and the default radius is 3 pixels. Personally speaking I wouldn't go much above that if the data points are close together like in the example chart: you run into the opposite problem where all the points overlap and run into each other.

Categories

Resources