Drawing a simple line graph in Java

Question

In my program I want to draw a simple score line graph  I have a text file and on each line is an integer score  which I read in and want to pass as argument to my graph class  I m having some trouble implementing the graph class and all the examples I ve seen have their methods in the same class as their main  which I won t have   I want to be able to pass my array to the object and generate a graph  but when calling my paint method it is asking me for a Graphics g    This is what I have so far   public class Graph extends JPanel        public void paintGraph  Graphics g            ArrayList lt Integer gt  scores   new ArrayList lt Integer gt  10            Random r   new Random             for  int i   scores               i   r nextInt 20               System out println r                      int y1          int y2           for  int i   0  i  lt  scores size    i                 y1   scores get i               y2   scores get i 1               g drawLine i  y1  i 1  y2                       For now I have inserted a simple random number generator to fill up my array   I have an existing frame and basically want to instantiate the Graph class and mount the panel onto my frame  I m really sorry that this question seems so jumbled by the way  but I ve had little sleep     The code in my main statement is   testFrame   new JFrame    testFrame setDefaultCloseOperation JFrame EXIT ON CLOSE   Graph graph   new Graph    testFrame add graph     I m not sure exactly what an SSCE is but this is my attempt at one   public class Test        JFrame testFrame      public Test             testFrame   new JFrame            testFrame setDefaultCloseOperation JFrame EXIT ON CLOSE           Graph graph   new Graph            testFrame add graph           testFrame setBounds 100  100  764  470           testFrame setVisible true           Graph java  public class Graph extends JPanel       public Graph            setSize 500  500               Override     public void paintComponent Graphics g            Graphics2D gr    Graphics2D  g     This is if you want to use Graphics2D            Now do the drawing here         ArrayList lt Integer gt  scores   new ArrayList lt Integer gt  10            Random r   new Random             for  int i   scores                i   r nextInt 20               System out println r                      int y1          int y2           for  int i   0  i  lt  scores size   - 1  i                  y1    scores get i     10              y2    scores get i   1     10              gr drawLine i   10  y1   i   1    10  y2

User · Answer

There exist many open source projects that handle all the drawing of line charts for you with a couple of lines of code. Here's how you can draw a line chart from data in a couple text (CSV) file with the XChart library. Disclaimer: I'm the lead developer of the project.

In this example, two text files exist in ./CSV/CSVChartRows/. Notice that each row in the files represents a data point to be plotted and that each file represents a different series. series1 contains x, y, and error bar data, whereas series2 contains just x and y, data.

series1.csv

1,12,1.4
2,34,1.12
3,56,1.21
4,47,1.5

series2.csv

1,56
2,34
3,12
4,26

Source Code

public class CSVChartRows {

  public static void main(String[] args) throws Exception {

    // import chart from a folder containing CSV files
    XYChart chart = CSVImporter.getChartFromCSVDir("./CSV/CSVChartRows/", DataOrientation.Rows, 600, 400);

    // Show it
    new SwingWrapper(chart).displayChart();
  }
}

Resulting Plot

User · Answer

Just complementing Hovercraft Full Of Eels s solution   I reworked his code  tweaked it a bit  adding a grid  axis labels and now the Y-axis goes from the minimum value present up to the maximum value  I planned on adding a couple of getters setters but I didn t need them  you can add them if you want   Here is the Gist link  I ll also paste the code below  GraphPanel on Gist  import java awt BasicStroke  import java awt Color  import java awt Dimension  import java awt FontMetrics  import java awt Graphics  import java awt Graphics2D  import java awt Point  import java awt RenderingHints  import java awt Stroke  import java util ArrayList  import java util List  import java util Random  import javax swing JFrame  import javax swing JPanel  import javax swing SwingUtilities   public class GraphPanel extends JPanel        private int width   800      private int heigth   400      private int padding   25      private int labelPadding   25      private Color lineColor   new Color 44  102  230  180       private Color pointColor   new Color 100  100  100  180       private Color gridColor   new Color 200  200  200  200       private static final Stroke GRAPH STROKE   new BasicStroke 2f       private int pointWidth   4      private int numberYDivisions   10      private List lt Double gt  scores       public GraphPanel List lt Double gt  scores            this scores   scores              Override     protected void paintComponent Graphics g            super paintComponent g           Graphics2D g2    Graphics2D  g          g2 setRenderingHint RenderingHints KEY ANTIALIASING  RenderingHints VALUE ANTIALIAS ON            double xScale     double  getWidth   -  2   padding  - labelPadding     scores size   - 1           double yScale     double  getHeight   - 2   padding - labelPadding     getMaxScore   - getMinScore              List lt Point gt  graphPoints   new ArrayList lt  gt             for  int i   0  i  lt  scores size    i                  int x1    int   i   xScale   padding   labelPadding               int y1    int    getMaxScore   - scores get i     yScale   padding               graphPoints add new Point x1  y1                          draw white background         g2 setColor Color WHITE           g2 fillRect padding   labelPadding  padding  getWidth   -  2   padding  - labelPadding  getHeight   - 2   padding - labelPadding           g2 setColor Color BLACK               create hatch marks and grid lines for y axis          for  int i   0  i  lt  numberYDivisions   1  i                  int x0   padding   labelPadding              int x1   pointWidth   padding   labelPadding              int y0   getHeight   -   i    getHeight   - padding   2 - labelPadding     numberYDivisions   padding   labelPadding               int y1   y0              if  scores size    gt  0                    g2 setColor gridColor                   g2 drawLine padding   labelPadding   1   pointWidth  y0  getWidth   - padding  y1                   g2 setColor Color BLACK                   String yLabel     int    getMinScore      getMaxScore   - getMinScore        i   1 0    numberYDivisions     100     100 0                       FontMetrics metrics   g2 getFontMetrics                    int labelWidth   metrics stringWidth yLabel                   g2 drawString yLabel  x0 - labelWidth - 5  y0    metrics getHeight     2  - 3                             g2 drawLine x0  y0  x1  y1                         and for x axis         for  int i   0  i  lt  scores size    i                  if  scores size    gt  1                    int x0   i    getWidth   - padding   2 - labelPadding     scores size   - 1    padding   labelPadding                  int x1   x0                  int y0   getHeight   - padding - labelPadding                  int y1   y0 - pointWidth                  if   i     int    scores size     20 0     1      0                        g2 setColor gridColor                       g2 drawLine x0  getHeight   - padding - labelPadding - 1 - pointWidth  x1  padding                       g2 setColor Color BLACK                       String xLabel   i                           FontMetrics metrics   g2 getFontMetrics                        int labelWidth   metrics stringWidth xLabel                       g2 drawString xLabel  x0 - labelWidth   2  y0   metrics getHeight     3                                     g2 drawLine x0  y0  x1  y1                                       create x and y axes          g2 drawLine padding   labelPadding  getHeight   - padding - labelPadding  padding   labelPadding  padding           g2 drawLine padding   labelPadding  getHeight   - padding - labelPadding  getWidth   - padding  getHeight   - padding - labelPadding            Stroke oldStroke   g2 getStroke            g2 setColor lineColor           g2 setStroke GRAPH STROKE           for  int i   0  i  lt  graphPoints size   - 1  i                  int x1   graphPoints get i  x              int y1   graphPoints get i  y              int x2   graphPoints get i   1  x              int y2   graphPoints get i   1  y              g2 drawLine x1  y1  x2  y2                      g2 setStroke oldStroke           g2 setColor pointColor           for  int i   0  i  lt  graphPoints size    i                  int x   graphPoints get i  x - pointWidth   2              int y   graphPoints get i  y - pointWidth   2              int ovalW   pointWidth              int ovalH   pointWidth              g2 fillOval x  y  ovalW  ovalH                           Override       public Dimension getPreferredSize               return new Dimension width  heigth               private double getMinScore             double minScore   Double MAX VALUE          for  Double score   scores                minScore   Math min minScore  score                     return minScore             private double getMaxScore             double maxScore   Double MIN VALUE          for  Double score   scores                maxScore   Math max maxScore  score                     return maxScore             public void setScores List lt Double gt  scores            this scores   scores          invalidate            this repaint               public List lt Double gt  getScores             return scores             private static void createAndShowGui             List lt Double gt  scores   new ArrayList lt  gt             Random random   new Random            int maxDataPoints   40          int maxScore   10          for  int i   0  i  lt  maxDataPoints  i                  scores add  double  random nextDouble     maxScore                 scores add  double  i                     GraphPanel mainPanel   new GraphPanel scores           mainPanel setPreferredSize new Dimension 800  600            JFrame frame   new JFrame  DrawGraph            frame setDefaultCloseOperation JFrame EXIT ON CLOSE           frame getContentPane   add mainPanel           frame pack            frame setLocationRelativeTo null           frame setVisible true              public static void main String   args          SwingUtilities invokeLater new Runnable              public void run                 createAndShowGui                                  It looks like this

User · Answer

Hovercraft Full Of Eels  answer is very good  but i had to change it a bit in order to get it working on my program   int y1    int    this height - 2   BORDER GAP  -  values get i    yScale - BORDER GAP      instead of  int y1    int   scores get i    yScale   BORDER GAP     because if i used his way the graphic would be upside down   you d see it if you used hardcoded values  e g 1 3 5 7 9  instead of random values

User · Answer

Problems with your code and suggestions    Again you need to change the preferredSize of the component  here the Graph JPanel   not the size Don t set the JFrame s bounds  Call pack   on your JFrame after adding components to it and before calling setVisible true  Your foreach loop won t work since the size of your ArrayList is 0  test it to see that this is correct   Instead use a for loop going from 0 to 10  You should not have program logic inside of your paintComponent      method but only painting code  So I would make the ArrayList a class variable and fill it inside of the class s constructor    For example   import java awt BasicStroke  import java awt Color  import java awt Dimension  import java awt Graphics  import java awt Graphics2D  import java awt Point  import java awt RenderingHints  import java awt Stroke  import java util ArrayList  import java util List  import java util Random  import javax swing      SuppressWarnings  serial   public class DrawGraph extends JPanel      private static final int MAX SCORE   20     private static final int PREF W   800     private static final int PREF H   650     private static final int BORDER GAP   30     private static final Color GRAPH COLOR   Color green     private static final Color GRAPH POINT COLOR   new Color 150  50  50  180      private static final Stroke GRAPH STROKE   new BasicStroke 3f      private static final int GRAPH POINT WIDTH   12     private static final int Y HATCH CNT   10     private List lt Integer gt  scores      public DrawGraph List lt Integer gt  scores          this scores   scores            Override    protected void paintComponent Graphics g          super paintComponent g         Graphics2D g2    Graphics2D g        g2 setRenderingHint RenderingHints KEY ANTIALIASING  RenderingHints VALUE ANTIALIAS ON          double xScale     double  getWidth   - 2   BORDER GAP     scores size   - 1         double yScale     double  getHeight   - 2   BORDER GAP     MAX SCORE - 1          List lt Point gt  graphPoints   new ArrayList lt Point gt           for  int i   0  i  lt  scores size    i               int x1    int   i   xScale   BORDER GAP            int y1    int    MAX SCORE - scores get i     yScale   BORDER GAP            graphPoints add new Point x1  y1                      create x and y axes        g2 drawLine BORDER GAP  getHeight   - BORDER GAP  BORDER GAP  BORDER GAP         g2 drawLine BORDER GAP  getHeight   - BORDER GAP  getWidth   - BORDER GAP  getHeight   - BORDER GAP             create hatch marks for y axis         for  int i   0  i  lt  Y HATCH CNT  i               int x0   BORDER GAP           int x1   GRAPH POINT WIDTH   BORDER GAP           int y0   getHeight   -    i   1     getHeight   - BORDER GAP   2     Y HATCH CNT   BORDER GAP            int y1   y0           g2 drawLine x0  y0  x1  y1                     and for x axis       for  int i   0  i  lt  scores size   - 1  i               int x0    i   1     getWidth   - BORDER GAP   2     scores size   - 1    BORDER GAP           int x1   x0           int y0   getHeight   - BORDER GAP           int y1   y0 - GRAPH POINT WIDTH           g2 drawLine x0  y0  x1  y1                  Stroke oldStroke   g2 getStroke          g2 setColor GRAPH COLOR         g2 setStroke GRAPH STROKE         for  int i   0  i  lt  graphPoints size   - 1  i               int x1   graphPoints get i  x           int y1   graphPoints get i  y           int x2   graphPoints get i   1  x           int y2   graphPoints get i   1  y           g2 drawLine x1  y1  x2  y2                           g2 setStroke oldStroke               g2 setColor GRAPH POINT COLOR         for  int i   0  i  lt  graphPoints size    i               int x   graphPoints get i  x - GRAPH POINT WIDTH   2           int y   graphPoints get i  y - GRAPH POINT WIDTH   2            int ovalW   GRAPH POINT WIDTH           int ovalH   GRAPH POINT WIDTH           g2 fillOval x  y  ovalW  ovalH                     Override    public Dimension getPreferredSize           return new Dimension PREF W  PREF H            private static void createAndShowGui           List lt Integer gt  scores   new ArrayList lt Integer gt           Random random   new Random          int maxDataPoints   16        int maxScore   20        for  int i   0  i  lt  maxDataPoints   i               scores add random nextInt maxScore                  DrawGraph mainPanel   new DrawGraph scores          JFrame frame   new JFrame  DrawGraph          frame setDefaultCloseOperation JFrame EXIT ON CLOSE         frame getContentPane   add mainPanel         frame pack          frame setLocationByPlatform true         frame setVisible true            public static void main String   args          SwingUtilities invokeLater new Runnable              public void run                 createAndShowGui                                  Which will create a graph that looks like so

User · Answer

Or simply use the JFreechart library - http   www jfree org jfreechart

User · Answer

Override the paintComponent method of your panel so you can custom draw  Like this    Override public void paintComponent Graphics g        Graphics2D gr    Graphics2D  g    this is if you want to use Graphics2D       now do the drawing here

[java] Drawing a simple line graph in Java

series1.csv

series2.csv

Source Code

Resulting Plot

Examples related to java

Examples related to swing

Examples related to graphics2d

Examples related to linegraph