I am working with D3 & NVD3 to create graphs from data pulled from an API. The data is returned in the following format:
[
{
"id": 1,
"timestamp": "2014-01-01T02:05:54",
"value": 10000,
"ctclip_id": 1
},
{
"id": 1,
"timestamp": "2015-01-01T02:05:54",
"value": 12000,
"ctclip_id": 1
},
{
"id": 1,
"timestamp": "2016-01-01T02:05:54",
"value": 9000,
"ctclip_id": 1
},
{
"id": 2,
"timestamp": "2015-01-01T02:05:54",
"value": 4500,
"ctclip_id": 1
},
{
"id": 3,
"timestamp": "2016-01-01T02:05:54",
"value": 100,
"ctclip_id": 2
},
{
"id": 4,
"timestamp": "2017-01-01T02:05:54",
"value": 200,
"ctclip_id": 2
}
]
I have used the D3.nest feature and some hardcoding:
var newData = d3.nest()
.key(function(d,i){ return d.id; })
.entries(data);
newData[0]['bar']=true;
newData[1]['bar']=true;
newData[2]['bar']=true;
newData[3]['bar']=true;
which changes the JSON format to:
[
{
"key":"1",
"values":
[
{"id":1,"timestamp":"2014-01-01T02:05:54","value":10000,"ctclip_id":1},
{"id":1,"timestamp":"2015-01-01T02:05:54","value":12000,"ctclip_id":1},
{"id":1,"timestamp":"2016-01-01T02:05:54","value":9000,"ctclip_id":1}
],
"bar":true},
{
"key":"2",
"values":
[
{"id":2,"timestamp":"2015-01-01T02:05:54","value":4500,"ctclip_id":1}
],
"bar":true},
{
"key":"3",
"values":
[
{"id":3,"timestamp":"2016-01-01T02:05:54","value":100,"ctclip_id":2}
],
"bar":true
},
{
"key":"4",
"values":
[
{"id":4,"timestamp":"2017-01-01T02:05:54","value":200,"ctclip_id":2}
],
"bar":true}
]
I am trying to graph the data but the bars for ID 1 are overlapping each other. Bar data for other IDs can only be seen by hiding ID 1 (or other IDs). Here is a JSFiddle of what I'm having trouble with: http://jsfiddle.net/emjaycub/7N4Ma/1/
I'm also experiencing difficulty with the timestamp on the Y Axis but am hoping that when I get the bars displaying separately this issue will be fixed (or easy to fix).
Any help is appreciated! Sorry for the long post!
UPDATE/SOLUTION:
Thanks to @ameliabr I found a solution. I have a completed JSFiddle here if anyone is having the same problem - http://jsfiddle.net/emjaycub/7N4Ma/7/ . I used:
var newData = d3.nest()
.key(function(d,i){ return d.id; })
.entries(data);
newData[0]['bar']=true;
var newData2 = d3.nest()
.key(function(d,i){ return d.id; })
.entries(data2);
to format the JSON data to be compatible with D3. Then the one line that fixed it all was:
newData.push(newData2[0]);