Here's the link to the chart example: http://nvd3.org/ghpages/multiBar.html
I've been able to switch out the plotted values for data that I provided. Ex:
datapoints = [
{
key: "Series1",
color : "#62CCF1",
values: [
{
"label" : "Group A" ,
"value" : 507
} ,
{
"label" : "Group B" ,
"value" : 436
} ,
{
"label" : "Group C" ,
"value" : 346
} ,
{
"label" : "Group D" ,
"value" : 343
}
]
}
];
But for some reason instead of outputting "Group X" on the x axis, labeling each bar, I'm only getting NaN. I know that this is related to the provided chart js since the original example generates numbers for the x axis. I have scoured the js files but can't find the corresponding place to edit this. I tried adding this:
nv.addGraph(function() {
var chart = nv.models.multiBarChart()
.x(function(d) { return d.label }) //this part specifically
.y(function(d) { return d.value })
But didn't have any luck.
The values[] must be X and Y point to be plotted in the chart. You need either to rename the label and value attributes to x and y or you need to create functions to provide those values.
Just Rename "label" as X and value as Y
Here is another question which had a similar data structure like yours.
Hope it helps
Related
I've got some problems with nvd3 pie chart.
I tried this example:
Example http://jsfiddle.net/shabeer90/30rm9qk7/
I've added nv.d3.min and nv.d3.css to my application.
This example looks fine, but there are two problems.
1) No tooltips are shown.
Also the content of the tooltips is not added in DOM.
2) Click on the legend does not filter. Nothing happend.
What am I doing wrong? Perhaps missing .js?
This is my code:
private native void createTestPieChart()/*-{
function pieSectorData() {
return [ {
"key" : "Technology",
y : 298.85,
"symbols" : "DOV",
"color" : "#3182bd",
},
{
"key" : "Health Care",
y : 477.80,
"symbols" : "JNJ",
"color" : "#6baed6",
},
{
"key" : "Consumer Services",
y : 485.65,
"symbols" : "MCD",
"color" : "#9ecae1",
},
{
"key" : "Energy",
y : 739.45,
"symbols" : "XOM, CVX",
"color" : "#A52A2A",
} ];
}
//Regular pie chart example
$wnd.nv.addGraph(function() {
var chart = $wnd.nv.models.pieChart().x(function(d) {
return d.key
}).y(function(d) {
return d.y
}).showLabels(true).color(function(d) {
return d.color;
}).showLegend(true);
chart.tooltip.keyFormatter(function(d, i) {
var symbol = '';
pieSectorData().forEach(function(entry) {
// Search data for key and return the symbols
if (entry.key == d) {
symbol = entry.symbols
}
});
return d + '(' + symbol + ')'
});
$wnd.d3.select("#piechart svg").datum(pieSectorData()).transition()
.duration(350).call(chart);
return chart;
});
}-*/;
Thank you in advance.
I am fairly new to React (and front-end work in general). How can I make set up React to work with NVD3?
Currently I am trying to implement the example code of react-nvd3, but get the following error thrown by the d3 function d3.transform():
Unexpected value translate(145, NaN) parsing transform attribute.
g.setAttribute("transform", string);
My code is as follows:
var TestData = [{
key: "Cumulative Return",
values: [
{
"label" : "A" ,
"value" : -29.765957771107
} ,
{
"label" : "B" ,
"value" : 0
} ,
{
"label" : "C" ,
"value" : 32.807804682612
} ,
{
"label" : "D" ,
"value" : 196.45946739256
} ,
{
"label" : "E" ,
"value" : 0.19434030906893
} ,
{
"label" : "F" ,
"value" : -98.079782601442
} ,
{
"label" : "G" ,
"value" : -13.925743130903
} ,
{
"label" : "H" ,
"value" : -5.1387322875705
}
]
}];
var App = React.createClass({
render: function() {
return (
<NVD3Chart id="chart" type="discreteBarChart" datum={TestData} x="test" y="test"/>
);
}
});
ReactDOM.render(
<App/>,
document.getElementById('container')
);
See https://jsfiddle.net/x2wuko8g/2/ I guess it has to do something with the format of TestData, but can't figure it out.
Help is much appreciated!
I think the problem is your x and y props are misconfigured.
<NVD3Chart id="chart" type="discreteBarChart" datum={TestData} x="test" y="test"/>
You set x to test and y to test but those fields are not present in your data.
Try changing x to label and y to value in this way:
<NVD3Chart id="chart" type="discreteBarChart" datum={TestData} x="label" y="value"/>
If you pass a string (like in this case) the library will look up in each item of the data for a key with that string.
I hope this help.
suppose this is my data
data = [
{
"key": "Series1",
"values": [ [ 1125409600000 , 0] , [ 1228088000000 , 50]]
},
{
"key": "Series2",
"values": [ [ 1025409600000 , 10] , [ 1028088000000 , 50]]
}
]
I am using Nvd3 to draw a line chart. So based on the data given above I should have two lines.
nv.addGraph(function() {
var chart = nv.models.lineWithFocusChart();
d3.select('#chart svg')
.datum(data)
.transition().duration(500)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
I can easily do this and my code works. After drawing the chart, each line on the chart is path in the DOM. I am trying to assign each KEY value as an id of the corresponding path. For example, after drawing the graph I want to have something like this
<path id="Series1" ..... >
<path id="Series2" ..... >
Does anyone know how to do this?
As #baklazan states in his comment, the group around the path has a class of nv-series-0, nv-series-1, etc... If you can just use that and get the corresponding path like:
var series1Path = d3.select('.nv-series-0>path');
If you really want to id them:
d3.select('.nv-series-0>path')
.attr('id','Series1);
//take this code as an example
Here i have specified yvalue[0],yvalue[1] in groups..
But i need a general design ,where I dont know the number of groups that i have to create(i.e the number of segments) this varies according to the json data.
Consider this example here I have total,total1 therefore i have only 2 values.But if a third variable say total2 is specified in json, I should have a segment for it in my bar chart and so on.This has to be done without altering the groups everytime a field is added.Is there any way to achieve this??
Thanks
var datajson = [ {
country : "china",
total : 20,
total1 : 10
}, {
country : "India",
total : 40,
total1 : 20
}, {
country : "aus",
total : 10,
total1 : 30
}, {
country : "nxz",
total : 50,
total1 : 40
}
];
var xvalue;
var yvalue = [];
var i = 0;
var obj = datajson[0]
for ( var key in obj) {
if (xvalue === undefined)
xvalue = key;
else {
yvalue[i] = key;
i++;
}
}
var chart = c3.generate({
bindto : '#chart',
data : {
json : datajson,
type : 'bar',
keys : {
x : xvalue, // it's possible to specify 'x' when category axis
value : [yvalue[0],yvalue[1]],
},
groups : [ [yvalue[0],yvalue[1]] ]
},
bar : {
width : {
ratio : 0.3
// this makes bar width 50% of length between ticks
}
},
axis : {
x : {
type : 'category'
},
}
});
Your question seems to have most of the answer (you are already generating the yvalue array from the object properties).
You just don't have to specify the elements one by one, instead you can just pass in the array directly and you are done.
groups: [yvalue]
I'm using JVectorMap for creating World Map..
As part of my JVectorMap im displaying on the regions CountryName with Population..
My Question is:
How to show differrent colours for the regions (countries) based on population ranges.
Ex: For 1-1000 population i have to show red colour.
For 1000-5000 population i have to show blue colour.
I'm using code like this.But it is not displaying different colours based on the range of population
var mapData = {
"AF": 1000,
"AL": 5000,
"DZ": 20000,
...
};
try{
$('#id').vectorMap(
{
map : 'world_mill_en',
series : {
regions : [ {
initial : {
fill : 'white',
"fill-opacity" : 1,
stroke : 'none',
"stroke-width" : 0,
"stroke-opacity" : 1
},
hover : {
"fill-opacity" : 0.8
},
selected : {
fill : 'yellow'
},
selectedHover : {},
values : mapData,
scale : [ '#C8EEFF', '#0071A4' ],
normalizeFunction : 'polynomial'
} ]
},
onRegionLabelShow : function(e, el, code) {
el.html(el.html()+' (Population - '+mapData[code]+')');
}
});
}
catch(err){
alert(err);
}
Can any one help me in displaying differnt colours for the regions based on the range of population......?
Thanks in advance..
Create a JSON with count and color codes like this according to your regions and colors.
var colorData = {
"1" : "#C8EEFF",
"2" : "#0071A4",
"3" : "#C8EEFF",
"4" : "#0071A4",
"5" : "#C8EEFF",
"6" : "#0071A4"
}
and pass this JSON to the scale : colorData. Hope it helps you.