PRCTICA 5.

Grficos de Barra y de Pastel

Objetivo
Desarrollar una aplicacin que dibuje figuras en 2D tales como: lneas,
rectngulos, crculos, arcos y su uso para dibujar grficos de barras, lneas y de
pastel.

Objetivos especficos:

Permitir la especificacin del nmero y tipo de datos a graficar.

Seleccionar el tipo de grfico deseado: de lneas, de barras o de pastel.
Graficar de acuerdo a la seleccin hecha.

Introduccin
Desde hace algunos aos se ha venido incrementando exponencialmente el
nmero de aplicaciones de juegos y video juegos disponibles en las tiendas de
venta de software. Este tipo de aplicaciones no son exclusivas de nios y jvenes,
sino que muchsima gente adulta se ha vuelto consumidor y usuario de ellas. El
hecho de poder accederlas desde prcticamente cualquier dispositivo electrnico
porttil o no, les ha permitido irse infiltrando en nuestras actividades diarias que
prcticamente no hay da en que los usuarios no accedan a este tipo de
aplicaciones y adems lo consideran ya como normal.
Ahora bien, estas aplicaciones muy avanzadas y modernas tuvieron como punto
de origen juegos como el tenis electrnico, en el que dos barras hacan las veces
de raquetas y un crculo el de una pelotita rebotando en la pantalla. Estos son
justamente los elementos que se aprender a graficar y a darles un uso distinto en
la generacin de diferentes tipos de grficos.
Para aquellos que se interesen en desarrollar juegos electrnicos o bien video
juegos, existen muchas aplicaciones que facilitan su creacin. Sin embargo, para
alguien que est en el mundo del desarrollo de aplicaciones computacionales
debe contar al menos con los elementos bsicos del mundo de las grficas para
que, si as lo desea, poder entender los procesos que estn detrs de cualquier
facilidad proporcionada por el software elegido.

Dr. Hernn de la Garza

Prctica 5 - 1

Ahora bien, se reconoce que una tabla llena de datos no permite fcilmente
encontrar tendencias o patrones presentes en dichos datos, mientras que si stos
se presentan de manera grfica, la mente es capaz de extraer informacin
importante de ellos. Es entonces que la prctica aqu desarrollada, permitir
presentar una serie de datos que inicialmente estn en una tabla, en forma grfica,
ya sea de lneas, de barras o de pastel. Lo anterior con el conocimiento del dibujo
de lneas, rectngulos, crculos y arcos.

Correlacin con los temas y subtemas del programa de estudio vigente

En esta prctica se sigue trabajando con el desarrollo de aplicaciones con
interfaces grficas con un alto atractivo visual y que resultan amenas en cuanto a
su uso.
Se contina aplicando el desarrollo de aplicaciones con interfaces grficas por lo
que apoya los temas de la Unidad II. Se hace uso de componentes visuales de
manera que el tema de la unidad III que habla de uso y aplicacin de este tipo de
componentes, se ve fuertemente reforzado. Adems, se incorporan al programa
varias libreras que ya estn desarrolladas y que las provee el software de
desarrollo usado (NetBeans). Este punto tambin forma parte de la unidad III.

Material y equipo necesario

Computadora o laptop
Software: NetBeans 7.2 en adelante

Metodologa
Para el desarrollo de esta prctica se ha considerado conveniente presentar
primero cmo dibujar los elementos bsicos de un grfico, como son el dibujado
de lneas, rectngulos, crculos y arcos. Una vez conocida esta informacin se
pasar a la segunda seccin, donde se llevar a cabo la construccin de los tres
tipos de grficos escogidos, con apoyo de lo visto en la primera seccin.

Parte Uno. Prctica preparatoria de dibujo

Para llegar a dibujar los grficos de lneas, barras y de pastel, se presenta primero
una pequea prctica preparatoria en donde se introducen varios conceptos e
Dr. Hernn de la Garza

Prctica 5 - 2

instrucciones que ponen las bases para comprender de mejor manera, cmo se
dibujan los grficos ya mencionados.
Esta prctica consiste en un JFrame que contiene un JPanel modificado por
nosotros, haciendo que herede de su clase original y sobrescribindole el mtodo
paintComponent(). Este panel ser el rea usada para dibujar. En l se dibujarn
primeramente 10 lneas cuyas posiciones sern generadas aleatoriamente.
Posteriormente se dibujarn otras figuras en lugar de las lneas, pero
aprovechando las instrucciones existentes.
Paso 1. Crear un nuevo proyecto con nombre Practica5_DibujoLRCA, cuidando
desmarcar la casilla de verificacin (checkBox) del Create Main Class (ya no se
dan detalles porque se asume que estos pasos ya no requieren de explicacin).
Paso 2. Aadir un JFrame Form al proyecto con nombre PaintDemo.
Se genera el cdigo siguiente:
public class PaintDemo extends javax.swing.JFrame {

public PaintDemo() {
initComponents();
}
public static void main(String args[]) {
java.awt.EventQueue.invokeLater(new Runnable() {
public void run() {
new PaintDemo().setVisible(true);
}
});
}
// Variables declaration - do not modify
// End of variables declaration
}

Paso 3. Conforme se vaya escribiendo el cdigo correspondiente, el compilador

nos ir indicando ciertas palabras que no reconoce subrayndolas de color rojo.
Para corregir estos errores, hay que llevar el cursor hacia el borde izquierdo donde
aparece un pequeo globo rojo y hacer clic sobre l. Se despliega una pequea
ventana con algunas de las acciones posibles para la correccin. Seleccionar la
opcin import.
Dr. Hernn de la Garza

Prctica 5 - 3

Con esto se aadir la librera correspondiente y el problema se habr

solucionado. Se cuenta con una manera alternativa para hacer esto mismo, aparte
de escribirla nosotros directamente, y que es activar el men contextual,
seleccionar Fix Imports y as tambin se agregan las libreras necesarias. Al final
de esta prctica veremos que se aadieron las siguiente libreras: (no es necesario
teclearlas si siguen las instrucciones arriba descritas).
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Insets;
import java.util.Random;
import javax.swing.BorderFactory;
import javax.swing.JFrame;
import javax.swing.JLabel;
import javax.swing.JPanel;

Paso 4. Crearemos una nueva clase llamndola PaintPanel indicando que herede
de la clase JPanel. Lo anterior produce una copia exacta del JPanel en nuestra
clase PaintPanel, pero con la ventaja que a esta ltima la podemos adecuar a
nuestras necesidades. Se escribir todo el cdigo en un solo paso, pero
intercalaremos comentarios que ayuden a entender qu se est haciendo.
Teclear arriba de la clase PaintDemo pero debajo de los imports lo siguiente:
// Esta clase extiende (hereda) a JPanel. Sobrescribe el mtodo
// paintComponent() de manera que se dibujen lneas aleatorias en l.
class PaintPanel extends JPanel {
Insets ins; // mantiene el valor usado por el marco del componente
Random rand; // se usar para generar nmeros aleatorios
// declaracin del constructor por defecto del panel
public PaintPanel() {
// poner un borde rojo de grosor 5 alrededor del panel
setBorder(BorderFactory.createLineBorder(Color.RED, 5));
rand = new Random(); // se crea una instancia de Random llamada rand
}
// sobrescribimos el mtodo paintComponent()
protected void paintComponent(Graphics g){
Dr. Hernn de la Garza

Prctica 5 - 4

 // se llama al constructor de la clase padre

super.paintComponent(g);
int x,y,x2,y2;
// obtener las dimensiones de alto y ancho del componente
int height = getHeight();
int width = getWidth();
ins = getInsets(); // obtener los insets (mrgenes) del componente.
//Se asigna el color para las lneas
g.setColor(Color.blue);
// dibujar 10 lneas cuyos extremos son generados aleatoriamente
for(int i=0;i< 10;i++){
// obtener los cuatro valores que definen a una lnea (dos puntos)
x = rand.nextInt(width - ins.left); // se resta el espesor del marco
y = rand.nextInt(height - ins.bottom);
x2 = rand.nextInt(width - ins.left);
y2 = rand.nextInt(height - ins.bottom);
// dibujar la lnea
g.drawLine(x, y, x2, y2);
}
}
}

Paso 5. Vamos al cdigo de la clase PaintDemo en donde crearemos una

instancia de la clase PaintPanel y se aade esta instancia al formulario
PaintDemo. Prcticamente todo sucede en el constructor.
public class PaintDemo extends javax.swing.JFrame {
// se declara a pp de tipo PaintPanel como miembro de esta clase
PaintPanel pp;

public PaintDemo() {
initComponents();
setTitle("Paint Demo"); // asigna el ttulo del frame
setSize(300, 200); // define el tamao del frame
Dr. Hernn de la Garza

Prctica 5 - 5

 // especificar que el programa termine cuando la ventana se cierra

setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);
// se crea el panel sobre el cual se pintar
pp = new PaintPanel();
// Se aade el panel pp al panel contenedor (frame). Se requiere que el frame
// tenga definido un Border Layout para que el panel se redimensione
// automticamente para ajustarse a la regin del centro
add(pp);
}
public static void main(String args[]) {
java.awt.EventQueue.invokeLater(new Runnable() {
public void run() {
new PaintDemo().setVisible(true);
}
});
}
}

Paso 6. Ir al diseo del frame (dar clic en botn Design). Sobre el rea del
formulario dar clic en botn derecho del mouse o del trackpad, se abre el men
contextual. Seleccionar la opcin Set Layout y enseguida en la nueva ventana,
escoger Border Layout.

Dr. Hernn de la Garza

Prctica 5 - 6

Al ejecutar el programa se deber ver algo como esto:

Paso 7. Modificamos el mtodo paintComponent de la clase PaintPanel para

hacer que dibuje rectngulos, luego crculos y despus arcos.
protected void paintComponent(Graphics g){
super.paintComponent(g);
int x,y,x2,y2;
int height = getHeight();
int width = getWidth();
ins = getInsets();
g.setColor(Color.blue);
for(int i=0;i< 10;i++){
x = rand.nextInt(width-ins.left);
y = rand.nextInt(height- ins.bottom);
//x2 = rand.nextInt(width-ins.left); // no se require esta dimensin
//y2 = rand.nextInt(height- ins.bottom);
g.fillRect(x, y, 15, 30);
// dibuja rectngulos rellenos de color azul y del
// mismo tamao 15 x 30 pero en posiciones diferentes
}
}

Dr. Hernn de la Garza

Prctica 5 - 7

Habr que hacer los ajustes al cdigo para lograr que los rectngulos queden
completos dentro del rea de dibujo. Observe que se dej un ancho y un alto fijos
para los rectngulos pero la posicin de la esquina superior izquierda es variable
ya que usa los valores aleatorios de x e y generados en cada ciclo del for.
Nota: Si se redimensiona la ventana de salida al estarse ejecutando el programa,
provoca que se generen nuevas posiciones para los rectngulos, ya que al
cambiar de tamao el formulario se llama automticamente a repintarse el
componente completo y por ende genera un llamado al paintComponent() de
nuestra instancia pp y produce un juego completo de nuevos valores de x y de y,
provocando que se ubiquen en otras posiciones.
Paso 7. Pruebe las tres instrucciones siguientes:
g.fillArc(x, y, 20, 20, 0, 360); // valores de radio a y b iguales a 20
g.fillArc(x, y, 20, 30, 0, 360); // dos valores de radio diferentes
g.fillArc(x, y, 20, 20, 45, 90); // 45 es el ngulo de inicio y 135 el ngulo final, 90 es el espesor de
la rebanada.

Parte Dos. Prctica de dibujo de grficos de lneas, de barras y de pastel

A continuacin procederemos a realizar la prctica en donde se dibujarn los
grficos de lneas, de barras y/o de pastel, dependiendo de cul de ellos se
hubiera seleccionado.
Paso 1. Crear una nueva aplicacin llamada Practica5_GraficasLBP, cuidando
desmarcar el cuadro de verificacin del Create Main Class.
Paso 2. Aadir un nuevo JFrame Form con nombre GraficosLBP.

Dr. Hernn de la Garza

Prctica 5 - 8

Paso 3. Ahora ya tenemos nuestro formulario. Se procede a crear por medio de

instrucciones un JTable en el formulario GraficosLBP, con 6 filas y 2 columnas, en
lugar de arrastrar el componente desde la paleta de componentes. Al JTable le
daremos un tamao suficiente para ver todas sus celdas y que permita capturar
los datos que se van a graficar. De cualquier manera estar contenido en un
JScrollPane para contar con barras de desplazamiento para el caso de que sea
necesario. Proceda a teclear el cdigo de creacin del componente JTable dentro
del cdigo de la clase GraficosLBP ya generada al construir el formulario.
import javax.swing.JScrollPane;
import javax.swing.JTable;

public class GraficosLBP extends javax.swing.JFrame {
private JScrollPane jspDatos;
private JTable jtbDatos;

public GraficosLBP() {
initComponents();
setTitle("Grficos");
setSize(500, 300);
setLocationRelativeTo(null); // centra la pantalla en la ventana

// creamos la tabla con 6 filas y 2 columnas
jtbDatos = new JTable(6,2);
jtbDatos.setSize(200, 200);
// creamos el scrollpane con la tabla de una vez
jspDatos = new JScrollPane(jtbDatos);
jspDatos.setSize(200, 200);
add(jspDatos);
}
public static void main(String args[]) {
java.awt.EventQueue.invokeLater(new Runnable() {
public void run() {
new GraficosLBP().setVisible(true);
}
Dr. Hernn de la Garza

Prctica 5 - 9

 });
}
// Variables declaration - do not modify
// End of variables declaration
}

Al ejecutar el cdigo anterior obtenemos la ventana que se muestra enseguida.

Si se escribe la siguiente instruccin justo despus de haber creado el JTable

jtbDatos.setShowGrid(true);

Se obtiene lo siguiente al ejecutar la aplicacin:

Dr. Hernn de la Garza

Prctica 5 - 10

Paso 4. Asumamos que ya tenemos nuestros datos en la tabla. Necesitamos un

rea donde generar las grficas. Para ello aada un JDialog Form a nuestro
proyecto, aplicando los pasos vistos en la prctica 3. Asgnele por nombre
VentanaGraficos. Esta ventana contendr el panel modificado para dibujar los
grficos y ser visualizada cuando en el formulario GraficosLBP, se haga clic en el
botn que pondremos para activarla.
Paso 5. Aadiremos un botn al formulario y le programaremos su evento
actionPerformed para que muestre la nueva ventana VentanaGraficos. Para ello,
arrastre un componente Button de la paleta de componentes sobre el formulario
de nombre GraficosLBP. Cambie el texto del botn por Graficar y asgnele
jbtGraficar como nombre del componente. Enseguida d doble clic sobre el botn
para hacer que aparezca el rea de captura de cdigo para el evento
actionPerformed, el cual est listo para recibir las instrucciones:
private void jbtGraficarActionPerformed(java.awt.event.ActionEvent evt) {
// TODO add your handling code here:
}

Ponemos el cdigo necesario para activar la ventana de grficos

Primero declaramos una nueva instancia de la clase VentanaGraficos con nombre
VG. Escrbala debajo de las declaraciones de Jtable y JScrollPane que tenemos.
private VentanaGraficos VG;
.
private void jbtGraficarActionPerformed(java.awt.event.ActionEvent evt) {
VG = new VentanaGraficos(this, true); // la presentamos modal
VG.setLocation(200, 200);
VG.setVisible(true);
// TODO add your handling code here:
}

Al ejecutar nuestro programa hasta lo que tenemos en este momento, al dar clic
en el botn Graficar se muestra la nueva ventana que ser el rea de dibujo de los
grficos.

Dr. Hernn de la Garza

Prctica 5 - 11

Paso 6. En esta prctica vamos a incorporar la clase PaintPanel que diseamos

en la primera seccin y que como recordar se trata de una clase que hereda
todos los atributos y toda la funcionalidad de la clase JPanel y que luego la
modificamos para cumplir con ciertos requerimientos que se necesitaban. Claro
que deberemos adecuar su mtodo paintComponent() para que nos permita
dibujar nuestros tres tipos de grficos. La instancia de esta clase se aadir a la
ventana VG creada. Eliminamos los elementos de generacin de nmeros
aleatorios y los de dibujar 10 lneas que tiene el primer cdigo e iremos
construyendo nuestra clase PaintPanel para que reciba y grafique los datos. Esto
quiere decir que seguiremos trabajando y enriqueciendo el cdigo.
Copie y pegue el cdigo que ya tiene de la clase PaintPanel y remueva las
instrucciones comentadas en el prrafo anterior:
class PaintPanel extends JPanel{
Insets ins;
public PaintPanel() {
setBorder(BorderFactory.createLineBorder(Color.RED, 1));
}
protected void paintComponent(Graphics g){
super.paintComponent(g);
int height = getHeight();
int width = getWidth();
Dr. Hernn de la Garza

Prctica 5 - 12

 ins = getInsets();
// aqu pondremos el cdigo que permite dibujar los grficos
}

Para hacer que se muestre la ventana de dibujo es necesario trabajar con el

cdigo del evento actionPerformed que le corresponde al botn Graficar. Debemos
crear una instancia de la clase PaintPanel y aadrsela a la ventana VG para que
el panel forme parte de ella y as al mostrar la ventana, se muestre el panel
incluido.
El cdigo de declaracin de variables y atributos es el siguiente:
public class GraficosLBP extends javax.swing.JFrame {
private JScrollPane jspDatos;
private JTable jtbDatos;
private VentanaGraficos VG;
private PaintPanel pp;

El cdigo para el botn ahora queda de la siguiente manera:

private void jbtGraficarActionPerformed(java.awt.event.ActionEvent evt) {
VG = new VentanaGraficos(this, true);
VG.setLocation(200, 200);
VG.setSize(400, 400);
pp = new PaintPanel();
VG.add(pp);
VG.setVisible(true);
// TODO add your handling code here:
}

Dr. Hernn de la Garza

Prctica 5 - 13

Ver el borde rojo en la ventana es prueba de que se aadi con xito nuestro
panel a la segunda ventana. Observe el cdigo y vea que dejamos el grosor de la
lnea con valor de 1.
An se tienen varios puntos que resolver antes de poder graficar. Hay que definir
un mecanismo para escoger cul tipo de grfico se quiere dibujar, adems definir
la forma en que se le harn llegar los datos ya sea al panel o a la ventana para
que tenga elementos para los grficos, y para finalizar tenemos que hacer que se
construyan los tres tipos de grficos. As que queda un rato ms de instrucciones.
Paso 7. Una manera de elegir el tipo de grfico es incorporando al frame
GraficosLBP un conjunto de Botones de Opcin (RadioButtons) dentro de un
grupo de botones Button Group para que acten acoplados.
Primero arrastramos un componente Button Group dentro del frame GraficosLBP.
Luego arrastramos tres Radio Buttons sobre el mismo frame.

Dr. Hernn de la Garza

Prctica 5 - 14

Debe realizar las siguientes tareas:

Poner una etiqueta con texto Tipos de Grficos y darle el nombre

de jlbTitulo.
Cambiar el texto de los tres Radio Button a Lneas, Barras y
Pastel.
Cambiar el nombre de los tres Radio Buttons a jrbLineas, jrbBarras y
jrbPastel.
Seleccionar cada Radio Button y cambiar su propiedad buttonGroup
de none a buttonGroup1.
Cambiar la propiedad selected a true para el primer bton (Lneas) lo
que har que sea el botn seleccionado de inicio.

Paso 8. Incorporamos una variable de tipo entero que identifique el tipo de grfico
seleccionado. Valor de cero es para grfico de Lneas, uno para Barras y dos para
Pastel. El nombre de la variable ser tipoGra.
public class GraficosLBP extends javax.swing.JFrame {
private JScrollPane jspDatos;
private JTable jtbDatos;
private VentanaGraficos VG;
private PaintPanel pp;
Dr. Hernn de la Garza

Prctica 5 - 15

 int tipoGra = 0; // se inicializa con cero dado que Lneas es el grfico por defecto

Paso 9. Debemos controlar que cada vez que se haga clic sobre uno de los
botones de opcin (Radio Buttons), el valor de la variable tipoGra se actualice.
Esto se logra programando el evento actionPerformed de cada botn, ya que al
hacer clic en un botn de opcin, est implcito que se seleccion.
Seleccionaremos el evento deseado por otro camino: haga clic sobre el primer
Radio Button( Lneas) para seleccionarlo; luego pulse botn derecho para abrir
men contextual; seleccione eventos; se despliega una nueva ventana, seleccione
action; luego la nica opcin es actionPerformed. Al escoger se muestra la
estructura de cdigo para programar el evento.

As quedan los tres eventos programados para los Radio Buttons:

private void jrbLineasActionPerformed(java.awt.event.ActionEvent evt) {
tipoGra = 0;
}
private void jrbBarrasActionPerformed(java.awt.event.ActionEvent evt) {
tipoGra = 1;
}
private void jrbPastelActionPerformed(java.awt.event.ActionEvent evt) {
tipoGra = 2;
}
Dr. Hernn de la Garza

Prctica 5 - 16

Paso 10. La manera que usaremos para pasar tanto los datos como el tipo de
grfico escogido, ser por medio de dos nuevas propiedades para nuestra clase
panel PaintPanel. Nosotros le aadiremos esas nuevas propiedades. sto no
podra realizarse sobre el componente original JPanel.
Teclear dentro del cdigo del panel, abajo del mtodo paintComponent(), y
presionar botn derecho para abrir las opciones del men contextual. Seleccionar
Insert Code y en la nueva ventana Add Property. Se despliega la ventana
siguiente:

En la ventana desplegada hacer lo siguiente:

Dar nombre a la propiedad; en Name escribir tipogrfico.

En el igual poner 0.
En Type escribir int.
Hacer clic en private para provocar que se actualice el rea de preview.

Dr. Hernn de la Garza

Prctica 5 - 17

La nueva ventana luce as:

Una vez que se acepta pulsando el botn OK, se aade el cdigo siguiente a
nuestra clase panel PaintPanel:
private int tipoGrafico = 0;
public int getTipoGrafico() {
return tipoGrafico;
}
public void setTipoGrafico(int tipoGrafico) {
this.tipoGrafico = tipoGrafico;
}

Paso 11. Siguiendo los mismos pasos aadimos la propiedad con nombre datos,
hacemos que sea igual a null y el tipo de dato a manejar es JTable. No olvide dar
clic sobre el botn de opcin que dice private para actualizar la ventana preview.
Despus de aceptar se aade el siguiente cdigo:
private JTable datos = null;
public JTable getDatos() {
Dr. Hernn de la Garza

Prctica 5 - 18

 return datos;
}
public void setDatos(JTable datos) {
this.datos = datos;
}

En este momento ya tenemos el mecanismo para hacerle llegar los datos (por
medio de una tabla) y el tipo de grfico que queremos, a nuestro PaintPanel pp.
Paso 12. El momento adecuado para darle los datos a pp es al momento de hacer
clic en el botn graficar, justo despus de haber creado el objeto pp, pero antes de
hacer que se muestre la ventana de dibujo. El cdigo debe modificarse as:
private void jbtGraficarActionPerformed(java.awt.event.ActionEvent evt) {
VG = new VentanaGraficos(this, true);
VG.setLocation(200, 200);
VG.setSize(400, 400);
pp = new PaintPanel();
pp.setDatos(jtbDatos); // asignamos los datos a la propiedad datos
pp.setTipoGrafico(tipoGra); // pasamos el tipo de grfico seleccionado
VG.add(pp);
VG.setVisible(true);
}

Paso 13. Ahora ya estamos listos para graficar. El cdigo para dibujar los grficos
estar en el mtodo paintComponent() de la clase PaintPanel. Definiremos dos
variables locales dentro de ste mtodo y las iniciaremos con los valores
obtenidos de las propiedades que le creamos a esta clase, al usar sus mtodos
get:
JTable datosG = getDatos();
int tipoG = getTipoGrafico();

Se ve as:
protected void paintComponent(Graphics g){
super.paintComponent(g);

JTable datosG = getDatos(); // sacamos los datos para trabajarlos
Dr. Hernn de la Garza

Prctica 5 - 19

 int tipoG = getTipoGrafico(); // obtenemos el tipo de grfico seleccionado

int height = getHeight();
int width = getWidth();
ins = getInsets();
}

Paso 14. Incorporaremos una estructura switch en el mtodo paintComponent()

para que de acuerdo al valor de tipoG realice el dibujo del grfico correspondiente.
Adems empezaremos con el cdigo correspondiente a la opcin uno (grfico de
Barras). Tomaremos como premisa que hay seis datos para graficar y que estn
en la segunda columna de la tabla, es decir en la columna 1, recuerde que se
numeran desde el cero.
Se dibujan los dos ejes cartesianos con color rojo. El eje vertical con tamao de
200 pixeles y el horizontal con 250 pixeles.
switch(tipoG){
// grfico de lneas
case 0: // lo tenemos pendiente
break;

case 1:g.setColor(Color.red);
g.drawLine(50, 50, 50, 250); // eje vertical tamao 200
g.drawLine(50, 250, 300, 250); //eje horizontal tamao 250

Seguimos construyendo el switch. Luego buscamos cul es el dato con el valor

ms alto, para ajustar el tamao de cada barra aplicando reglas de tres. As, el
dato con el valor mayor ser la barra ms alta y ocupar los 200 pixeles. Las
barras de los dems datos estarn en proporcin.
El procedimiento requiere que se extraigan los datos de la tabla y para ello
usamos el mtodo getValueAt(i,j), que devuelve el dato en la fila i, columna j.
Observar que el dato devuelto es de tipo Object y que para poderlo usar como
nmero entero, le hacemos un casting a tipo String y luego lo llevamos a entero
usando Integer.parseInt().

Dr. Hernn de la Garza

Prctica 5 - 20

El espaciamiento entre las barras se defini de 20 pixeles y el espesor de cada

barra se defini de 30. Con estos valores, se puede calcular el lugar en el que se
debe pintar cada barra. Solo hay que considerar mltiplos de estos valores
conforme se vayan pintando las barras. Recuerde que cada barra se dibujar a la
derecha de su antecesora.
El alto de cada barra se obtuvo al considerar que si a la barra ms alta le
corresponden 200 pixeles, se pregunta entonces: cuntos pixeles le
correspondern al valor i?
protected void paintComponent(Graphics g){
JTable datosG = getDatos();
int tipoG = getTipoGrafico();

super.paintComponent(g);
int height = getHeight();
int width = getWidth();
ins = getInsets();

switch(tipoG){
// grfico de lneas
case 0:
break;
// grafico de barras
case 1:g.setColor(Color.red);
g.drawLine(50, 50, 50, 250); // eje vertical tamao 200
g.drawLine(50, 250, 350, 250); // eje horizontal tamao 300

// buscamos al dato con valor mas alto en segunda columna
Object mayor = datosG.getValueAt(0, 1); // inicializamos con el primer dato
Integer may = (Integer.parseInt((String)mayor));

for(int i =0; i<6;i++){

if((Integer.parseInt((String)datos.getValueAt(i, 1)))> may){

may = (Integer.parseInt((String)datos.getValueAt(i, 1)));

} // del if
} // del for
Dr. Hernn de la Garza

Prctica 5 - 21

// se pintan las barras de color azul

g.setColor(Color.blue);
for(int i=0; i<6;i++){
int altoBarra = (int)(200 * (Integer.parseInt((String)datos.getValueAt(i, 1)))/may);
g.fillRect(50 +(20*(i+1)+(30*i)), 250-altoBarra, 30, altoBarra);
}
break;
// grfico de pastel
case 2: // pendiente de desarrollar.
}
}

Dr. Hernn de la Garza

Prctica 5 - 22

HACER:
Pruebe estas instrucciones dentro del case 1 del switch
g.setColor(Color.black);
g.drawString("Grfico de Barras", 50, 25);

despus realice las siguientes actividades:

Poner un ttulo con un tamao de letra mayor

Poner los valores a cada barra justo encima de ellas
Cambiar el color de cada barra para que no sea el mismo
Hacer un recuadro de identificacin donde diga qu artculo es para cada
color.

Paso 15. Dibujar el grfico de lneas ser ms rpido debido a que ya se

comprendi el grfico de barras.
Se pintar un pequeo crculo en cada punto y luego el primer punto se une con
una lnea al segundo y as sucesivamente.
switch(tipoG){
// grfico de lneas
Dr. Hernn de la Garza

Prctica 5 - 23

 case 0:g.setColor(Color.red);
g.drawLine(50, 50, 50, 250); // eje vertical tamao 200
g.drawLine(50, 250, 350, 250); // eje horizontal tamao 300
// buscamos al dato con valor mas alto en segunda columna
Object mayor = datosG.getValueAt(0, 1); // inicializamos con el primer dato
Integer may = (Integer.parseInt((String)mayor));
for(int i =0; i<6;i++){

if((Integer.parseInt((String)datos.getValueAt(i, 1)))> may){
may = (Integer.parseInt((String)datos.getValueAt(i, 1)));
}
}
g.setColor(Color.black);
g.drawString("Grfico de Lneas", 50, 25);
g.setColor(Color.blue);
// pintamos primer dato con un pequeo crculo y definimos como dato anterior
int altoAnt = (int)(200 * (Integer.parseInt((String)(mayor)))/may);
g.fillArc(70, 250-altoAnt, 5, 5, 0, 360);
for(int i=1; i<6;i++){
g.setColor(Color.blue);
int altoBarra = (int)(200 * (Integer.parseInt((String)datos.getValueAt(i, 1)))/may);
g.fillArc(70+ (i*50), 250-altoBarra, 5, 5, 0, 360);
g.setColor(Color.ORANGE);
g.drawLine(70 +(i-1)*50, 250-altoAnt, 70+(i*50), 250- altoBarra);
altoAnt = altoBarra;
}
break;
// grafico de barras
case 1:g.setColor(Color.red);

..

Dr. Hernn de la Garza

Prctica 5 - 24

Datos usados

HACER: Realice las mismas adecuaciones a este grfico que las solicitadas en el
punto anterior.
Punto 16. Se dibujar el grfico de pastel. Para ello es necesario calcular la suma
de todos los valores para tomarlo como el 100 % (pastel completo). Enseguida por
medio de proporciones se calcula el porcentaje que le corresponde a cada valor y
Dr. Hernn de la Garza

Prctica 5 - 25

con este dato se relaciona para obtener los grados de cada rebanada. Recordar
que el pastel completo son 360 grados.
Cdigo para el grfico de pastel opcin del switch: case 2
case 2://definimos los clores para las rebanadas
Color[] arreColores =
{Color.red,Color.orange,Color.magenta,Color.cyan,Color.green,Color.pink};
g.setColor(Color.red);
// Calcular la suma de todos los valores que ser el 100 %
int suma = 0;
for(int i =0; i<6;i++){
suma += (Integer.parseInt((String)datos.getValueAt(i, 1)));
}
// calcular el porcentaje para cada valor y los grados que le tocan
int cx = 100; //coordenada x del centro del pastel
int cy = 100; // coordenada y del centro del pastel
int angIni = 0; // ngulo de inicio primer rebanada
for(int i =0; i<6;i++){
int valorI =(Integer.parseInt((String)datos.getValueAt(i, 1)));
double porcientoI = (valorI * 100.0)/ suma; // porcentaje
double gradosI = porcientoI * 360.0 / 100.0;// ancho rebanada en grados
g.setColor(arreColores[i]); //una forma de cambiar de color
g.fillArc(cx, cy, 100, 100, angIni, (int)Math.round(gradosI));
angIni += gradosI;
}
g.setColor(Color.black);
g.drawString("Grfico de Pastel", 50, 25);
}
}

Dr. Hernn de la Garza

Prctica 5 - 26

Sugerencias Didcticas
La sugerencia en ese caso es que los alumnos realicen la primera prctica
preparatoria y una vez realizada, el instructor les pida un desarrollo y aplicacin
ms a fondo antes de que pasen a la parte dos.
Si bien se ha usado el componente JTable en prcticas anteriores, resultara til el
modificar este componente de manera que se puedan graficar ya sea varias lneas
Dr. Hernn de la Garza

Prctica 5 - 27

o barras simultneamente. Por ejemplo el caso de que se tengan las ventas de

tres artculos durante 6 meses. Esto requerir tres puntos por cada mes o tres
barras por cada mes. Suena interesante el reto para los alumnos. Habr que
adecuar el cdigo, volverlo ms general, para permitir cantidades variables de
elementos, as como de nmero de puntos o datos.
Reporte del alumno (resultados)
El alumno deber realizar las tareas mencionadas en el cuerpo de los dos
procedimientos presentados. Adems mostrar las evidencias suficientes para
demostrar que estas prcticas fueron desarrolladas y asimiladas.
Incluir en su reporte sus conclusiones y recomendaciones.
Desfasar una rebanada de manera que se destaque, es una tarea sencilla (cuando
se conoce), que implica desplazar el centro de la rebanada en la direccin de la
lnea que pasa por la mitad de la rebanada, y luego pintarla usando el valor del
centro nuevo. Intntenlo o seguramente la segunda versin ya lo considerar.
Bibliografa preliminar
1. Java The Complete Reference Eighth Edition
Herbert Schildt
Oracle Press 2011
2. Java 2 Interfaces Grficas y Aplicaciones para Internet
Francisco Javier Ceballos
Alfaomega- RAMA 2. Edicin 2007
3. En la pgina oficial de Java:
docs.oracle.com/javase/tutorial/java/

Dr. Hernn de la Garza

Prctica 5 - 28