Develop Reference

vis.js network: hierarchical layout issue related to number of nodes

I'm facing a "strange" problem I'm not able to solve looking at vis.js documentation.
I created a network with a fixed hierarchy defining a specific level for each node.
Total number of nodes 51. This is the result:
If I add another node at the bottom of the network scheme (total 52) the layout changes, the spacial disposition of the nodes totally move trying to fill white space as you can see:
I tried several options without any success.
These are the options I'm using at the moment:
options = {
layout: {
improvedLayout: false,
hierarchical: {
enabled: true,
levelSeparation: 150,
nodeSpacing: 110,
treeSpacing: 200,
blockShifting: false,
edgeMinimization: true,
parentCentralization: true,
direction: "LR",
sortMethod: "directed",
shakeTowards: "roots"
}
},
interaction:{
tooltipDelay: 100
},
edges: {
font: {
size: 0
}
},
nodes: {
shape: 'circle'
},
physics: false
};
I hope you can give me some suggestion.
Thank you!

you can try to add a randonSeed to the layout in the options object.
layout: {
randomSeed: 1,
improvedLayout: false,
hierarchical: {
enabled: true,
levelSeparation: 150,
nodeSpacing: 110,
treeSpacing: 200,
blockShifting: false,
edgeMinimization: true,
parentCentralization: true,
direction: "LR",
sortMethod: "directed",
shakeTowards: "roots"
}
}
you can change the number (randomSeed: 1) until you get the requested layout.
hope it will help.

Adjust vis.js options to avoid crossed edges/overlapping

So I've read this post, where someone visualizes 4chan posts in a graph. It looks very cool so I wanted to try it out myself. Everything is working good but I'm having some problems with my visjs options.
I am trying to get as close to the options he used. Sadly he hasn't posted them anywhere.
This is what I've got so far:
var options = {
nodes: {
shape: 'dot',
scaling: {
min: 10,
max: 30,
customScalingFunction: function (min,max,total,value) { return value },
label: {
min: 8,
max: 30,
drawThreshold: 12,
maxVisible: 20
}
},
font: {
size: 12,
face: 'Tahoma'
}
},
edges: {
width: 0.15,
color: {inherit: 'from'},
smooth: {
type: 'continuous'
}
},
physics: {
barnesHut: {
springLength: 1000,
springConstant: 1,
avoidOverlap: 1
}
},
interaction: {
tooltipDelay: 200,
hideEdgesOnDrag: true
}
};
My Problem is, that they still don't seem quite right and I also have trouble with overlapping nodes.
JSFiddle
Sorry for the unclean code.

How to customize the Gauge control?

Looking at the radial gauge control.was wondering if it would be possible to make it to look like the following picture, without the needle?

You can get pretty close doing:
$("#gauge").kendoRadialGauge({
pointer: {
// Current value
value: 0.72
},
scale: {
// Start and End angle of the Gauge
startAngle: 0,
endAngle: 180,
// Make range wider and with units inside
rangeSize: 40,
rangeDistance: -10,
// Configure major and minor unit
minorUnit: 0.05,
majorUnit: 0.25,
// Make major ticks same size than minor ticks
majorTicks: {
size: 10
},
// Define min and max (0% - 100%)
min: 0,
max: 1,
// Labels outside the range and number as percentage with no decimals
labels: {
position: "outside",
format: "p0"
},
// Color ranges
ranges: [
{
from: 0,
to: 0.45,
color: "red"
},
{
from: 0.45,
to: 0.80,
color: "yellow"
},
{
from: 0.80,
to: 1.00,
color: "green"
}
]
}
});
Some differences are:
The pointer is solid, you can configure the color but not the border:
There is no "Average" annotation.
You can see it here : http://jsfiddle.net/OnaBai/sThK3/1/

This is quite an old question, but there is a working answer here:
Give a Linear Gauge custom labels

Highcharts: Only animate pie size with donut graph / prevent innersize animation

Fiddle: http://jsfiddle.net/jakelauer/ZENuS/
Highcharts JS call:
$(function () {
$('div').highcharts({
chart: {
backgroundColor: 'rgba(0,0,0,0)',
plotBackgroundColor: null,
plotBorderWidth: null,
plotShadow: false,
width: 500,
height: 500,
margin: [0, 0, 0, 0]
},
title: {
text: null
},
plotOptions: {
pie: {
minSize: 0,
size: 500,
animation: {
duration: 5000,
easing: 'linear'
}
}
},
series: [{
type: 'pie',
innerSize: 486,
data: [1]
}]
});
});
As you can see in the fiddle, while the graph grows, the thickness of the line animates as well as the percentage of the circle it takes up. I'd like the line to stay the same thickness the whole time, and only change how much of the circle it fills. Is this possible?

The Highcharts API only provides options to calibrate the duration and easing of this animation, as you've already seen. The default "scaling" animation into the charts final height/width and thickness of its "donut" cannot be altered. You either have no animation (animation: false) or this "scaling" animation with control over the duration and easing. Like I said, these are the limitations that exist within the Highcharts API; I cannot speak to the feasibility of coming up with some magical workaround via the jQuery UI or any other framework.
In summary:
no?

Unfortunately this option is not possible, but you can request your proposition on http://highcharts.uservoice.com/

Is it possible to have the linear gauge pointer start from the center?

I have a case where I measure negative and positive speed using the same linear gauge. I was wondering if it's possible to have the pointer start with the center as a zero-point? Here's my code:
<script>
function createSpeedGauge() {
$("#speedBar").kendoLinearGauge({
pointer: {
value: 0,
color: "black",
start: 0
},
scale: {
majorUnit: 20,
minorUnit: 2,
min: -120,
max: 120,
vertical: true,
reverse: true,
ranges: [
{
from: -120,
to: -30,
color: "#ffc700"
},
{
from: 120,
to: 30,
color: "#ffc700"
}
]
}
});
}
$(document).ready(function() {
createSpeedGauge();
});
</script>
I've attached an image of how it's setup (the gauge in question on the right side). If this was setup the way I wanted, this gauge would've read -120 from this picture. (Right now, it reads "0" on the black bar, as this is the value set in my js.) Any suggestions?

Solved by setting the starting point to 0 and using SignalR to update the other end of the bar. (Initial starting point)