Skip to content

Instantly share code, notes, and snippets.

@rustyb
Last active May 20, 2016 13:15
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save rustyb/5285b4f80794461aaaf065e470a1b09d to your computer and use it in GitHub Desktop.
Save rustyb/5285b4f80794461aaaf065e470a1b09d to your computer and use it in GitHub Desktop.
new sor16
<!DOCTYPE html>
<html>
<head>
<title>SOR Graphs</title>
</head>
<body>
<!-- Latest compiled and minified plotly.js JavaScript -->
<script type="text/javascript" src="https://cdn.plot.ly/plotly-latest.min.js"></script>
<div class="row column">
<div id="myDiv" style="width:90%;height:550px;display: inline-block;"></div>
</div>
<script>
var annotationContent = [];
var layout = {
title: '<b>Total Generation Capacity Evolution (SOR16 vs SOR15)</b>',
xaxis: {
title: '',
"tickprefix": "<b>",
"ticksuffix": "</b>",
titlefont: {
family: 'Courier New, monospace',
size: 18,
color: '#7f7f7f',
weith: 900
}
},
yaxis: {
title: '<b>GW change</b>',
"tickprefix": "<b>",
"ticksuffix": " GW</b>",
titlefont: {
size: 18,
color: '#7f7f7f',
font_weight: 900
}
},
annotations: annotationContent
};
var xVal = ['Total Generation Capacity','Variable generation (mainly wind and solar)', 'Conventional generation (incl. hydro)']
var yVal = [-3, 16, -19]
var yValA = [-4, 17, -20]
trace1 = {
x: xVal,
y: yVal,
type: 'bar',
marker: {
color: ['rgb(31, 119, 180)', 'rgb(44, 160, 44)', 'rgb(255, 127, 14)']
}
}
for( var i = 0 ; i < xVal.length ; i++ ){
var result = {
x: xVal[i],
y: yValA[i],
text: '<b>'+yVal[i]+' GW</b>',
xanchor: 'center',
yanchor: ['bottom'],
showarrow: false,
font: {
size: 15,
color: '#444'
},
};
annotationContent.push(result);
}
/*trace1 = {
x: ['Net Generating Capacity'],
y: [-3, 16, -19],
name: 'Net Generating Capacity',
type: 'bar',
marker: {
color: 'rgb(31, 119, 180)'
}
}
trace2 = {
x: ['Renewable Energy Sources (other than hydro)'],
y: [16],
name: 'Renewable Energy Sources (other than hydro)',
type: 'bar',
marker: {
color: 'rgb(44, 160, 44)'
}
}
trace3 = {
x: ['Non-Renewable Energy Sources incl. hydro'],
name: 'Non-Renewable Energy Sources incl. hydro',
y: [-3, 16, -19],
type: 'bar',
marker: {
color: 'rgb(255, 127, 14)'
}
}*/
var data = [trace1];
Plotly.newPlot('myDiv', data, layout, {staticPlot: true});
</script>
<div class="row column">
<div id="newDiv" style="width:90%;height:550px;display: inline-block;"></div>
</div>
<script>
var annotationContent = [];
var layout = {
title: '<b>Evolution of the generation capacity</b>',
xaxis: {
title: '',
"tickprefix": "<b>",
"ticksuffix": "</b>",
autorange:true,
titlefont: {
family: 'Courier New, monospace',
size: 18,
color: '#7f7f7f',
weith: 900
}
},
yaxis: {
"tickprefix": "<b>",
"ticksuffix": " GW</b>",
autorange:true,
titlefont: {
size: 18,
color: '#7f7f7f',
font_weight: 900
}
},
annotations: annotationContent
};
years = [2010,2011,2012,2013, 2014, 2015]
total = ['911,604', '931,630', '989,471', '1,007,841', '1,016,898', '939,095']
total_res = ['125,302','153,379','195,970','218,155','231,865', '235,145']
total_non = ['786,302', '778,251', '793,502', '789,686', '785,034', '703,950']
var xVal = ['Total Generation Capacity','Variable generation (mainly wind and solar)', 'Conventional generation (incl. hydro)']
var yVal = [-3, 16, -19]
var yValA = [-4, 17, -20]
trace1 = {
name:"<b>Total Generation</b>",
x: years,
y: total,
type:"scatter",
line:{
width:4
},
marker:{
size:12
}
}
trace2 = {
name:"<b>Variable Generation</b>",
x: years,
y: total_res,
type:"scatter",
line:{
width:4
},
marker:{
size:12
}
}
trace3 = {
name:"<b>Conventional generation (incl. hydro)</b>",
x: years,
y: total_non,
type:"scatter",
line:{
width:4
},
marker:{
size:12
}
}
/*for( var i = 0 ; i < xVal.length ; i++ ){
var result = {
x: xVal[i],
y: yValA[i],
text: '<b>'+yVal[i]+' GW</b>',
xanchor: 'center',
yanchor: ['bottom'],
showarrow: false,
font: {
size: 15,
color: '#444'
},
};
annotationContent.push(result);
}*/
/*trace1 = {
x: ['Net Generating Capacity'],
y: [-3, 16, -19],
name: 'Net Generating Capacity',
type: 'bar',
marker: {
color: 'rgb(31, 119, 180)'
}
}
trace2 = {
x: ['Renewable Energy Sources (other than hydro)'],
y: [16],
name: 'Renewable Energy Sources (other than hydro)',
type: 'bar',
marker: {
color: 'rgb(44, 160, 44)'
}
}
trace3 = {
x: ['Non-Renewable Energy Sources incl. hydro'],
name: 'Non-Renewable Energy Sources incl. hydro',
y: [-3, 16, -19],
type: 'bar',
marker: {
color: 'rgb(255, 127, 14)'
}
}*/
var data = [trace1,trace3,trace2];
Plotly.newPlot('newDiv', data, layout);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment