Plotly.d3.json Uncaught TypeError: Cannot read property '0' of null

plotly.js
1

Trying to plot json of this format:

myapp/data/mydata.json:

[
 {
	"_id": "57e14dce36b7c360df1e7a90",
	"time": "06/08/2015 10:00",
	"energy": 16,
	"created_date": "2016-09-20T00:00:00.000Z"
}, {
	"_id": "57e14dce36b7c360df1e7a91",
	"time": "06/08/2015 10:30",
	"energy": 16,
	"created_date": "2016-09-20T00:00:00.000Z"
}
]

myapp/src/js/pages/Plot.js

 componentDidMount() {

         Plotly.d3.json("../../../data/mydata.json", function (err, rows) {

var trace = {
                type: 'scatter',                    // set the chart type
                mode: 'lines',                      // connect points with lines
                x: rows[0].time,
                y: rows[0].energy,
}

Plotly.newPlot(document.getElementById('energy-plot'), [trace], layout, {showLink: false});

Why is it

PlotPage.js Uncaught TypeError: Cannot read property ‘0’ of null

2

Plotly.d3.json(“…/…/…/data/mydata.json”, function (rows) {

Try

Plotly.d3.json("../../../data/mydata.json", function (err, rows) {
  it(err) throw err;

  // do stuff with rows
});
3

Thanks @etienne

But I have already function(err, rows) : (Just edited above)

4

Try

var trace = {
                type: 'scatter',                    // set the chart type
                mode: 'lines',                      // connect points with lines
                x: [rows[0].time],
                y: [rows[0].energy],
}

plotly.js x / y coordinates must be given inside arrays.

5 
componentDidMount() {

    Plotly.d3.json("./data/energydata.json", function (err, rows) {
  var trace = {
            type: 'scatter',                    // set the chart type
            mode: 'lines',           

            x: [rows[0].time],
            y: [rows[0].energy],
            line: {                             // set the width of the line.
                width: 1
            },
  };

        var layout = {
            height: 600,
            width: 1280,
            yaxis: {title: "Energy Data"},       // set the y axis title
            xaxis: {
                showgrid: false,                  // remove the x-axis grid lines
                tickformat: "%B, %Y"        // customize the date format to "month, day"
            },
            margin: {                           // update the left, bottom, right, top margin
                l: 40, b: 30, r: 10, t: 30
            }
        };

        Plotly.newPlot(document.getElementById('energy-plot'), [trace], layout, {showLink: false});
    });
}

Error is : SyntaxError: Unexpected token < in JSON at position
Uncaught TypeEror: Cannot read property ‘0’ of undefined?

6

Looks like something is wrong with your JSON file.

You might want to http://jsonlint.com/ to verify.

7

Validate your JSON format at json formatter https://jsonformatter-online.com

8

Validate JSON: json formatter