You are on page 1of 2

<html>

<head>
<title>Mi primer ejemplo en Google Charts</title>
</head>

<script type="text/javascript" src="js/loader.js"></script>


<script>
google.charts.load("current", {packages:['corechart']});
google.charts.setOnLoadCallback(dibujarGrafico);

function dibujarGrafico() {
// Tabla de datos: valores y etiquetas de la gráfica
var data = google.visualization.arrayToDataTable([
['Texto', 'Valor numérico'],
['Texto1', 20.21],
['Texto2', 4.28],
['Texto3', 17.26],
['Texto4', 10.25]
]);
var options = {
title: 'Nuestro primer ejemplo con Google Charts'
}
// Dibujar el gráfico
new google.visualization.ColumnChart(
//ColumnChart sería el tipo de gráfico a dibujar
document.getElementById('Grafico')
).draw(data, options);
}
</script>
<body>
<div id="Grafico" style="width: 800px; height: 600px">
</div>
</body>
</html>
<html>
<head>
<script type="text/javascript" src="js/loader.js"></script>
<script type="text/javascript">
google.charts.load('visualization', '1.0', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Region');
data.addColumn('number', 'Neveras');
data.addColumn('number', 'Estufas');
data.addColumn('number', 'Microondas');
data.addColumn('number', 'Cafeteras');
data.addColumn('number', 'Meta de Ventas');
data.addRows([
['Norte', 4, 6, 1, 1, 4],
['Noroeste', 8, 7, 5, 2, 5],
['Sur', 5, 7, 5, 4, 5],
['Sureste', 8, 6, 7, 6, 7],
['Centro-Oeste', 6, 7, 3, 4, 4]
]);
var options = {
'legend':'right',
'title':'Ventas por año',
'is3D':true,
'width':700,
'height':400,
seriesType: "bars",
series: {4: {type: "line"}}
}
var chart = new google.visualization.ComboChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<div id="chart_div" style="width:100%; height:300" align="center"></div>
</body>
</html>

You might also like