Search code examples
javascriptangularjsd3.jsnvd3.jsangular-nvd3

Why is my angular-nvd3 multiChat chart not rendering here?


Working original Plunkr: http://plnkr.co/edit/nHSMF2?p=preview

enter image description here

My forked Plunkr: http://plnkr.co/edit/4Ecqif?p=preview

enter image description here

I'm playing with the Angular-nvd3 charting lib. Here is their original multiChart example with several line and area graphs. I forked it and reduced the graphs to just 3 (2 areas, 1 line) as you can see in the top link.

In their original example they used a function to randomly generate the data points, in my customized fork I removed that function and hard coded the graph objects. I don't see any errors, so unsure as to why my chart isn't getting rendered.

Any thoughts?

My hardcoded graph objects used in this broken Plunkr:

vs.area1 = {
  key: 'Area1',
  color: '#7DD0FA',
  type: 'area',
  values: [
    {
      key: "Area1",
      index: 0,
      series: 0,
      x: 0,
      y: 0.1562513777302181
    },
    {
      key: "Area1",
      index: 1,
      series: 0,
      x: 1,
      y: 0.11389363298669228
    },
    {
      key: "Area1",
      index: 2,
      series: 0,
      x: 2,
      y: 0.15284344328948302
    }
  ]
}

vs.area2 = {
  key: 'Area2',
  color: '#FDE18D',
  type: 'area',
  values: [
    {
      key: "Area2",
      index: 0,
      series: 0,
      x: 0,
      y: 0.3968682840613851
    },
    {
      key: "Area2",
      index: 1,
      series: 0,
      x: 1,
      y: 1.090475660012667
    },
    {
      key: "Area2",
      index: 2,
      series: 1,
      x: 2,
      y: 2.5868011025351163
    }
  ]
}

vs.line1 = {
  key: 'Line1',
  color: '#4C73FF',
  type: 'line',
  values: [
    {
      series: 0,
      x: 0,
      y: 0.10572488375599604
    },
    {
      series: 0,
      x: 1,
      y: 0.10572488375599604
    },
    {
      series: 0,
      x: 2,
      y: 0.11166720592377402
    }
  ]
}

var myData = [];
    myData.push(vs.area1);
    myData.push(vs.area2);
    myData.push(vs.line1);

vs.data = generateData();
// vs.data = myData;
console.log('vs.data',vs.data);

I'm gone over my data and carefully compared it to the dynamic data. And matched it key for key, yet my chart still isn't displaying :(

On the left is my hardcoded version | on the right is the working dynamic data:

enter image description here


Solution

  • I was missing the yAxis keys in my objects, that was the missing magic:

    http://plnkr.co/edit/9HdNop?p=preview

    enter image description here

    vs.area1 = {
      key: 'Area1', yAxis: 1, color: '#7DD0FA', type: 'area',
      values: [...
    
    vs.area2 = {
      key: 'Area2', yAxis: 1, color: '#FDE18D', type: 'area',
      values: [...
    
    vs.line1 = {
      key: 'Line1',
      yAxis: 2,
      ...