title: Importing JSON data file into graph
body: <p>I'm fairly new to React. </p>
  
  <p>I am trying to import this following test json data file into my React graph. </p>
  
  <pre><code>{
      "data": [
          {"datetime": "", "data": [1,2,3,4]},
          {"datetime": "", "data": [1,2,3,4]}
      ]
  }
  </code></pre>
  
  <p>The x-axis is the time so it should not matter very much. 
  But I don't know how to read the data into the y-axis. </p>
  
  <p>This is my Graph.js: </p>
  
  <pre><code>import React, { Component } from 'react';
  import Highcharts from 'highcharts';
  import socketIOClient from "socket.io-client";
  import {
    HighchartsChart, Chart, withHighcharts, XAxis, YAxis, Title, Legend, LineSeries
  } from 'react-jsx-highcharts';
  import './Graph.css'
  var jsonData = import '../jsonData.json'     //pass the json file location
  
  
  class Graph extends Component {
  
    constructor (props) {
      super(props);
      this.addDataPoint = this.addDataPoint.bind(this);
  
      const now = Date.now();
      this.state = {
          data: []
      }
    }
  
  
    componentDidMount() {
  
      //THIS is to add points from json
  
  
      //Please don't mind the stuff here--------
      //This is for another graph 
      var sensorSerial = this.props.match.params.sensorId
      const socket = socketIOClient("http://localhost:5001/test");
      socket.on("newnumber", data =&gt; this.addDataPoint(data));
      //----------------------------------------
    }
  
  
    addDataPoint(data){
  
      //This is for another graph------------
      if(data.sensorSerial == this.props.match.params.sensorId){
        var newData = this.state.data.slice(0)
        console.log(new Date(data.dateTime.split(' ').join('T')))
        newData.push([new Date(data.dateTime.split(' ').join('T')), data.number])
  
        this.setState({
          data: newData
        })
      }
      //-------------------------------------
  
  
    }
  
  
  
    render() {
      // const {data} = this.state;
  
      const plotOptions = {
        series: {
          pointStart: new Date("2019-04-04T10:55:08.841287Z")
        }
      }
  
      return (
        &lt;div className="graph"&gt;
          &lt;HighchartsChart plotOptions={plotOptions}&gt;
            &lt;Chart /&gt;
  
            //Title
            &lt;Title&gt;Sensor Data&lt;/Title&gt;
  
            //Legend          
            &lt;Legend layout="vertical" align="right" verticalAlign="middle" &gt;
              &lt;Legend.Title&gt;Legend&lt;/Legend.Title&gt;
            &lt;/Legend&gt;
  
            &lt;XAxis type="datetime"&gt;
              &lt;XAxis.Title&gt;Time&lt;/XAxis.Title&gt;
            &lt;/XAxis&gt;
  
            &lt;YAxis&gt;
              &lt;YAxis.Title&gt;Y-axis&lt;/YAxis.Title&gt;
              &lt;LineSeries name="Channel 1" data={this.state.data}/&gt;
            &lt;/YAxis&gt;
  
          &lt;/HighchartsChart&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default withHighcharts(Graph, Highcharts);
  
  </code></pre>
  
  <p>If this is a duplicate question, please let met know!
  I'm not a frequent on Stakoverflow, so if there's anything I can do to improve my post, please let me know.</p>
  
  <p>Thank you for your time!</p>