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);
Related
I am trying to create bar chart using nvd3 data. Grouped option is working fine but when I select Stacked it gives following error.
Uncaught TypeError: Cannot read property '1' of undefined(…)
JSON format is as below.
var test = [
{
"key":"A",
"values":
[
{"x":"2016-11-24","y":34},
{"x":"2016-11-25","y":10}
]
},
{
"key":"B",
"values":
[
{"x":"2016-11-25","y":15}
]
},
{
"key":"C",
"values":
[
{"x":"2016-11-28","y":11}
]
},
]
javascript code:
var chart;
nv.addGraph(function() {
chart = nv.models.multiBarChart()
.color(d3.scale.category10().range())
.rotateLabels(0) //Angle to rotate x-axis labels.
.transitionDuration(300)
.showControls(true) //Allow user to switch between 'Grouped' and 'Stacked' mode.
.groupSpacing(0.24) //Distance between each group of bars.
;
chart.reduceXTicks(false).staggerLabels(true).groupSpacing(0.3);
chart.x(function(d) { return d.x; });
chart.y(function(d) { return d.y; });
d3.select('#chart1 svg')
.datum(test)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
I have tried it but can't find answer. Any help ?
Answer is in the JSON data. Basically the values array should have the same length across all data series. In your example when nvd3 transforms data into stacked view it expects to have a 2nd element of the values array.
{
"key":"B",
"values":
[
{"x":"2016-11-25","y":15}
]
}
I am trying to import CSV data with using D3.js.
var englishArray="";
d3.csv("data.csv",
function(d) {
return [d.value]
},
function(error, data) {
var englishArray =data;
console.log(data);
}
);
I want to get data from CSV file, which is
value
I am Kevin.
I am cute.
I am OK.
BY the way, original data in js file is
var englishArray =[ "I am Kevin."," I am cute.","I am OK."];
I want to put all value data into englishArray but
it does not work.
I am appreciate if you advise me what the problems are.
Thanks.
Here is the example which describe how to import csv file in d3.js.
CSV File
Year,Make,Model,Length
1997,Ford,E350,2.34
2000,Mercury,Cougar,2.38
JavaScript Array is
[
{"Year": "1997", "Make": "Ford", "Model": "E350", "Length": "2.34"},
{"Year": "2000", "Make": "Mercury", "Model": "Cougar", "Length": "2.38"}
]
Code to import CSV data using d3.js
d3.csv("example.csv", function(d) {
return {
year: new Date(+d.Year, 0, 1), // convert "Year" column to Date
make: d.Make,
model: d.Model,
length: +d.Length // convert "Length" column to number
};
}, function(error, rows) {
console.log(rows);
});
I tried to use this example in order to create a C3 chart. But its using all the data in the api. I am using angularjs.
my data looks like this
[
No:1
Name:'abc'
Id:3
Value:34
]
here is my code
d3.json("http://api.mydata", function(data) {
var convertedData = [];
data.forEach(function(item){
convertedData.push([item.Id, item.Value]);
});
var chart = c3.generate({
bindto : '#chartContainer',
data : {
columns : [convertedData]
},
keys: {
x: convertedData.ID,
value: convertedData.Value
}
});
});
thanks
The data field has to be populated with information about the axis as well. Here you have a functional example (sorry for the Spanish variables):
var chart = c3.generate({
bindto: "#chart-" + value.siglas,
data: {
x: 'x',
x_format: '%Y',
columns: [
['x', new Date('2011'), new Date('2012'), new Date('2013'), new Date('2014')],
['Primera matrícula', value.tasas_2011.tasas1, value.tasas_2012.tasas1, value.tasas_2013.tasas1, value.tasas_2014.tasas1],
['Segunda matrícula', value.tasas_2011.tasas2, value.tasas_2012.tasas2, value.tasas_2013.tasas2, value.tasas_2014.tasas2],
['Tercera matrícula', value.tasas_2011.tasas3, value.tasas_2012.tasas3, value.tasas_2013.tasas3, value.tasas_2014.tasas3],
['Cuarta matrícula', value.tasas_2011.tasas4, value.tasas_2012.tasas4, value.tasas_2013.tasas4, value.tasas_2014.tasas4],
['Media nacional' + averageErrorFlag, average['tasas_2011'].toFixed(2), average['tasas_2012'].toFixed(2), average['tasas_2013'].toFixed(2), average['tasas_2014'].toFixed(2)]
]
},
axis: {
x: {
type: 'timeseries',
tick: {
format: "%Y" // https://github.com/mbostock/d3/wiki/Time-Formatting#wiki-format
}
}
}
});
In data, the format of the x axis and the values (in this graphic you have four variables and the x value) are included. You can also format the x axis with the axis key.
I have data returned from a REST API in the following form.
[{
"created": "2014-06-01T11:21:47Z",
"is_good": false,
"amount": 10
},{
"created": "2014-06-01T12:01:00Z",
"is_good": false,
"amount": 12
},{
"created": "2014-06-02T10:00:00Z",
"is_good": true,
"amount": 8
},{
"created": "2014-06-02T08:00:00Z",
"is_good": false,
"amount": 3
},
...
]
In order to make a stacked bar chart, I thought the solution would be to use d3.nest() to rollup the amounts, first by date, then by is_good (the stacking category).
nestedData = d3.nest()
.key(function(d) { return d3.time.day(new Date(d.created)); })
.key(function(d) { return d.is_good; })
.rollup(function(leaves) { return {amount: d3.sum(leaves, function(d) { return d.amount; })}; })
.entries(jsonData);
That would probably be fine when drawing the chart following Mike Bostock's example here, but wouldn't work in a d3.layout.stack() call, because it requires the .values() to be the group iterable from which x and y is then calculated. That lead me to try the keys the other way around, but then drawing the chart itself becomes tricky.
So after all of that, I'm now wondering if there's a neat d3 way of flattening the nested values into something that resembles the datasets in almost all stacked bar chart examples.
Alternatively, perhaps I'm just not seeing how best to use the double nested data to create a stacked bar chart based on the examples.
Any help would be much appreciated.
I eventually decided to tackle this without using d3.layout.stack at all, and attempted to convert the double nested array into something resembling the example given. This is the code that will take that complex array and squash it down into something more manageable when drawing the chart.
data.forEach(function(d) {
var y0 = 0;
d.amounts = color.domain().map(function(is_good) {
return {is_good: is_good, y0: y0, y1: y0 += +d.values.filter(function(d) {
return d.key == is_good;
})[0].values.amount};
});
d.total = d.amounts[d.amounts.length - 1].y1;
});
Here's a working example.
I'm sure this isn't perfect, so if anyone has a better way of achieving the same result, I'd be interested to see it!
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