<head>
  <!-- Plotly.js -->
   <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
   <!-- jquery -->
  <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
  <div id="myDivSP500" class="plotly" align="left" style="width:1200px; height:750px;"></div>
  <span class="hideshow" id="log">
    <button>Log</button>
</span>
<span class="hideshow" id="linear">
    <button>linear</button
</span>
  
  
  <script>
    <!-- JAVASCRIPT CODE GOES HERE -->
  </script>
</body>
//sources: 
//
//calls of csv files: get csv data: https://plot.ly/javascript/ajax-call/
// handling various csv s https://community.plot.ly/t/how-to-merge-two-plotly-graphs-plotted-by-using-rest-url-for-csv-data/2122
//
// Range slider and time selectors: https://plot.ly/javascript/range-slider/
//
//Resonsive layout: 
//https://plot.ly/javascript/responsive-fluid-layout/
//https://codepen.io/etpinard/pen/NrrOrY?editors=1010 (responsive resize)
//
//https://plot.ly/javascript/plotlyjs-function-reference/
//
// layout axis: https://plot.ly/javascript/multiple-axes/
//
// add traces function: https://plot.ly/javascript/plotlyjs-function-reference/

// x axis range

//console.log(0);
var yearsToPlot = 65;
var currentTime = new Date();
var month = currentTime.getMonth() + 1;
var day = currentTime.getDate();
var year = currentTime.getFullYear();
var initialYear = year - yearsToPlot;
//console.log(initialYear);
var currentDate = year+'-'+month+'-'+day;
//console.log(currentDate);
//var initialDate = initialYear+'-'+month+'-'+day;
initialDate='1950-01-01';
//console.log(initialDate);

// Place urls for cvs files here
var url1 = 'https://www.quandl.com/api/v3/datasets/YAHOO/INDEX_GSPC.csv?api_key=9W5Lmc8yVZxZLm8jAux-';
var x1SeriesName = 'Date';
var y1SeriesName = 'Close';
var y1NameToBeDisplayed = '';
var y1Mode = 'lines';
var y1Color = '#4572A7';
var y1Width = 3;
var y1Dash = 'solid';

//var url2 = 'https://www.quandl.com/api/v3/datasets/MULTPL/SP500_PE_RATIO_MONTH.csv?api_key=9W5Lmc8yVZxZLm8jAux-&start_date=1898-01-01';
//var x2SeriesName = 'Date';
//var y2SeriesName = 'Value';
//var y2NameToBeDisplayed = 'S&P 500 PE Ratio';
//var y2Mode = 'lines';
//var y2Color = '#92A8CD';
//var y2Width = 2;
//var y2Dash = 'dot';

//var url3 = 'XXXX';
//var url4 = 'XXXX';
//var url5 = 'XXXX';


// Section deals with buttons for time range selection
var selectorOptions = {
  buttons: [{
    step: 'month',
    stepmode: 'backward',
    count: 1,
    label: '1m',
  }, {
    step: 'month',
    stepmode: 'backward',
    count: 6,
    label: '6m'
  }, {
    step: 'year',
    stepmode: 'todate',
    count: 1,
    label: 'YTD'
  }, {
    step: 'year',
    stepmode: 'backward',
    count: 1,
    label: '1y'
  }, {
    step: 'all',
  }],
  font: {
      family: 'Open Sans, Arial',
      size: 12,
      color: '#0d0d0d'
    },
  xanchor: 'right',
  x: 1
};

// set layout down here
var layout = {
  xaxis: {
    rangeselector: selectorOptions,
    rangeslider: {},
    range:[initialDate,currentDate],
    tickfont: {
      family: 'Open Sans, Arial',
      size: 12,
      color: '#0d0d0d'
    }
  },
  yaxis: {
    type: 'log',
    autorange: true,
    //range:[0,50],
    side: 'right',
    tickfont: {
      family: 'Open Sans, Arial',
      size: 12,
      color: '#0d0d0d'
    }
  },
  showlegend: false,
  paper_bgcolor: '#E1E9F0',
  margin: { t: 30, l: 2, r: 100, b: 25 },
   shapes: [
     {
            type: 'rect',
            // x-reference is assigned to the x-values
            xref: 'x',
            // y-reference is assigned to the plot paper [0,1]
            yref: 'paper',
            x0: '1953-07-01',
            y0: 0,
            x1: '1954-08-30',
            y1: 1,
            fillcolor: '#000000',
            opacity: 0.15,
            line: {
                width: 0
            }
        },
      {
            type: 'rect',
            // x-reference is assigned to the x-values
            xref: 'x',
            // y-reference is assigned to the plot paper [0,1]
            yref: 'paper',
            x0: '1957-08-01',
            y0: 0,
            x1: '1958-04-30',
            y1: 1,
            fillcolor: '#000000',
            opacity: 0.15,
            line: {
                width: 0
            }
        },
      {
            type: 'rect',
            // x-reference is assigned to the x-values
            xref: 'x',
            // y-reference is assigned to the plot paper [0,1]
            yref: 'paper',
            x0: '1960-04-01',
            y0: 0,
            x1: '1961-02-28',
            y1: 1,
            fillcolor: '#000000',
            opacity: 0.15,
            line: {
                width: 0
            }
        },
     {
            type: 'rect',
            // x-reference is assigned to the x-values
            xref: 'x',
            // y-reference is assigned to the plot paper [0,1]
            yref: 'paper',
            x0: '1969-12-01',
            y0: 0,
            x1: '1970-11-30',
            y1: 1,
            fillcolor: '#000000',
            opacity: 0.15,
            line: {
                width: 0
            }
        },
      {
            type: 'rect',
            // x-reference is assigned to the x-values
            xref: 'x',
            // y-reference is assigned to the plot paper [0,1]
            yref: 'paper',
            x0: '1973-11-01',
            y0: 0,
            x1: '1975-03-30',
            y1: 1,
            fillcolor: '#000000',
            opacity: 0.15,
            line: {
                width: 0
            }
        },
      {
            type: 'rect',
            // x-reference is assigned to the x-values
            xref: 'x',
            // y-reference is assigned to the plot paper [0,1]
            yref: 'paper',
            x0: '1980-01-01',
            y0: 0,
            x1: '1980-07-30',
            y1: 1,
            fillcolor: '#000000',
            opacity: 0.15,
            line: {
                width: 0
            }
        },
     {
            type: 'rect',
            // x-reference is assigned to the x-values
            xref: 'x',
            // y-reference is assigned to the plot paper [0,1]
            yref: 'paper',
            x0: '1981-07-01',
            y0: 0,
            x1: '1982-11-30',
            y1: 1,
            fillcolor: '#000000',
            opacity: 0.15,
            line: {
                width: 0
            }
        },
     {
            type: 'rect',
            // x-reference is assigned to the x-values
            xref: 'x',
            // y-reference is assigned to the plot paper [0,1]
            yref: 'paper',
            x0: '1990-07-01',
            y0: 0,
            x1: '1991-03-30',
            y1: 1,
            fillcolor: '#000000',
            opacity: 0.15,
            line: {
                width: 0
            }
        },
      {
            type: 'rect',
            // x-reference is assigned to the x-values
            xref: 'x',
            // y-reference is assigned to the plot paper [0,1]
            yref: 'paper',
            x0: '2001-03-01',
            y0: 0,
            x1: '2001-11-30',
            y1: 1,
            fillcolor: '#000000',
            opacity: 0.15,
            line: {
                width: 0
            }
        },
      {
            type: 'rect',
            // x-reference is assigned to the x-values
            xref: 'x',
            // y-reference is assigned to the plot paper [0,1]
            yref: 'paper',
            x0: '2007-12-01',
            y0: 0,
            x1: '2009-06-30',
            y1: 1,
            fillcolor: '#000000',
            opacity: 0.15,
            line: {
                width: 0
            }
        }
    ]
};

// set display options
var options = {
  showLink: false,
  displayModeBar: false
};

// Next piece of code deals with responsiveness
var d3 = Plotly.d3;
var WIDTH_IN_PERCENT_OF_PARENT = 100,
  HEIGHT_IN_PERCENT_OF_PARENT = 97;

var myPlot = document.getElementById('myDivSP500');

var gd3 = d3.select("div[id='myDivSP500']")
  .style({
    width: WIDTH_IN_PERCENT_OF_PARENT + '%',
    //'margin-left': (100 - WIDTH_IN_PERCENT_OF_PARENT) / 2 + '%',
    height: '460px',//HEIGHT_IN_PERCENT_OF_PARENT + 'vh',
    //'margin-top': (100 - HEIGHT_IN_PERCENT_OF_PARENT) / 2 + 'vh'
  });

var my_Div = gd3.node();

// main code, reads cvs files and creates traces and combine them in data

function processData(allRows, xLabel, yLabel, yTraceName, yTraceColor, yWidth, yDash) {

  var x = [],
    y = [],
    trace = [];
 // console.log(allRows.length);

  for (var i = 0; i < allRows.length; i++) {
    row = allRows[i];
    x.push(row[xLabel]);
    y.push(row[yLabel]);
    if (i === 0) {
     // console.log(i);
    }
  }
  trace = {
    x: x,
    y: y,
    name: yTraceName,
    mode: 'lines',
    line: {color: yTraceColor,  width: yWidth, dash: yDash },
  };
  //console.log(trace.mode);
  return trace;
}

Plotly.d3.csv(url1, function(err1, csvData1) {
 // Plotly.d3.csv(url2, function(err2, csvData2) {
    //       Plotly.d3.csv(url3, function(err,csvData3){
    //           Plotly.d3.csv(url4, function(err,csvData4){
    //                Plotly.d3.csv(url5, function(err,csvData5){

    var trace1 = processData(csvData1, x1SeriesName, y1SeriesName, y1NameToBeDisplayed,y1Color,y1Width, y1Dash);
    //var trace2 = processData(csvData2, x2SeriesName, y2SeriesName, y2NameToBeDisplayed,y2Color,y2Width, y2Dash);
    //console.log(err1);
    var data = [trace1];
    Plotly.newPlot(my_Div, data, layout, options);
   // console.log('listoNewPlotOriginal');

   //console.log(2222);
 //    myPlot.on('plotly_relayout',function(relayoutData){
 //       console.log(relayoutData);
//        if (relayoutData['xaxis.autorange']===true){
//          console.log('autorange');
//          var newLayout={
//	        yaxis: {autorange: true}
//          };  
//        }
//        else if (relayoutData['autosize']===true){
//        }
//        else if(relayoutData['xaxis.range[0]']!== null ){
 //         console.log(1);
//          console.log(relayoutData['xaxis.range[0]']);
//          var minValue, maxValue;
//          var i=0,j=0;
//          console.log(relayoutData);
//          var x0=  relayoutData['xaxis.range[0]'];
//          console.log(x0);
 //         if(x0 !== null) {
 //           var x1=  relayoutData['xaxis.range[1]'];
 //           console.log(x1);
  //          for(i=0; i<data.length; i++){
	//            var aTrace = data[i];
  //            console.log(aTrace.y.length); 
	          //  for(j=0; j<aTrace.y.length; j++){
  //                var x= aTrace.x[j];
 //                 //console.log(x);
 //                 if(x>=x0 && x<= x1){
 // 	                var aValue = aTrace.y[j];
                    //console.log(aValue);
 //                   if(maxValue===null || aValue>maxValue){
 //     	              maxValue = aValue;
 //                   }
  //                  if(minValue===null || aValue<minValue){
  //      	            minValue = aValue;
  //                  }
              //} 
 //           }
  //        }
  //      var newLayout={
	//        yaxis: {range: [minValue, maxValue]}
  //        };    
  //      }  
       
       //console.log(newLayout);
      
       // Plotly.relayout(my_Div, newLayout);  
 //       }
     
  
//  });
 });
//});
//});
//});

//Plotly.d3.json('https://plot.ly/~6823844/11.json', function(errJson, figureJson) {

//console.log(errJson);
//var trace = {
//   x: figureJson[0].x,
//   y: figureJson[0].y,
//   name: 'BDI Old'
// };

//});

//instruction resizes plot
window.onresize = function() {
  Plotly.Plots.resize(my_Div);
};

 



$('.hideshow button').click(function(){
    var btn_id = this.parentNode.id,
        scale = ( btn_id === 'log' ) ? 'log' : 'linear',
        myDiv = document.getElementById("myDiv");
       // console.log(btn_id);
        var update = {
                     yaxis: { 
                       side: 'right',
                       autorange: true,
                       rangemode:'nonnegative',
                       type: scale,
                       //range: [0,50],
                       tickfont: {
                          family: 'Open Sans, Arial',
                          size: 12,
                          color: '#0d0d0d'
                          }
                        }   
         };
     
        Plotly.relayout(my_Div,update);
   
});

function remakePlot(my_Div,update){
 Plotly.relayout(my_Div, update);
  
 //console.log(update);
}

Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.