CODEWITHSUNDEEP
javascriptd3.jschartsvisualizationnvd3.js
user1609682
user1609682

Reputation: 255

NVD3 Line Chart: Cannot assign to read only property 'series' of 1

New user trying to use NVD3. I made what I thought was a pretty basic example, but it seems like NVD3 cannot create an object it needs. Would appreciate if anyone could look at my Fiddle and let me know what's wrong.

Fiddle: https://jsfiddle.net/hkd25ecp/2/

Error msg: TypeError: Cannot assign to read only property 'series' of 1

Code: HTML:

<h1 id="title">NVD3 Bug Example</h1>
<input type="submit" id="byBtn" value="Try To Graph It" onclick="change()"/>
<svg id="chart-c_1" />

JS:

var chartData =  {
      data: {
        model: "lineChart",
        options: {
          xaxis: {
            label: "time",
            tickValues: [ 0,1,2,3,4,5 ]
          },
          yaxis: {
            label: "Some value",
            tickValues: [ -1, 0.5, 0, 0.5, 1 ]
          }
        },
        data:   [
          {
            area: true,
            values:  [1,2,3,4,5],
            key: "Sine Wave",
            color: "#ff7f0e",
            strokeWidth: 4,
            classed: 'dashed'
          },
          {
            values: [1,2,3,4,5],
            key: "Cosine Wave",
            color: "#2ca02c"
          }
        ]
      }
    };

function change() {
  var chartIdLookup = "#chart-c_1" ;
    nv.addGraph(function() {
      var chart = nv.models.lineChart().options(chartData.data.options);
      var data = chartData.data.data;
      d3.select(chartIdLookup)
          .datum(data)
          .call(chart);
      nv.utils.windowResize(chart.update);
    });
}

Resources:

Upvotes: 0

Views: 921

Answers (1)

user1609682
user1609682

Reputation: 255

Nevermind! I had included data as an array of numbers, not an array of objects with x,y attributes.

Upvotes: 1

Related Questions