Click here to Skip to main content
14,927,597 members
Please Sign up or sign in to vote.
0.00/5 (No votes)
I have a js file with some data with x and y-axis, for a chart. I need to display this data using react Plotly as hooks to my function.

How can I accomplish this?

What I have tried:

Here is my code so far:

data.js:
export const ScatterData = {
"data":[
{
"x": [40, 80, 120, 160, 200, 240, 280, 320, 360, 400, 440, 480, 520, 560,
600, 640, 680, 720, 760, 800, 840, 880, 920, 960, 1000, 1040, 1080,
1120, 1160, 1200, 1240, 1280, 1320, 1360, 1400, 1440, 1480, 1520, 1560,
1600, 1640, 1680, 1720, 1760, 1800, 1840, 1880, 1920, 1960, 2000, 2040,
2080, 2120, 2160, 2200, 2240, 2280, 2320, 2360, 2400, 2440, 2480, 2520,
2560, 2600, 2640, 2680, 2720, 2760, 2800, 2840, 2880, 2920, 2960, 3000,
3040, 3080, 3120, 3160, 3200, 3240, 3280, 3320, 3360, 3400, 3440, 3480,
3520, 3560, 3600, 3640, 3680, 3720, 3760, 3800, 3840, 3880, 3920, 3960, 4000],
"y": [-11.98752097, -11.98587175, -11.9840901, -11.98657347, -11.98618678,
-11.98618678, -11.98618678, -11.98618678, -11.98618678, -11.98618678,
-11.98618678, -11.98618678, -11.98618678, -11.98618678, -11.98618678,
-11.98618678, -11.98618678, -11.98618678, -11.98618678, -11.98618678,
-11.98618678, -11.98618678, -11.98618678, -11.98618678, -11.98618678,
-11.98618678, -11.98618678, -11.98618678, -11.98618678, -11.98618678,
-11.98618678, -11.98618678, -11.98618678, -11.98618678, -11.98618678,
-11.98618678, -11.98618678, -11.98618678, -11.98618678, -11.98618678,
-11.98618678, -11.98618678, -11.98618678, -11.98618678, -11.98618678,
-11.98618678, -11.98618678, -11.98618678, -11.98618678, -11.98618678,
-11.98618678, -11.98618678, -11.98618678, -11.98618678, -11.98618678,
-11.98618678, -11.98618678, -11.98618678, -11.98618678, -11.98618678,
-11.98618678, -11.98618678, -11.98618678, -11.98618678, -11.98618678,
-11.98618678, -11.98618678, -11.98618678, -11.98618678, -11.98618678,
-11.98618678, -11.98618678, -11.98618678, -11.98618678, -11.98618678,
-11.98618678, -11.98618678, -11.98618678, -11.98618678, -11.98618678,
-11.98618678, -11.98618678, -11.98618678, -11.98618678, -11.98618678,
-11.98618678, -11.98618678, -11.98618678, -11.98618678, -11.98618678,
-11.98618678, -11.98618678, -11.98618678, -11.98618678, -11.98618678,
-11.98618678, -11.98618678, -11.98618678, -11.98618678, -11.98618678],
"type": "scatter",
"name":"logResPerm",
"mode": "lines+markers",
"marker": "{color:'red'}",
},
{ "x": [40, 80, 120, 160, 200, 240, 280, 320, 360, 400, 440, 480, 520, 560,
600, 640, 680, 720, 760, 800, 840, 880, 920, 960, 1000, 1040, 1080,
1120, 1160, 1200, 1240, 1280, 1320, 1360, 1400, 1440, 1480, 1520, 1560,
1600, 1640, 1680, 1720, 1760, 1800, 1840, 1880, 1920, 1960, 2000, 2040,
2080, 2120, 2160, 2200, 2240, 2280, 2320, 2360, 2400, 2440, 2480, 2520,
2560, 2600, 2640, 2680, 2720, 2760, 2800, 2840, 2880, 2920, 2960, 3000,
3040, 3080, 3120, 3160, 3200, 3240, 3280, 3320, 3360, 3400, 3440, 3480,
3520, 3560, 3600, 3640, 3680, 3720, 3760, 3800, 3840, 3880, 3920, 3960, 4000],
"y": [0.20749068, 0.20891519, 0.21034543, 0.20980064, 0.21047172,
0.21047172, 0.21047172, 0.21047172, 0.21047172, 0.21047172,
0.21047172, 0.21047172, 0.21047172, 0.21047172, 0.21047172,
0.21047172, 0.21047172, 0.21047172, 0.21047172, 0.21047172,
0.21047172, 0.21047172, 0.21047172, 0.21047172, 0.21047172,
0.21047172, 0.21047172, 0.21047172, 0.21047172, 0.21047172,
0.21047172, 0.21047172, 0.21047172, 0.21047172, 0.21047172,
0.21047172, 0.21047172, 0.21047172, 0.21047172, 0.21047172,
0.21047172, 0.21047172, 0.21047172, 0.21047172, 0.21047172,
0.21047172, 0.21047172, 0.21047172, 0.21047172, 0.21047172,
0.21047172, 0.21047172, 0.21047172, 0.21047172, 0.21047172,
0.21047172, 0.21047172, 0.21047172, 0.21047172, 0.21047172,
0.21047172, 0.21047172, 0.21047172, 0.21047172, 0.21047172,
0.21047172, 0.21047172, 0.21047172, 0.21047172, 0.21047172,
0.21047172, 0.21047172, 0.21047172, 0.21047172, 0.21047172,
0.21047172, 0.21047172, 0.21047172, 0.21047172, 0.21047172,
0.21047172, 0.21047172, 0.21047172, 0.21047172, 0.21047172,
0.21047172, 0.21047172, 0.21047172, 0.21047172, 0.21047172,
0.21047172, 0.21047172, 0.21047172, 0.21047172, 0.21047172,
0.21047172, 0.21047172, 0.21047172, 0.21047172, 0.21047172,
],
"type": "scatter",
"name":"Porosity",
"mode": "lines+markers",
"marker": "{color: 'blue'}",
}

Heres my function:

export const ScatterChart= () => {
ScatterData.data.map()
return(
<plot
data="{ScatterData}/">
)
}
export default ScatterChart

reference: href="https://plotly.com/javascript/react/

any help much appreciated! thank you!
Posted
Updated 10-Feb-21 8:08am

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900