<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);
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.