Skip to content

Instantly share code, notes, and snippets.

@ivansnek

ivansnek/chart.html

Last active December 22, 2015 17:09
Show Gist options
  • Save ivansnek/6504166 to your computer and use it in GitHub Desktop.
Save ivansnek/6504166 to your computer and use it in GitHub Desktop.
Download ZIP
High Chart test
Raw
chart.html
<html>
<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<title>High Chart</title>
</head>
<body>
<div class="row">
<div class="col-lg-4 col-lg-offset-4"><h1 id="of">Grafica High Charts</h1></div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-4" id="container" style="height: 170px;"></div>
</div>
<div class="row">
<div class="col-lg-4 col-lg-offset-4" id="container2" style="height: 170px;"></div>
</div>
<!-- Latest compiled and minified JavaScript -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="http://code.highcharts.com/highcharts.js"></script>
<script src="http://code.highcharts.com/modules/exporting.js"></script>
<script type="text/javascript" src="js/high-chart.js"></script>
</body>
</html>
Raw
high-chart.js
$(document).ready(function() {
tramites_1=[0,135];
tramites_2=[145,234];
tramites_3=[20,123];
tramites_4=[1,45];
dibujaGrafica('container','Contratos Civiles',true,tramites_1,tramites_2,tramites_3,tramites_4);
// dibujaGrafica('container2','Contratos Por Asignatura');
});
/**
* Dibuja una grafica de barras con el promedio de un determinado tramite, dividiendolo por categoria
* @param {[type]} id_elemento [description]
* @param {[type]} titulos [description]
* @return {[type]} [description]
*/
function dibujaGrafica(id_contenedor,titulo,civil,tramites_1,tramites_2,tramites_3,tramites_4) {
$('#'+id_contenedor).highcharts({
chart: {type: 'column',margin: [35, 10, 40, 40]},
credits:{enabled:false},
title: {text: titulo},
xAxis: {
categories:[civil==true?'Profesional':'Administrativos',civil==true?'Servicios':'Academicos'],
labels: {align: 'center',style: {fontSize: '13px',fontFamily: 'Arial, sans-serif'}}
},
yAxis: {min:0,title:{text:''}},
legend: {enabled: false},
tooltip: {pointFormat: 'Tramites: <b>{point.y:.1f}</b>'},
series: [{
name: 'Por Autorizar',
data: tramites_1,
color: '#EEE',
dataLabels: {
enabled: true,
rotation: 0,
color: '#000000',
align: 'right',
x: 0,
y: 0,
style: {fontSize: '13px',fontFamily: 'Verdana, sans-serif'}
}
}, {
name: 'Aceptados',
data: tramites_2,
dataLabels: {
enabled: true,
rotation: 0,
color: '#000000',
align: 'right',
x: 0,
y: 0,
style: {fontSize: '13px',fontFamily: 'Verdana, sans-serif'}
}
}, {
name: 'Revision',
data: tramites_3,
dataLabels: {
enabled: true,
rotation: 0,
color: '#000000',
align: 'right',
x: 0,
y: 0,
style: {fontSize: '13px',fontFamily: 'Verdana, sans-serif'}
}
}, {
name: 'Rechazados',
data: tramites_4,
dataLabels: {
enabled: true,
rotation: 0,
color: '#000000',
align: 'right',
x: 0,
y: 0,
style: {fontSize: '13px',fontFamily: 'Verdana, sans-serif'}
}
}
]
});
}
@ivansnek
Copy link
Author

Prueba de la libreria JS HighCharts

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment