Tutorial: How to Create a Pie Chart I

by
Ronald S. Holland
Total Application Works
RonHolland@sumtotalz.com






[

HOME] Consulting Design Maintenance Project Testing Training Turnkey Java C++ SQL HTML JavaScript ]

© 2002 - 2012 All Rights Reserved Total Application Works




  • Tell a friend about this site (copy and paste the following HTML page that links to this tutorial.)
  • <html>
    <title>Example of a link </title>
    <body>
    <table border>
    <a href="http://sumtotalz.com/TotalAppsWorks/PieChart/Pie_Chart.htm"> Tutorial: Pie Chart I </a>
    </table>
    </body>
    </html>
    Source
    Screenshot
  • On-site classes can be arranged in Java and C++. Send all inquiries to:
    RonHolland@sumtotalz.com
  1. Java Table of contents
  2. 2nd Java Cup
  3. Pie Chart I
  4. Pie/Bar Chart IB
  5. Pie/Bar Chart II
  6. Pie/Bar Chart III
  7. A Basic Calculator
  8. Linked Lists
  9. Linked List II
  10. Linked List III
  11. Linked List IV
  12. Hardware Store I
  13. Hardware Store II
  14. Hardware Store III
  15. Client/Server
  16. Client/Server II
  17. Client/Server III
  18. Client/Server IV
  19. Multithreaded Client/Server
  20. Multithreaded Client/Server II
  21. Multithreaded Client/Server III
  22. Basic Calculator II
  23. Basic Calculator III
  • Introduction
  • Requirements
  • Application Template
  • Graphics API
  • Final Product

    Introduction

    In this tutorial, we will explore the steps required to create a simple pie chart. There are two ways that we could approach this project. One way would be to create an application; the other way is to create an applet. Since this is a simple pie chart, there will not be a lot of "bells and whistles", and we will wait to read the requirements section to find out how we should approach this project.

    Requirements

    The requirements for this project are to:

    1. Create an application.
    2. This application should be a subclass of JFrame.
    3. Display a pie chart using this application.
      • The input values for the pie chart should be hard coded for this project.
    4. Use the Graphics API.
    5. Use the Font class for rendering the text.
    6. Create an application template to outline your approach.

    Application Template

    An application has a main method. If you need more explanation, please refer to

    1. Example of a link Second Cup of Java
      
    
    public class PieChart extends JFrame {
       
    
       public PieChart ()  {
          super( "Hardware Store Sales: August" );      
       }
    
       public void paint( Graphics g )   {
    
          
       }
    
       public static void main( String args[] )
       {
          instantiate PieChart instance
    
          listen for window closing and exit
       }
    }
    
      
    Figure 1: Application Template

    Graphics API

    We will be using aspects of the Graphics API, but not the entire API. The Graphics API is the fundamental class for rendering 2-dimensional shapes, text and images on the Java(tm) platform.

    • The primary Graphics method that we will use is fillArc. The fillArc method creates a pie-slice effect.

         
      
      public abstract void  
          /**  **************************************************
          * (x, y) 
          * 1- the x coordinate of the upper-left corner of 
          *    the arc to be filled.
          * 2- the y coordinate of the upper-left corner of the 
          *    arc to be filled.
          * 3- width - the width of the arc to be filled.
          * 4- height - the height of the arc to be filled
          * 5- startAngle - the beginning angle.
          * 6- arcAngle - the angular extent of the arc, relative 
          *    to the start angle.
          * 
          *******************************************************/
         fillArc(int x,           
                 int y,           
                 int width,       // the width of the arc 
                 int height,      // distance from origin to arc 
                 int startAngle,  // The arc is drawn from 
                 int arcAngle)    // startAngle to startAngle + 
                                  //     arcAngle.
      
         A positive arcAngle means the arc will extend 
           counterclockwise, otherwise, the arc will 
           extend clockwise from the startAngle 
        
      fillArc Image
      Figure 2: fillArc Method
      The pie chart will fill the entire 360° circle. In general, we will use the end of one angle sweep as the start of the next angle. For example, if the first pie-slice starts at zero and ends at 36°, then the next slice will start at 36°.
    • The color for a slice will be set with the following method.

        
      public abstract void setColor(Color c)
        

      Figure 3: setColor Method


      This method sets this graphics context's current color to the specified color. All subsequent graphics operations using this graphics context use this specified color.
  • We will use the following method to render text.

      
    public abstract void drawString(
          AttributedCharacterIterator iterator,
          int x,
          int y)
      
    Figure 4: drawString Method


    This method draws the text given by the specified iterator, using this graphics context's current color.
    Using the above methods and the Font class, we will create the Pie Chart Application as shown below.

    Final Product

    Simple Pie Chart
      
    /**
     * This file contains the code that creates a simple pie Chart.
     */
     
    import java.awt.*;
    import javax.swing.*;
    import java.awt.event.*;
    
    public class PieChart extends JFrame {
       private Font         font; 
    
       public PieChart ()
       {
          super( "Hardware Store Sales: August" );
    
          setSize( 600, 400 );
          setLocation( 70, 70 ) ;
          show();
       }
    
       public void paint( Graphics g )
       {
    
          font = new Font("Sanserif", Font.BOLD, 14);
          // start at 0 and sweep 360 degrees
    
          g.setColor( Color.black );
    
          g.fillArc( 110, 80, 300, 300, 0, 36 );
          g.drawString("Hand Tool Sales: 10%", 420, 80);
    
          g.setColor( Color.red );
          g.fillArc( 110, 80, 300, 300, 36, 120 );
          g.drawString("Power Tool Sales: 33%", 420, 100);
    
          g.setColor( Color.blue );
          g.fillArc( 110, 80, 300, 300, 156, 80 );
          g.drawString("Lawn Mower Sales: 22%", 420, 120);
    
          g.setColor( Color.green );
          g.fillArc( 110, 80, 300, 300, 236, 80 );
          g.drawString("Bench Tools Sales: 22%", 420, 140);
    
          g.setColor( Color.orange );
          g.fillArc( 110, 80, 300, 300, 316, 44 );
          g.drawString("Tool Accessories Sales: 12%", 420, 160);
    
          g.setColor( Color.black );
          g.drawArc( 110, 80, 300, 300, 0, 360 );
       }
    
       public static void main( String args[] )
       {
          PieChart app = new PieChart ();
    
          app.addWindowListener(
             new WindowAdapter() {
                public void windowClosing( WindowEvent e )
                {
                   System.exit( 0 );
                }
             }
          );
       }
    }
    
      
    Figure 5: Final Product






  • HOME] Consulting Design Maintenance Project Testing Training Turnkey Java C++ SQL HTML JavaScript ]

    © 2002 - 2012 All Rights Reserved Total Application Works