Adding legend Heading to d3 / nvd3 charts - d3.js

I am working on the example of scatter plot from NVD3: http://nvd3.org/examples/scatter.html
As you can see in this example, in Legend, word "Group" gets mentioned repetitively for every series. Is it possible to write the word "Group" before the legend starts and then each of the series just show numbers "1", "2", "3" and so on?
Thanks !!

You can use chart.legend.key() (source code):
chart.legend.key(function(d){return "Group "+d.key})
If the key attribute is 0 instead of Group 0, you will have what you want.

Related

d3js Multiline ... How can I have the Y values?

I am using this sample that is very nice ...
http://bl.ocks.org/aiMojica10/7a3a9233f3bcd60f0c3935c5875e850d
Partidos followers
or the sample ...
http://bl.ocks.org/asielen/44ffca2877d0132572cb
We can see the values of "Y" being updated as we move the mouse. But, I would like to know how to display the legend and values at the top of the chart, for example next to the caption "Day:" or "Year" in the samples ?
In other words, I would like all values of Y in separeted variables.
Well, what I need to change in the multiline.js ?
Thanks,

Amcharts - Remove balloon

I've got a multi-axis chart with several lines in the graph.Currently as I move the mouse over the chart, several balloons appear at each point showing the values of the various lines at that point. At the same time, the legend at the bottom of the graph also displays values for these points. Is there a way I can disable the balloon text from appearing when I hover over the chart. The values appearing in the legend area is sufficient.
Just insert "showBalloon": false for each graph. Reference
use baloon object in graph option to enable and disable amchart baloon.
"graphs": [
{
"valueAxis": "item1",
"balloon": {
"enabled": false
}
]

Can you make the bubble size and color dependend on a MDX measure in icCube amChart widget?

I am trying to make a dynamic chart in icCube, in which bubbles are sized and colored in accordance with a specific data field in the MDX result set.
Example MDX result set:
(the x/y coordinates have been removed for the sake of simplicity):
amount color bullet size
Swiss 100 #0000FF 10
Spain 120 #FF0000 12
NL 70 #00FF00 7
I do not know how to do this now in the amChart widget in icCube, but I know it is possible to do this in amCharts itself. You can set for example the following attributes in the amCharts editor:
Alpha field, Bullet field, Bullet size field, Description field, Fill colors field, Label color field, Line color field, ... etc (see for more in the amCharts live editor).
Enclosed a sample chart with two series, in which one has colored bubbles:
example
Is it possible in icCube web reporting to do this, and if so, how?
Yes it is possible:
The table should look like this:
In your amCharts bubble widget, add the following in Graph:
"colorField":"color" //the name of the column that contains the colors
and set use mdx colors to "no".
I named my colorField "kleur". Any value here is possible, but it has to be the same as the column name that contains the colors.
Yes you can, just you have to write the following into the "Extra Options" field:
:{
graphs:[{
xField: "your_x_field",
yField: "your_y_field",
valueField: "amount",
bulletSizeField: "bullet size",
bullet : "round",
colorField: "color"
}]
}
Note that, your graphs defined above will be overwritten by this one, you have to specify here all the graph settings.

DC.js Choropleth filtering Issue

I am trying to filter data on my choropleth chart from a bargraph. Strange thing is that it is not showing correct value on selecting a bar from the accompanying bar chart.
Here is the jsfiddle: https://jsfiddle.net/anmolkoul/jk8LammL/
The script code begins from line 4794
If i select WIN004 from the bar chart, it should highlight only five states and the tooltip should reflect the values for the data. Some states are highlighted for whom WIN004 does not exist.
I changed the properties of the choropleth from
.colors(d3.scale.quantize().range(["#F90D00", "#F63F00", "#F36F01", "#F09E01", "#EDCB02", "#DDEA03", "#ADE703", "#7EE404", "#50E104", "#24DE05", "#05DB11"]))
.colorDomain([-1, 1])
To
.colors(d3.scale.linear().range(["green", "white", "red"]))
.colorDomain([-2, 0, 2])
But i get a lot of white states where its hard to discern what has been highlighted. The tool tip for some white-ed-out states show -0.00 :/
Here is the fiddle http://jsfiddle.net/anmolkoul/jk8LammL/1/
So i guess either its a problem with my color range or how my data is getting parsed.
I would ideally like to specify the data ranges in the .colorDomain based on the top and bottom values of the riskIndicator dimension. My functions are not working though. Should i use d3.max or riskIndicator.top here?
EDIT:
I got the color domain dynamic by using the min and max values but still the graph is not performing as expected? Could this be an issue with the geochoropleth chart? I further took a working geochoropleth example and ported my data to it and even that gave me the same issue of representing data incorrectly. I thoughit could be a data problem but i validated using a couple of good BI tools and their map charts displayed data correctly.
Could this be an issue with the dc choropleth?
Thank you.
Anmol
This has the same root cause as the issue in this question:
Crossfilter showing negative numbers on dc.js with no negative numbers in the dataset
In short, floating point numbers don't always cancel out to zero when added and subtracted. This "fake group" will ensure they snap to zero when they get close:
function snap_to_zero(source_group) {
return {
all:function () {
return source_group.all().map(function(d) {
return {key: d.key,
value: (Math.abs(d.value)<1e-6) ? 0 : d.value};
});
}
};
}
Added it to the FAQ!

NVD3 X axis incorrect ordering (dates)

I'm trying to visualize 2 series but when I visualize them together, the dates don't go in sequential order anymore.
Here is the fiddle: http://jsfiddle.net/hohenheim/6R7mu/21/ Notice the weird x-axis.
Is there a way to fix the x axis on nvd3?
The data looks like this:
data1 = [{
"date": 1396828800,
"impressions": 49145385
}, {
"date": 1396915200,
"impressions": 46704447
} ....
The NVD3 "multiBarChart" uses an ordinal (category) scale, so it will only display the x-values you give it, in the order in which they are added to the scale. Because your two series only partially overlap on the x axis that's causing problems.
Unlike other NVD3 chart types, the multiBarChart doesn't give you the option of setting your own scale -- it needs to use an ordinal scale in order to generate even widths for the bars. However, you can set the x domain (the list of categories to use for each bar), by calling chart.xDomain(arrayOfXValues).
The array will need to be an ordered array of Date values that spans your data. In order to generate it, you'll need the d3 time intervals range functions. You might also need the d3.extent function to find your max and min values.

Resources