|
<< Click to Display Table of Contents >> Google Chart API (JS) |
  
|
|
<< Click to Display Table of Contents >> Google Chart API (JS) |
|
Página
Fonte
<html>
<head>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Mes');
data.addColumn('number', 'Daniel');
data.addColumn('number', 'Fábio');
data.addColumn('number', 'Hallan');
data.addColumn('number', 'Josué');
data.addColumn('number', 'Junior');
data.addColumn('number', 'Murilo');
data.addColumn('number', 'Alex');
data.addColumn('number', 'Oliveira');
data.addRows([
['set-11', 1170, 460, 400, 1, 200, 150, 204, 600],
['out-11', 660, 1120, 200, 2, 300, 500, 210, 30],
['nov-11', 1, 200, 150, 204, 600, 140, 20, 0],
['dez-11', 1030, 540, 450, 3, 600, 140, 20, 0],
['jan-12', 130, 600, 140, 20, 0, 540, 450, 3],
['fev-12', 10, 540, 140, 20, 0, 450, 3, 600]
]);
var options = {
width: 1100, height: 400,
chartArea: {left: 10, top: 40, width: 840, height: 400 },
title: 'Gráfico de Tarefas',
fontName:'Arial', fontSize:15,
tooltip: {textStyle:{color: 'black', fontName: 'Arial', fontSize: '15'}},
titleTextStyle: {color: 'gray', fontName: 'Arial', fontSize: 20},
series: [{color: 'blue'},{color: 'red'}, {color:'maroon'}, {color: 'black'}, {color: 'green'}, {color: 'gray'}, {color: 'purple'}, {color: 'chocolate'}],
hAxis: {title: 'mês-ano', titleTextStyle: {color: 'purple', fontName: 'Arial', fontSize: 15}}
};
var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));
chart.draw(data, options);
}
</script>
</head>
<body>
<p>Paragrafo</p>
<div id="chart_div"></div>
</body>
</html>