Currently working on generating graphs using D3 & NVD3 with data retrieved from an API. The returned data is structured like so:
[
{
"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
}
]
To manipulate the JSON format, I have utilized the D3.nest feature along with 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;
resulting in a modified JSON structure as follows:
[
{
"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}
]
Attempting to visualize this data through a graph, running into issues with overlapping bars for ID 1. Other IDs' bar data get obscured due to this overlap. For reference, here's the JSFiddle demonstrating the problem: http://jsfiddle.net/emjaycub/7N4Ma/1/
Facing challenges with the timestamp display on the Y-Axis, hopeful that resolving the bar overlap issue will address or simplify fixing this concern.
Any assistance provided would be highly appreciated! Apologies for the lengthiness of the post!
UPDATE/SOLUTION: Thanks to @ameliabr, discovered a solution. An improved JSFiddle link has been shared for those encountering a similar issue - http://jsfiddle.net/emjaycub/7N4Ma/7/. Utilized the following code snippet to make the JSON data compatible with D3:
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);
The simple fix that resolved the issue entirely was:
newData.push(newData2[0]);