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.d3.csv(url1, function(data){ processData(data) } );
          Plotly.d3.csv(url2, function(data){ processData(data) } );
        };

        var x1 = [], y1 = [], x2 = [], y2 = [];

        function processData(allRows) {

            // console.log(allRows);
            var trace1 = {
              meta: {columnNames: {
                  x: 'Month', 
                  y: 'ET'
                }}, 
              // mode: 'markers', 
              type: 'bar', 
              xsrc: 'cherryleh:0:82a87a', 
              ysrc: 'cherryleh:0:b91f8b',  
              orientation: 'v'
            };

            var trace2 = {
              meta: {columnNames: {
                  x: 'Month', 
                  y: 'ET'
                }}, 
              mode: 'lines', 
              type: 'scatter', 
              xsrc: 'cherryleh:1:85e4dd', 
              ysrc: 'cherryleh:1:94a7fd', 
              orientation: 'v'
            };

            for (var i=0; i<allRows.length; i++) {
                row = allRows[i];
                if (row['Month1'] !== 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']);}
            }
            
            // x1 will be filled first, satisfying this condition
            if (x1.length !== 0 && x2.length == 0) {
               trace1.x = x1;
               trace1.y = y1;
               console.log("adding trace1")
               console.log(trace1)
               makePlotly(trace1)
            }
            
            else {
       ...