Skip to content

Instantly share code, notes, and snippets.

@JosmanPS

JosmanPS/interval.html

Last active August 29, 2015 14:22
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 JosmanPS/d8a8770b3b221f7bb706 to your computer and use it in GitHub Desktop.
Save JosmanPS/d8a8770b3b221f7bb706 to your computer and use it in GitHub Desktop.
Download ZIP
Este es el código que hice para mi función probando fuera del proyecto. Pero no pude integrarla completamente :/
Raw
interval.html
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1.0', {
'packages': [
'corechart',
'table',
'orgchart',
'controls'
],
'language': 'en'
});
google.setOnLoadCallback(Intervalo);
var divid = 'chart_lines';
/* Para los datos el formato es el siguiente
[mes, promedio(mean), mean + sd, mean - sd, mean + sd, mean - sd]
repito esos datos para graficar tanto los puntos como el "manto" */
var datadata2 = [
['\nBase', 2.6, 4.32, 0.88, 4.32, 0.88],
['Enero \n139', 2.6, 4.32, 0.88, 4.32, 0.88],
['Febrero \n139', 2.5, 4.47, 0.53, 4.47, 0.53],
['Marzo \n122', 2.3, 4.03, 0.57, 4.03, 0.57],
['Abril \n129', 2.6, 4.38, 0.82, 4.38, 0.82],
['Mayo \n125', 2.6, 4.31, 0.89, 4.31, 0.89]];
function googleInt2(chart_data, div_id) {
var data = new google.visualization.DataTable();
data.addColumn('string', 'x');
data.addColumn('number', 'values');
data.addColumn({id:'i0', type:'number', role:'interval'});
data.addColumn({id:'i1', type:'number', role:'interval'});
data.addColumn({id:'i2', type:'number', role:'interval'});
data.addColumn({id:'i2', type:'number', role:'interval'});
data.addRows(chart_data)
var options_lines = {
title:'Bar/area interval chart',
curveType:'function',
intervals: { 'color':'series-color' },
interval: {
'i0': { 'color': '#4374E0', 'style':'bars', 'barWidth':0, 'lineWidth':4, 'pointSize':10, 'fillOpacity':1 },
'i1': { 'color': '#E49307', 'style':'bars', 'barWidth':0, 'lineWidth':4, 'pointSize':10, 'fillOpacity':1 },
'i2': { 'style':'area', 'curveType':'function', 'fillOpacity':0.3 }
},
legend: 'none',
};
var chart_lines = new google.visualization.LineChart(document.getElementById(div_id));
chart_lines.draw(data, options_lines);
}
function Intervalo() {
googleInt2(datadata2, divid);
}
</script>
</head>
<body>
<div id="chart_lines" style="width: 900px; height: 500px;"></div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment