<head>
  <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<h3>Baltic Dry Index</h3>
 <div id="myDiv_BDI"></div>
 (*) Shaded areas indicate recessions. Data source: <a href="https://www.quandl.com/data/LLOYDS/BDI-Baltic-Dry-Index">Quandl, Baltic Dry Index</a>
 <script>
    <!-- JAVASCRIPT CODE GOES HERE -->

  </script>
</body>
var divIDString_BDI="div[id='myDiv_BDI']";

// x axis range
var yearsToPlot_BDI = 19;
var currentTime_BDI = new Date();
var month_BDI = currentTime_BDI.getMonth() + 1;
var day_BDI = currentTime_BDI.getDate();
var year_BDI = currentTime_BDI.getFullYear();
var initialYear_BDI = year_BDI - yearsToPlot_BDI;
var currentDate_BDI = year_BDI+'-'+month_BDI+'-'+day_BDI;
var initialDate_BDI = initialYear_BDI+'-'+month_BDI+'-'+day_BDI;





var url2_BDI = 'https://raw.githubusercontent.com/ajoposor/Baltic-Dry-Index/master/Old_Data_Baltic_Dry_Index_1985-2009-03-13.csv';
var x2SeriesName_BDI = 'x';
var y2SeriesName_BDI = 'y';
var y2NameToBeDisplayed_BDI = '';

var y2Color_BDI = '#4572A7';
var y2Width_BDI = 3;
var y2Dash_BDI = 'solid';



// Section deals with buttons for time range selection
var selectorOptions_BDI = {
  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_BDI = {
  xaxis: {
    rangeselector: selectorOptions_BDI,
    rangeslider: {},
    range:[initialDate_BDI,currentDate_BDI],
    tickfont: {
      family: 'Open Sans, Arial',
      size: 12,
      color: '#0d0d0d'
    }
  },
  yaxis: {
    type: 'linear',
    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: '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_BDI = {
  showLink: false,
  displayModeBar: false
};


// Next piece of code deals with responsiveness
var d3_BDI = Plotly.d3;
var WIDTH_IN_PERCENT_OF_PARENT_BDI = 100;


var gd3_BDI = d3_BDI.select(divIDString_BDI)
  .style({
    width: WIDTH_IN_PERCENT_OF_PARENT_BDI + '%',
    height: '460px',
  });

var myDiv_BDI = gd3_BDI.node();



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

function processData_BDI(allRows_BDI, xLabel_BDI, yLabel_BDI, yTraceName_BDI, yTraceColor_BDI, yWidth_BDI, yDash_BDI) {
  
  var row = {};
  var x = [],
      y = [],
    trace = [];
  

  for (var i = 0; i < allRows_BDI.length; i++) {
    row = allRows_BDI[i];
    x.push(row[xLabel_BDI]);
    y.push(row[yLabel_BDI]);

  }
  trace = {
    x: x,
    y: y,
    name: yTraceName_BDI,
    mode: 'lines',
    line: {color: yTraceColor_BDI,  width: yWidth_BDI, dash: yDash_BDI },
  };
  return trace;
}


   Plotly.d3.csv(url2_BDI, function(err2_BDI, csvData2_BDI) {
    
    var trace2_BDI = processData_BDI(csvData2_BDI, x2SeriesName_BDI, y2SeriesName_BDI, y2NameToBeDisplayed_BDI,y2Color_BDI,y2Width_BDI, y2Dash_BDI);

    var data_BDI = [/*trace1_BDI,*/trace2_BDI];
    Plotly.newPlot(myDiv_BDI, data_BDI, layout_BDI, options_BDI);




  });



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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.