I'm having trouble parsing large JSON objects from my Axios calls and setting them as a state to then be passed as X and Y axis data for graphing in react-chartist. For my case, I'm charting stock market data.
I have been trying to parse the data using state hooks, chartData, but can't get it working, like so response.data.symbol, response.data.adj_close, and response.data.date
I also tried creating three different states, for X, Y, and symbol data taken directly from the axios call, but wasn't able to accomplish so.
Here is the code I'm using:
export default function Graph() {
const [chartData, setChartData] = useState([])
const getData = () => {
axiosInstance
.get('price/' + slug)
.then(result => setChartData(result.data))
}
useEffect(() => {
getData()
}, [])
const graphChart = () =>
{
var data = {
labels: //date values from JSON object
series: //adj_close values from JSON object
};
var options = {
width: 500,
height: 400
};
return (
<ChartistGraph data={data} options={options} type="Line" />
);
};
return (
<Container>
<Grid>
{graphChart()}
</Grid>
</Container>
);
};
Am I approaching this wrong? Is there a simpler way to do so?
I've added the data to replicate the problem, which basically is, how can I parse large objects like this? Keeping in mind that each row needs to be grouped by it's respective symbol for graphing. In the data below, there are 8 companies worth of data. Putting all of this data on a graph would be bad, but if I knew how to parse specific symbols, then I will be able to accomplish graphing on my own.
[{"symbol":"PG","date":"2020-12-04","adj_close":137.47},
{"symbol":"HSY","date":"2020-12-04","adj_close":150.87},
{"symbol":"CLX","date":"2020-12-04","adj_close":199.98},
{"symbol":"COST","date":"2020-12-04","adj_close":373.43},
{"symbol":"MDLZ","date":"2020-12-04","adj_close":59.03},
{"symbol":"K","date":"2020-12-04","adj_close":62.37},
{"symbol":"KHC","date":"2020-12-04","adj_close":34.12},
{"symbol":"PEP","date":"2020-12-04","adj_close":145.85},
{"symbol":"PG","date":"2020-12-07","adj_close":137.68},
{"symbol":"HSY","date":"2020-12-07","adj_close":149.72},
{"symbol":"CLX","date":"2020-12-07","adj_close":200.61},
{"symbol":"COST","date":"2020-12-07","adj_close":373.33},
{"symbol":"MDLZ","date":"2020-12-07","adj_close":58.41},
{"symbol":"K","date":"2020-12-07","adj_close":61.95},
{"symbol":"KHC","date":"2020-12-07","adj_close":33.6},
{"symbol":"PEP","date":"2020-12-07","adj_close":145.37},
{"symbol":"PG","date":"2020-12-08","adj_close":138.05},
{"symbol":"HSY","date":"2020-12-08","adj_close":150.63},
{"symbol":"CLX","date":"2020-12-08","adj_close":202.88},
{"symbol":"COST","date":"2020-12-08","adj_close":377.6},
{"symbol":"MDLZ","date":"2020-12-08","adj_close":58.29},
{"symbol":"K","date":"2020-12-08","adj_close":62.55},
{"symbol":"KHC","date":"2020-12-08","adj_close":34.34},
{"symbol":"PEP","date":"2020-12-08","adj_close":145.52},
{"symbol":"PG","date":"2020-12-09","adj_close":136.41},
{"symbol":"HSY","date":"2020-12-09","adj_close":152.14},
{"symbol":"CLX","date":"2020-12-09","adj_close":200.51},
{"symbol":"COST","date":"2020-12-09","adj_close":374.29},
{"symbol":"MDLZ","date":"2020-12-09","adj_close":57.72},
{"symbol":"K","date":"2020-12-09","adj_close":62},
{"symbol":"KHC","date":"2020-12-09","adj_close":34.22},
{"symbol":"PEP","date":"2020-12-09","adj_close":145.69},
{"symbol":"PG","date":"2020-12-10","adj_close":135.51},
{"symbol":"HSY","date":"2020-12-10","adj_close":149.7},
{"symbol":"CLX","date":"2020-12-10","adj_close":200.6},
{"symbol":"COST","date":"2020-12-10","adj_close":372.79},
{"symbol":"MDLZ","date":"2020-12-10","adj_close":57.18},
{"symbol":"K","date":"2020-12-10","adj_close":61.98},
{"symbol":"KHC","date":"2020-12-10","adj_close":34.1},
{"symbol":"PEP","date":"2020-12-10","adj_close":144.67},
{"symbol":"PG","date":"2020-12-11","adj_close":136.51},
{"symbol":"HSY","date":"2020-12-11","adj_close":149.11},
{"symbol":"CLX","date":"2020-12-11","adj_close":201.73},
{"symbol":"COST","date":"2020-12-11","adj_close":375.1},
{"symbol":"MDLZ","date":"2020-12-11","adj_close":57.4},
{"symbol":"K","date":"2020-12-11","adj_close":62.11},
{"symbol":"KHC","date":"2020-12-11","adj_close":34.07},
{"symbol":"PEP","date":"2020-12-11","adj_close":144.97},
{"symbol":"PG","date":"2020-12-14","adj_close":135.85},
{"symbol":"HSY","date":"2020-12-14","adj_close":149.14},
{"symbol":"CLX","date":"2020-12-14","adj_close":202.38},
{"symbol":"COST","date":"2020-12-14","adj_close":374.38},
{"symbol":"MDLZ","date":"2020-12-14","adj_close":57.29},
{"symbol":"K","date":"2020-12-14","adj_close":61.92},
{"symbol":"KHC","date":"2020-12-14","adj_close":34.42},
{"symbol":"PEP","date":"2020-12-14","adj_close":144.23},
{"symbol":"PG","date":"2020-12-15","adj_close":136.65},
{"symbol":"HSY","date":"2020-12-15","adj_close":150.23},
{"symbol":"CLX","date":"2020-12-15","adj_close":203.04},
{"symbol":"COST","date":"2020-12-15","adj_close":371.88},
{"symbol":"MDLZ","date":"2020-12-15","adj_close":57.45},
{"symbol":"K","date":"2020-12-15","adj_close":61.24},
{"symbol":"KHC","date":"2020-12-15","adj_close":34.33},
{"symbol":"PEP","date":"2020-12-15","adj_close":144.77},
{"symbol":"PG","date":"2020-12-16","adj_close":137.27},
{"symbol":"HSY","date":"2020-12-16","adj_close":150.28},
{"symbol":"CLX","date":"2020-12-16","adj_close":203.44},
{"symbol":"COST","date":"2020-12-16","adj_close":369.44},
{"symbol":"MDLZ","date":"2020-12-16","adj_close":57.2},
{"symbol":"K","date":"2020-12-16","adj_close":61.5},
{"symbol":"KHC","date":"2020-12-16","adj_close":34.43},
{"symbol":"PEP","date":"2020-12-16","adj_close":144.89},
{"symbol":"PG","date":"2020-12-17","adj_close":138.25},
{"symbol":"HSY","date":"2020-12-17","adj_close":151.61},
{"symbol":"CLX","date":"2020-12-17","adj_close":202.34},
{"symbol":"COST","date":"2020-12-17","adj_close":370.29},
{"symbol":"MDLZ","date":"2020-12-17","adj_close":57.93},
{"symbol":"K","date":"2020-12-17","adj_close":62.48},
{"symbol":"KHC","date":"2020-12-17","adj_close":34.62},
{"symbol":"PEP","date":"2020-12-17","adj_close":145.71},
{"symbol":"PG","date":"2020-12-18","adj_close":139.04},
{"symbol":"HSY","date":"2020-12-18","adj_close":150.88},
{"symbol":"CLX","date":"2020-12-18","adj_close":203.17},
{"symbol":"COST","date":"2020-12-18","adj_close":367},
{"symbol":"MDLZ","date":"2020-12-18","adj_close":58.32},
{"symbol":"K","date":"2020-12-18","adj_close":62.08},
{"symbol":"KHC","date":"2020-12-18","adj_close":34.77},
{"symbol":"PEP","date":"2020-12-18","adj_close":146.93},
{"symbol":"PG","date":"2020-12-21","adj_close":137.52},
{"symbol":"HSY","date":"2020-12-21","adj_close":149.66},
{"symbol":"CLX","date":"2020-12-21","adj_close":202.45},
{"symbol":"COST","date":"2020-12-21","adj_close":364.97},
{"symbol":"MDLZ","date":"2020-12-21","adj_close":57.68},
{"symbol":"K","date":"2020-12-21","adj_close":61.53},
{"symbol":"KHC","date":"2020-12-21","adj_close":34.57},
{"symbol":"PEP","date":"2020-12-21","adj_close":145.4},
{"symbol":"PG","date":"2020-12-22","adj_close":136.55},
{"symbol":"HSY","date":"2020-12-22","adj_close":148.62},
{"symbol":"CLX","date":"2020-12-22","adj_close":201.39},
{"symbol":"COST","date":"2020-12-22","adj_close":362.03},
{"symbol":"MDLZ","date":"2020-12-22","adj_close":57.16},
{"symbol":"K","date":"2020-12-22","adj_close":61.19},
{"symbol":"KHC","date":"2020-12-22","adj_close":34.39},
{"symbol":"PEP","date":"2020-12-22","adj_close":144.02},
{"symbol":"PG","date":"2020-12-23","adj_close":136.34},
{"symbol":"HSY","date":"2020-12-23","adj_close":149.45},
{"symbol":"CLX","date":"2020-12-23","adj_close":202.33},
{"symbol":"COST","date":"2020-12-23","adj_close":361.89},
{"symbol":"MDLZ","date":"2020-12-23","adj_close":57.35},
{"symbol":"K","date":"2020-12-23","adj_close":61.61},
{"symbol":"KHC","date":"2020-12-23","adj_close":34.8},
{"symbol":"PEP","date":"2020-12-23","adj_close":144.41},
{"symbol":"PG","date":"2020-12-24","adj_close":137.72},
{"symbol":"HSY","date":"2020-12-24","adj_close":149.95},
{"symbol":"CLX","date":"2020-12-24","adj_close":203.8},
{"symbol":"COST","date":"2020-12-24","adj_close":364.58},
{"symbol":"MDLZ","date":"2020-12-24","adj_close":57.85},
{"symbol":"K","date":"2020-12-24","adj_close":61.78},
{"symbol":"KHC","date":"2020-12-24","adj_close":34.98},
{"symbol":"PEP","date":"2020-12-24","adj_close":145.06},
{"symbol":"PG","date":"2020-12-28","adj_close":138.68},
{"symbol":"HSY","date":"2020-12-28","adj_close":151.8},
{"symbol":"CLX","date":"2020-12-28","adj_close":202.25},
{"symbol":"COST","date":"2020-12-28","adj_close":371.06},
{"symbol":"MDLZ","date":"2020-12-28","adj_close":58.27},
{"symbol":"K","date":"2020-12-28","adj_close":62.34},
{"symbol":"KHC","date":"2020-12-28","adj_close":35.21},
{"symbol":"PEP","date":"2020-12-28","adj_close":146.91},
{"symbol":"PG","date":"2020-12-29","adj_close":138.42},
{"symbol":"HSY","date":"2020-12-29","adj_close":151.44},
{"symbol":"CLX","date":"2020-12-29","adj_close":201.76},
{"symbol":"COST","date":"2020-12-29","adj_close":372.72},
{"symbol":"MDLZ","date":"2020-12-29","adj_close":58.45},
{"symbol":"K","date":"2020-12-29","adj_close":62.29},
{"symbol":"KHC","date":"2020-12-29","adj_close":34.9},
{"symbol":"PEP","date":"2020-12-29","adj_close":147.42},
{"symbol":"PG","date":"2020-12-30","adj_close":137.77},
{"symbol":"HSY","date":"2020-12-30","adj_close":150.53},
{"symbol":"CLX","date":"2020-12-30","adj_close":201.04},
{"symbol":"COST","date":"2020-12-30","adj_close":374.45},
{"symbol":"MDLZ","date":"2020-12-30","adj_close":58},
{"symbol":"K","date":"2020-12-30","adj_close":61.53},
{"symbol":"KHC","date":"2020-12-30","adj_close":34.67},
{"symbol":"PEP","date":"2020-12-30","adj_close":147.31},
{"symbol":"PG","date":"2020-12-31","adj_close":139.14},
{"symbol":"HSY","date":"2020-12-31","adj_close":152.33},
{"symbol":"CLX","date":"2020-12-31","adj_close":201.92},
{"symbol":"COST","date":"2020-12-31","adj_close":376.78},
{"symbol":"MDLZ","date":"2020-12-31","adj_close":58.47},
{"symbol":"K","date":"2020-12-31","adj_close":62.23},
{"symbol":"KHC","date":"2020-12-31","adj_close":34.66},
{"symbol":"PEP","date":"2020-12-31","adj_close":148.3},
{"symbol":"PG","date":"2021-01-04","adj_close":137.82},
{"symbol":"HSY","date":"2021-01-04","adj_close":150.9},
{"symbol":"CLX","date":"2021-01-04","adj_close":200.44},
{"symbol":"COST","date":"2021-01-04","adj_close":380.15},
{"symbol":"MDLZ","date":"2021-01-04","adj_close":57.92},
{"symbol":"K","date":"2021-01-04","adj_close":61.45},
{"symbol":"KHC","date":"2021-01-04","adj_close":34.23},
{"symbol":"PEP","date":"2021-01-04","adj_close":144.27},
{"symbol":"PG","date":"2021-01-05","adj_close":138.7},
{"symbol":"HSY","date":"2021-01-05","adj_close":150.73},
{"symbol":"CLX","date":"2021-01-05","adj_close":200.01},
{"symbol":"COST","date":"2021-01-05","adj_close":375.74},
{"symbol":"MDLZ","date":"2021-01-05","adj_close":57.98},
{"symbol":"K","date":"2021-01-05","adj_close":61.8},
{"symbol":"KHC","date":"2021-01-05","adj_close":33.57},
{"symbol":"PEP","date":"2021-01-05","adj_close":144.7},
{"symbol":"PG","date":"2021-01-06","adj_close":140.16},
{"symbol":"HSY","date":"2021-01-06","adj_close":151.26},
{"symbol":"CLX","date":"2021-01-06","adj_close":197.41},
{"symbol":"COST","date":"2021-01-06","adj_close":370.02},
{"symbol":"MDLZ","date":"2021-01-06","adj_close":57.87},
{"symbol":"K","date":"2021-01-06","adj_close":61.32},
{"symbol":"KHC","date":"2021-01-06","adj_close":33.94},
{"symbol":"PEP","date":"2021-01-06","adj_close":142.93},
{"symbol":"PG","date":"2021-01-07","adj_close":138.85},
{"symbol":"HSY","date":"2021-01-07","adj_close":151.17},
{"symbol":"CLX","date":"2021-01-07","adj_close":196.43},
{"symbol":"COST","date":"2021-01-07","adj_close":367.92},
{"symbol":"MDLZ","date":"2021-01-07","adj_close":57.76},
{"symbol":"K","date":"2021-01-07","adj_close":60.89},
{"symbol":"KHC","date":"2021-01-07","adj_close":33.695},
{"symbol":"PEP","date":"2021-01-07","adj_close":142.47},
{"symbol":"PG","date":"2021-01-08","adj_close":138.79},
{"symbol":"HSY","date":"2021-01-08","adj_close":152.03},
{"symbol":"CLX","date":"2021-01-08","adj_close":197.84},
{"symbol":"COST","date":"2021-01-08","adj_close":369.94},
{"symbol":"MDLZ","date":"2021-01-08","adj_close":58.19},
{"symbol":"K","date":"2021-01-08","adj_close":60.2},
{"symbol":"KHC","date":"2021-01-08","adj_close":33.62},
{"symbol":"PEP","date":"2021-01-08","adj_close":144.18},
{"symbol":"PG","date":"2021-01-11","adj_close":137.85},
{"symbol":"HSY","date":"2021-01-11","adj_close":150.11},
{"symbol":"CLX","date":"2021-01-11","adj_close":193.73},
{"symbol":"COST","date":"2021-01-11","adj_close":364.01},
{"symbol":"MDLZ","date":"2021-01-11","adj_close":57.09},
{"symbol":"K","date":"2021-01-11","adj_close":59.37},
{"symbol":"KHC","date":"2021-01-11","adj_close":32.85},
{"symbol":"PEP","date":"2021-01-11","adj_close":142.09},
{"symbol":"PG","date":"2021-01-12","adj_close":137.05},
{"symbol":"HSY","date":"2021-01-12","adj_close":149.38},
{"symbol":"CLX","date":"2021-01-12","adj_close":194.24},
{"symbol":"COST","date":"2021-01-12","adj_close":364.2},
{"symbol":"MDLZ","date":"2021-01-12","adj_close":57.32},
{"symbol":"K","date":"2021-01-12","adj_close":58.56},
{"symbol":"KHC","date":"2021-01-12","adj_close":32.18},
{"symbol":"PEP","date":"2021-01-12","adj_close":141.43},
{"symbol":"PG","date":"2021-01-13","adj_close":137.26},
{"symbol":"HSY","date":"2021-01-13","adj_close":149.92},
{"symbol":"CLX","date":"2021-01-13","adj_close":193.74},
{"symbol":"COST","date":"2021-01-13","adj_close":366.95},
{"symbol":"MDLZ","date":"2021-01-13","adj_close":57.37},
{"symbol":"K","date":"2021-01-13","adj_close":59.14},
{"symbol":"KHC","date":"2021-01-13","adj_close":32.01},
{"symbol":"PEP","date":"2021-01-13","adj_close":142.59},
{"symbol":"PG","date":"2021-01-14","adj_close":135.8},
{"symbol":"HSY","date":"2021-01-14","adj_close":147.42},
{"symbol":"CLX","date":"2021-01-14","adj_close":195.55},
{"symbol":"COST","date":"2021-01-14","adj_close":362.35},
{"symbol":"MDLZ","date":"2021-01-14","adj_close":57.31},
{"symbol":"K","date":"2021-01-14","adj_close":59.05},
{"symbol":"KHC","date":"2021-01-14","adj_close":32.08},
{"symbol":"PEP","date":"2021-01-14","adj_close":141.76},
{"symbol":"PG","date":"2021-01-15","adj_close":134.78},
{"symbol":"HSY","date":"2021-01-15","adj_close":148.46},
{"symbol":"CLX","date":"2021-01-15","adj_close":197.52},
{"symbol":"COST","date":"2021-01-15","adj_close":362.16},
{"symbol":"MDLZ","date":"2021-01-15","adj_close":57.22},
{"symbol":"K","date":"2021-01-15","adj_close":59.03},
{"symbol":"KHC","date":"2021-01-15","adj_close":31.99},
{"symbol":"PEP","date":"2021-01-15","adj_close":141.39},
{"symbol":"PG","date":"2021-01-15","adj_close":134.78},
{"symbol":"HSY","date":"2021-01-15","adj_close":148.46},
{"symbol":"CLX","date":"2021-01-15","adj_close":197.52},
{"symbol":"COST","date":"2021-01-15","adj_close":362.16},
{"symbol":"MDLZ","date":"2021-01-15","adj_close":57.22},
{"symbol":"K","date":"2021-01-15","adj_close":59.03},
{"symbol":"KHC","date":"2021-01-15","adj_close":31.99},
{"symbol":"PEP","date":"2021-01-15","adj_close":141.39},
{"symbol":"PG","date":"2021-01-19","adj_close":133.6},
{"symbol":"HSY","date":"2021-01-19","adj_close":148.75},
{"symbol":"CLX","date":"2021-01-19","adj_close":196.51},
{"symbol":"COST","date":"2021-01-19","adj_close":354.47},
{"symbol":"MDLZ","date":"2021-01-19","adj_close":57.14},
{"symbol":"K","date":"2021-01-19","adj_close":58.46},
{"symbol":"KHC","date":"2021-01-19","adj_close":32.36},
{"symbol":"PEP","date":"2021-01-19","adj_close":142.06},
{"symbol":"PG","date":"2021-01-20","adj_close":131.93},
{"symbol":"HSY","date":"2021-01-20","adj_close":149.63},
{"symbol":"CLX","date":"2021-01-20","adj_close":196.93},
{"symbol":"COST","date":"2021-01-20","adj_close":361.3},
{"symbol":"MDLZ","date":"2021-01-20","adj_close":57.1},
{"symbol":"K","date":"2021-01-20","adj_close":57.64},
{"symbol":"KHC","date":"2021-01-20","adj_close":32.86},
{"symbol":"PEP","date":"2021-01-20","adj_close":141.33},
{"symbol":"PG","date":"2021-01-21","adj_close":131.01},
{"symbol":"HSY","date":"2021-01-21","adj_close":148.98},
{"symbol":"CLX","date":"2021-01-21","adj_close":197.21},
{"symbol":"COST","date":"2021-01-21","adj_close":362.8},
{"symbol":"MDLZ","date":"2021-01-21","adj_close":56.12},
{"symbol":"K","date":"2021-01-21","adj_close":57.89},
{"symbol":"KHC","date":"2021-01-21","adj_close":32.78},
{"symbol":"PEP","date":"2021-01-21","adj_close":139.61},
{"symbol":"PG","date":"2021-01-22","adj_close":130},
{"symbol":"HSY","date":"2021-01-22","adj_close":148.2},
{"symbol":"CLX","date":"2021-01-22","adj_close":202.35},
{"symbol":"COST","date":"2021-01-22","adj_close":362.3},
{"symbol":"MDLZ","date":"2021-01-22","adj_close":56.25},
{"symbol":"K","date":"2021-01-22","adj_close":58.3},
{"symbol":"KHC","date":"2021-01-22","adj_close":32.91},
{"symbol":"PEP","date":"2021-01-22","adj_close":138.59},
{"symbol":"PG","date":"2021-01-25","adj_close":132.24},
{"symbol":"HSY","date":"2021-01-25","adj_close":147.53},
{"symbol":"CLX","date":"2021-01-25","adj_close":211.96},
{"symbol":"COST","date":"2021-01-25","adj_close":361.88},
{"symbol":"MDLZ","date":"2021-01-25","adj_close":56.87},
{"symbol":"K","date":"2021-01-25","adj_close":59.84},
{"symbol":"KHC","date":"2021-01-25","adj_close":33.75},
{"symbol":"PEP","date":"2021-01-25","adj_close":140.18},
{"symbol":"PG","date":"2021-01-26","adj_close":133.09},
{"symbol":"HSY","date":"2021-01-26","adj_close":149.52},
{"symbol":"CLX","date":"2021-01-26","adj_close":212.99},
{"symbol":"COST","date":"2021-01-26","adj_close":364.98},
{"symbol":"MDLZ","date":"2021-01-26","adj_close":57.59},
{"symbol":"K","date":"2021-01-26","adj_close":60.92},
{"symbol":"KHC","date":"2021-01-26","adj_close":34.39},
{"symbol":"PEP","date":"2021-01-26","adj_close":141.8},
{"symbol":"PG","date":"2021-01-27","adj_close":128.38},
{"symbol":"HSY","date":"2021-01-27","adj_close":146.19},
{"symbol":"CLX","date":"2021-01-27","adj_close":222.18},
{"symbol":"COST","date":"2021-01-27","adj_close":356.39},
{"symbol":"MDLZ","date":"2021-01-27","adj_close":56.42},
{"symbol":"K","date":"2021-01-27","adj_close":62.36},
{"symbol":"KHC","date":"2021-01-27","adj_close":34.74},
{"symbol":"PEP","date":"2021-01-27","adj_close":138.04},
{"symbol":"PG","date":"2021-01-28","adj_close":130.36},
{"symbol":"HSY","date":"2021-01-28","adj_close":148.21},
{"symbol":"CLX","date":"2021-01-28","adj_close":209.57},
{"symbol":"COST","date":"2021-01-28","adj_close":357.06},
{"symbol":"MDLZ","date":"2021-01-28","adj_close":57.12},
{"symbol":"K","date":"2021-01-28","adj_close":60.17},
{"symbol":"KHC","date":"2021-01-28","adj_close":33.96},
{"symbol":"PEP","date":"2021-01-28","adj_close":139.19},
{"symbol":"PG","date":"2021-01-29","adj_close":128.21},
{"symbol":"HSY","date":"2021-01-29","adj_close":145.44},
{"symbol":"CLX","date":"2021-01-29","adj_close":209.46},
{"symbol":"COST","date":"2021-01-29","adj_close":352.43},
{"symbol":"MDLZ","date":"2021-01-29","adj_close":55.44},
{"symbol":"K","date":"2021-01-29","adj_close":58.94},
{"symbol":"KHC","date":"2021-01-29","adj_close":33.51},
{"symbol":"PEP","date":"2021-01-29","adj_close":136.57},
{"symbol":"PG","date":"2021-02-01","adj_close":128.97},
{"symbol":"HSY","date":"2021-02-01","adj_close":145.11},
{"symbol":"CLX","date":"2021-02-01","adj_close":210.02},
{"symbol":"COST","date":"2021-02-01","adj_close":350.52},
{"symbol":"MDLZ","date":"2021-02-01","adj_close":55.25},
{"symbol":"K","date":"2021-02-01","adj_close":58.82},
{"symbol":"KHC","date":"2021-02-01","adj_close":33.25},
{"symbol":"PEP","date":"2021-02-01","adj_close":136.98},
{"symbol":"PG","date":"2021-02-02","adj_close":128.79},
{"symbol":"HSY","date":"2021-02-02","adj_close":147.12},
{"symbol":"CLX","date":"2021-02-02","adj_close":204.23},
{"symbol":"COST","date":"2021-02-02","adj_close":355.58},
{"symbol":"MDLZ","date":"2021-02-02","adj_close":56.16},
{"symbol":"K","date":"2021-02-02","adj_close":58.45},
{"symbol":"KHC","date":"2021-02-02","adj_close":33.16},
{"symbol":"PEP","date":"2021-02-02","adj_close":138.38},
{"symbol":"PG","date":"2021-02-03","adj_close":128.95},
{"symbol":"HSY","date":"2021-02-03","adj_close":146.58},
{"symbol":"CLX","date":"2021-02-03","adj_close":204.59},
{"symbol":"COST","date":"2021-02-03","adj_close":355.21},
{"symbol":"MDLZ","date":"2021-02-03","adj_close":55.28},
{"symbol":"K","date":"2021-02-03","adj_close":58.01},
{"symbol":"KHC","date":"2021-02-03","adj_close":33.01},
{"symbol":"PEP","date":"2021-02-03","adj_close":138.02},
{"symbol":"PG","date":"2021-02-04","adj_close":129.03},
{"symbol":"HSY","date":"2021-02-04","adj_close":147.22},
{"symbol":"CLX","date":"2021-02-04","adj_close":191.65},
{"symbol":"COST","date":"2021-02-04","adj_close":355.85},
{"symbol":"MDLZ","date":"2021-02-04","adj_close":56},
{"symbol":"K","date":"2021-02-04","adj_close":57.87},
{"symbol":"KHC","date":"2021-02-04","adj_close":32.92},
{"symbol":"PEP","date":"2021-02-04","adj_close":139.68},
{"symbol":"PG","date":"2021-02-05","adj_close":129.57},
{"symbol":"HSY","date":"2021-02-05","adj_close":146.6},
{"symbol":"CLX","date":"2021-02-05","adj_close":191.25},
{"symbol":"COST","date":"2021-02-05","adj_close":355.17},
{"symbol":"MDLZ","date":"2021-02-05","adj_close":56.21},
{"symbol":"K","date":"2021-02-05","adj_close":58.03},
{"symbol":"KHC","date":"2021-02-05","adj_close":33.8},
{"symbol":"PEP","date":"2021-02-05","adj_close":140.96},
{"symbol":"PG","date":"2021-02-08","adj_close":129.17},
{"symbol":"HSY","date":"2021-02-08","adj_close":149.33},
{"symbol":"CLX","date":"2021-02-08","adj_close":190},
{"symbol":"COST","date":"2021-02-08","adj_close":359.83},
{"symbol":"MDLZ","date":"2021-02-08","adj_close":56.02},
{"symbol":"K","date":"2021-02-08","adj_close":57.74},
{"symbol":"KHC","date":"2021-02-08","adj_close":33.91},
{"symbol":"PEP","date":"2021-02-08","adj_close":140.4},
{"symbol":"PG","date":"2021-02-09","adj_close":128.67},
{"symbol":"HSY","date":"2021-02-09","adj_close":149.62},
{"symbol":"CLX","date":"2021-02-09","adj_close":187.35},
{"symbol":"COST","date":"2021-02-09","adj_close":359.56},
{"symbol":"MDLZ","date":"2021-02-09","adj_close":55.5},
{"symbol":"PEP","date":"2021-02-09","adj_close":139.6},
{"symbol":"KHC","date":"2021-02-09","adj_close":33.71},
{"symbol":"K","date":"2021-02-09","adj_close":57.64}]
Here is a sample including company ticker selector:
Presentator.js:
export function Presentator() {
const [data, setData] = useState([]);
const [ticker, setTicker] = useState('');
useEffect(() => {
const fetchData = async () => {
/* DO ACTUAL FETCH FROM SERVICE */
const result = await Promise.resolve(response);
setData(result);
}
fetchData();
}, []);
const handleTickerChange = (event) => {
setTicker(event.target.value);
}
const getTickerData = (ticker) => {
return data.filter(item => item.symbol.toLowerCase() === ticker.toLowerCase());
};
const getTickerDropdownValues = () => {
const set = new Set();
data.forEach(item => {
if (!set.has(item.symbol)) {
set.add(item.symbol);
}
});
return Array.from(set);
}
const getTickerDropdown = () => {
const options = getTickerDropdownValues();
return (
<select value={ticker} onChange={handleTickerChange}>
{options.map(option => {
return (
<option key={option} value={option}>{option}</option>
);
})}
</select>
);
}
return (
<>
{getTickerDropdown()}
<Graph data={getTickerData(ticker)} />
</>
);
}
Graph.js:
export function Graph(props) {
const { data } = props;
const getChartData = () => {
const labels = [];
const series = [];
data.forEach(item => {
labels.push(item.date);
series.push(item.adj_close);
});
return {
labels: labels,
series: [series]
};
}
// Add your graph configuration here
const chartOptions = {
// width: 2000,
height: 400,
// scaleMinSpace: 20
};
return (
<ChartistGraph data={getChartData()} options={chartOptions} type="Line" />
);
}
Basically, the Presentator handles the initial fetching of the data and the logic to split the data by ticker. Then, the Graph component handles the visualization of the specific ticker data itself.
You can check a working example at this codesandbox.
You don't need to store anything more in the state than the data itself. In our case we're also storing the selected value for the ticker dropdown. Everything else can be calculated.
In the getChartData function you can do further filtering and manipulation of the data as for example presenting only the last 10 records(dates) instead of the whole set.