We Keep Coding

Force directed layout

when i use THIS algorithm to calculate force directed layout of graph where from 1 node is 10 or more edges, calculation failed.
I guess it's because calculated position is so much large and it's represented as "NaN".
Input data:
var g = new Graph("canvas", 960, 700 );
g.createVertex("a");
g.createVertex("a1");
g.createVertex("a2");
g.createVertex("a3");
g.createVertex("a4");
g.createVertex("a5");
g.createVertex("a6");
g.createVertex("a7");
g.createVertex("a8");
g.createVertex("a9");
g.createVertex("a10");
g.createVertex("a11");
g.createVertex("a12");
g.createVertex("a13");
g.createVertex("a14");
g.createVertex("a15");
g.createVertex("a16");
g.createEdge("a","a1");
g.createEdge("a","a2");
g.createEdge("a","a3");
g.createEdge("a","a4");
g.createEdge("a","a5");
g.createEdge("a","a6");
g.createEdge("a","a7");
g.createEdge("a","a8");
g.createEdge("a","a9");
g.createEdge("a","a10");
g.createEdge("a","a11");
g.createEdge("a","a12");
g.createEdge("a","a13");
g.createEdge("a","a14");
g.createEdge("a","a15");
g.createEdge("a","a16");
g.go();
When i use this data, sometimes is graph rendered without problems, but mostly it breaks.
Can someone help me to fix it?
Thank you.

In the link you provided, the third example has something like:
g.repulsion = g.repulsion / 8;
g.spring_length = 1;
This apparently makes it more compact. Since, you want to spread out the graph, you should probably multiply like this:
g.repulsion = g.repulsion * 10;
Try different numbers to see if it works. In future, I would suggest to use something with better documentation like D3.js.

NVD3 - configuring ticks on axis

I have a nvd3 line chart which displays a time series and can't get the ticks on the x axis right.
For longer time spans, it works as expected. But for shorter time spans (here: 12/31/05 to 01/01/06), the same date is displayed for multiple ticks:
Please have a look at the code for this chart on JSFiddle
I want the chart to only display ticks at data points, and not in between. Is that possible with a line chart? From my understanding, it is possible with d3, but I can't figure out if this functionality is exposed by nvd3.
I've tried explicitly setting the number of ticks with chart.xAxis.ticks() without success. The only thing that has any effect is explicitly setting the tick values with chart.xAxis.tickValues([...]), but I would prefer not having to calculate them myself.

The way to solve this in general is with custom multi-scale time formats. Note that this example itself will not work with NVD3 because it uses an older version of D3, the examples below will though.
The problem in your case is that the ticks aren't "clean" divisions of time and if you apply a multi-scale format, you get something like this. It always shows the more fine-grained format because anything else would involve a loss of precision.
You can however use a simple heuristic to show the date instead of the time if the hour is less than 3, which works reasonably well in your case. See here for an example. The proper way to do this would be to make your ticks clean divisions.
Which brings us to your actual question. There's no other way than to explicitly set .tickValues() for what you want to do, but you can compute the x positions in your data quite easily:
var xvalues = [],
tmp = data.map(function(e) {
return e.values.map(function(d) { return d[0]; });
});
xvalues.concat.apply(xvalues, tmp);
The code is not the prettiest because it's a nested structure, but fairly straightforward. Using this, you can set your tick values explicitly, full example here.

Grouped and stacked multiBarChart with NVD3

Possible duplicate question to Bar chart in Javascript: stacked bars + grouped bars
I'm trying to create a stacked bar chart that lets you compare 2 values (dark and mid blue) to last week's data points (the secondary light blues 'behind').
Starting with multiBarChart() with .stacked(true) first I tried merging both weeks into a single array of 14 bars, where the x position could help group the bars. I tried to form my combined array of objects where .x properties' values are 0, 0.3, 1, 1.3, 2, 2.3, etc.
Unfortunately unlike lineChart() it doesn't use the x value for positioning.
Another idea is to exploit the group .stacked(false), providing 4 items (instead of 2) with the same x value. These then appear overlaid on top of each other instead of stacked.
Here the spacing looks good, but how do I stack these 2 by 2?

Hey I just developed grouped+stacked bar chart on d3.js. It is not NVD3 but it may help you.
Source
Demo

Let me just say up front that I am SO not an nvd3 expert. I'm barely past the getting-started stage myself.
That said, it looks like you're making this too hard on yourself.
I think you really want to send nvd3 two sets of data, with the x's matching between the two. (E.g., (1,y1a) corresponding to (1,y2a), then (2,y2a) with (2,y2b), etc.)
You can see this more clearly by the following:
Head to their Live Code page
Select the Group/Stacked Bar Chart.
Select the Data (JSON) tab.
Replace the first function with the following, and observe the resulting x values.:
function() {
return stream_layers(2,10,.1).map(function(data, i) {
alert( 'Stream '+i+': '+JSON.stringify(data));
return {
key: 'Stream' + i,
values: data
};
});
}
Best as I understand it, that's the model you're looking for.

jqplot custom legends

I try to create legends for jqPlot but they will just show the max and min values for y slope. Just like 'Max: 16 Min:2', but I can't figure out how. E.g, I tried giving labels as
var labels = [{'Max':16}, {'Min':2}];
But nothing seems to be working. Do you know any quick method or I should create my own special renderer for this?
Thanks.

ufucuk.
I had the same problem and I solved it doing the following:
$("#hereGoesMyMinValue").text($("#myGraphId").
children(".jqplotxaxis").children(":first").text());
//first value shown
$("#hereGoesMyMaxValue").text($("#myGraphId").
children(".jqplot-xaxis").children(":last").text());
//last value shown
Note that this will be done only once. Here explains how to sync them
By the way, you also can do the following:
var title=$("#selecting_period").children(".jqplot-title").text();
var coolTitle=
title+": Showing "+ $("#myGraphId").children(".jqplot-xaxis").
children(":first").text()+" to "+$("#myGraphId").
children(".jqplot-xaxis").children(":last").text();
$("#myGraphId").children(".jqplot-title").text(coolTitle);

Making line charts y-axis work?

I'm implementing this charting solution and I'm a little stuck. If I have to line charts in the same graph, as in the first example in the link, but there seems to be a problem with the y-axis. It doesn't show the right ratio between the first and second line chart. See the two images below:
Does anybody have an idea of how to solve this?!
Thanx!
P

I think I understand your problem: the scale of each of the lines on the graph are independent, and the raphael line graph js file is looping through the table data and setting each line's max according to its max value. My recommendation to anyone thinking of using raphaeljs for graphing purposes is to use Graphael instead.
If you REALLY want to fix it, change line 366 of the raphael_linechart in the example files to
max = this.max,
Then add a function that gets the data, and changes the this.max variable to the max value of all the data:
changeMaxValue: function(id) {
var table = helpers.loadTableData(id);
var max = Math.max.apply(Math, table.data);
if(max > this.max) {
this.max = max;
}
},
Pass the id of each table data piece before you actually graph the lines. I didn't test this, so you will have to work out the kinks.