2

I am trying to add D3 visualizations to OBIEE and the first graph I need to accomplish is a multi-series line graph. The data is directly obtained from an OBIEE narrative view in this format:

var data = [ ];

data.push({category:"Cat1",date:"20130101",suma:9.11});
data.push({category:"Cat2",date:"20130101",suma:2.66});
data.push({category:"Cat3",date:"20130101",suma:18.00});
data.push({category:"Cat4",date:"20130101",suma:32.49});
data.push({category:"Cat5",date:"20130101",suma:37.74});

There are 155 lines like those, for different dates ranging from 2013 to 2015. To separate them by categories, so I can then assign one line and color to each category, I nest the data in this way:

var dataGroup = d3.nest() 
.key(function(d) {return d.category;}) 
.entries(data);

The variable dataGroup is then an array of 5 objects that looks like this:

0: Object
key: "Cat1"
values: Array[31]
    0: Object
       category: "Cat1"
       date: "20130101"
       suma: 9.11
       __proto__: Object
   ... 
   1: Object
   key: "Cat2"
   values: Array[31]
       0: Object
       category: "Cat2"
       date: "20130101"
       suma: 2.66
       __proto__: Object
   ... ...

What I am trying to do next is to assign the colors for the categories.

var color = d3.scale.category10();
color.domain(d3.keys(dataGroup).filter(function(key) { return key !== "date"; }));

And here is where I am having trouble. The result of this filter function is:

Array[5]
0: "0"
1: "1"
2: "2"
3: "3"
4: "4"
length: 5
__proto__: Array[0]

Instead of what I think I need that is:

Array[5]
0: "Cat1"
1: "Cat2"
2: "Cat3"
3: "Cat4"
4: "Cat5"
length: 5
__proto__: Array[0]

I have tried several approaches and none of them have worked. At this point I am about to give up on adding D3 to OBIEE, although I really wanted to achieve it, but I am struggling to understand this and I seem to be totally unable. Perhaps I should be learning Javascript first of perhaps all the mind bending that D3 seems to require to understand the data management is too much for me.

I would really appreciate any help on this. I am sorry if I made any mistakes in submitting the question, I tried to format it correctly, but this is the first time I post anything here.

Thank you very much and best regards, Ana.

anasaturno
  • 58
  • 1
  • 4

1 Answers1

2

The keys() method (not when used as part of nest()) is intended for standard associative arrays, not nested data. You should take the values of dataGroup and iterate through each to extract the category property. There may be additional problems in your code, but try

color.domain(d3.values(dataGroup).map(function(d) {
    return d.category; 
}).filter(function(key) { return key !== "date"; }));

to start

Stephen Thomas
  • 13,843
  • 2
  • 32
  • 53