2

I have a whole graph defined into a local json file like below,

{
  "data":[
{
  "x": [0, 1, 2, 3, 4, 5, 6, 7, 8],
  "y": [0, 3, 6, 4, 5, 2, 3, 5, 4],
  "type": "scatter",
  "name":"Plot 1"
},
{
  "x": [0, 1, 2, 3, 4, 5, 6, 7, 8],
  "y": [0, 4, 7, 8, 3, 6, 3, 3, 4],
  "type": "scatter",
  "name":"Plot 2"
},
{
  "x": [0, 1, 2, 3, 4, 5, 6, 7, 8],
  "y": [0, 5, 3, 10, 5.33, 2.24, 4.4, 5.1, 7.2],
  "type": "scatter",
  "name":"Plot 3"
}
],

"layout":{
  "showlegend": true,
  "legend": {"orientation": "h"}
}
}

All I need to do is passing the json data into Plotly. Here is my react code.

import React, { Component } from "react";
import Plotly from "plotly.js-basic-dist";
import createPlotlyComponent from "react-plotly.js/factory";

const Plot = createPlotlyComponent(Plotly);

class ThresholdAnalysis extends Component{
 render(){
    const dataJson = require('../assets/plotly_vars.json');
    const data = dataJson;
    var graph = JSON.parse(myData);
    return(
        <div>
            <Plot data={graph.data} layout={figure.layout} />
        </div>
    );
 }
}

export default ThresholdAnalysis;

I was able to do this in raw javascript with below code,

<body>
 <div id="plotly-chart"></div>
 <!-- Plotly.js -->
 <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
 <script>
   var xmlhttp = new XMLHttpRequest();
   xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
     var plotly_vars = JSON.parse(this.responseText);
     Plotly.newPlot('plotly-chart', plotly_vars['data'], plotly_vars['layout']);
    }
   };
   xmlhttp.open("GET", "plotly_vars.json", true);
   xmlhttp.send(); 
  </script>
</body>

I am new to react and plotly. So any kind of suggestion or help would be appreciated.

segFault
  • 3,887
  • 1
  • 19
  • 31
tabrez
  • 146
  • 2
  • 9

1 Answers1

1

You should be able to import your data at the top of your component like what you did for React, Plotly, etc. using the following import:

import * as graph from "../assets/plotly_vars.json";

Then in your component, you can use the variable graph as you were already ie. graph.data will give you the data array.

Example:

import React, { Component } from "react";
import Plotly from "plotly.js-basic-dist";
import createPlotlyComponent from "react-plotly.js/factory";
import * as graph from "../assets/plotly_vars.json";

const Plot = createPlotlyComponent(Plotly);

class ThresholdAnalysis extends Component{
 render(){
    return(
        <div>
            <Plot data={graph.data} layout={figure.layout} />
        </div>
    );
 }
}

export default ThresholdAnalysis;

Sources:

How to Import json into TypeScript SO Answer For: How to import a json file in ecmascript 6?

Notes:

Keep in mind, this assumes you always have the data file in your ../assets directory. So if you need to change the data presented you would need to re-deploy your react app. It would be more dynamic to use some kind of fetch to retrieve the data from a remote server.

segFault
  • 3,887
  • 1
  • 19
  • 31
  • Perfect!! Thank You so much! It works like a charm! in case of fetching data, which I will have to do for the next step now, will I have to store the fetched data into state and show render it later? – tabrez Apr 25 '20 at 16:08
  • 1
    Yep, pretty much. You could retrieve the data within [componentDidMount()](https://reactjs.org/docs/react-component.html#componentdidmount) and set it to your component's state. – segFault Apr 25 '20 at 16:52