<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</body>
</html>
// Code goes here
$(function () {
$('#container').highcharts({
title: {
text: 'Gastos mensuales',
x: -20 //center
},
subtitle: {
text: 'Algunos meses hay desfasajes, un mes se paga lo de dos',
x: -20
},
xAxis: {
categories: ['Jul', 'Ago', 'Sept', 'Oct', 'Nov', 'Dic',
'Ene']
},
legend: {
layout: 'vertical',
align: 'right',
verticalAlign: 'middle',
borderWidth: 0
},
series: [{
name: 'Comida',
data: [
3354, 3065, 2769, 2217, 2928, 1263, 3735
]
}, {
name: 'Hogar',
data: [
2111, 125, 800, 855, 0, 200, 23
]
}, {
name: 'Alquiler',
data: [
2039, 1800, 2705, 2947, 2095, 3500, 1230
]
}, {
name: 'Tarjeta credito',
data: [
1382, 0, 1400, 2000, 1210, 2450, 0
]
}, {
name: 'UAI',
data: [
2099, 82, 0, 1077, 1077, 1077, 0
]
}, {
name: 'Taira',
data: [
490, 280, 0, 0, 530, 0, 0
]
}, {
name: 'Cuentas',
data: [
200, 0, 400, 347, 786, 625, 679
]
}, {
name: 'Transporte',
data: [
100, 460, 390, 395, 304, 506, 220
]
}, {
name: 'Huevadas',
data: [
224, 140, 215, 933, 0, 250, 530
]
}]
});
});
/* Styles go here */