JSFiddle - React, Tailwind, and code Playground

by merillium

HTML

<head>
     <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
   </head>
   <body>
   <!-- Plotly chart will be drawn inside this div -->
   <div id="plotly-div"></div>
   </body>

JavaScript

var url1 ='https://raw.githubusercontent.com/cherryleh/testcsvs/main/RS01_ETaverage.csv';
var url2 = 'https://raw.githubusercontent.com/cherryleh/testcsvs/main/RS01_ETmonthlyavg.csv';



        function makeplot() {
          Plotly.newPlot('plotly-div')
          Plotly.d3.csv(url1, function(data){ Plotly.addTraces(data) } );
          Plotly.d3.csv(url2, function(data){ Plotly.addTraces(data) } );
        };

        function processData(allRows) {
            
            var x1 = [], y1 = [], x2 = [], y2 = [];
            console.log(allRows[0])
            for (var i=0; i<allRows.length; i++) {
                row = allRows[i];
                if (row['Month1'] !== undefined && row['ET1'] !== undefined) {
                    x1.push(row['Month1']);}
                if (row['ET1'] !== undefined) {
                    y1.push(row['ET1']);}
                if (row['Month2'] !== undefined) {
                    x2.push(row['Month2']);}
                if (row['ET2'] !== undefined) {
                    y2.push(row['ET2']);}
            }

            if (x2.length == 0 && y2.length == 0) {
                trace1 = {
                  meta: {columnNames: {
                      x: 'Month', 
                      y: 'ET'
                    }}, 
                  mode: 'markers', 
                  x: x1,
                  y: y1,
                  type: 'bar', 
                  xsrc: 'cherryleh:0:82a87a', 
                  ysrc: 'cherryleh:0:b91f8b',  
                  orientation: 'v'
                };
                console.log("trace1")
                console.log(trace1)
                makePlotly(trace1)
            }
            else if (x1.length == 0 && y1.length == 0) {
                trace2 = {
                  meta: {columnNames: {
                      x: 'Month', 
                      y: 'ET'
                    }},
                  mode: 'lines', 
                  x: x2,
                  y: y2,
                  type: 'scatter', 
        ...