Dashboard Home

Create Bar Chart | jfreechart | dashboards

Create Bar Chart | jfreechart | dashboards

A Bar Chart needs a minimum of two columns. The first column is the character based column (it could be a numeric but it forms the Axis column either X or Y). The second column is the numeric value column which represents the bars in the chart

 

NOTE: You can have more than two columns but all of the remaining columns should be numeric

 

select     Format(date,'YYMM') & ' - '& Format(date,'MMM') as         Month , sum(amount) as Expense

from

[qb_data$]

where "Account Type" = 'Expense'

and date between         #12/1/2007# and     #05/23/2008#

group by Format(date,'YYMM') & ' - '& Format(date,'MMM')

order by 1 asc

 

In the above SQL example, there are two output columns, Month and Expense. The SQL is against an Excel Spreadsheet

 

When you first create a bar chart, you get the default look and feel as below

 

You can add gradient and other cosmetic elements by manipulating the javascript.

 

Here are the steps to enable javascript. Edit the chart properties, scroll to the bottom and you will see the following two properties.

Set 'Run Dynamic Java Script=Y' and then click on the "Dynamic Java Code" field

 

 

When you click on the "Dynamic Java Code" the following text editor will pop up

 

//import the necessary classes

import org.jfree.*;

import org.jfree.chart.axis.CategoryAxis;

//import org.jfree.chart.axis.CategoryLabelPositions;

import org.jfree.chart.axis.NumberAxis;

//import org.jfree.chart.labels.CategoryItemLabelGenerator;

//import org.jfree.chart.labels.StandardCategoryItemLabelGenerator;

import org.jfree.chart.plot.CategoryPlot;

import org.jfree.chart.plot.PiePlot3D;

import org.jfree.chart.plot.PlotOrientation;

import org.jfree.chart.renderer.category.BarRenderer;

import org.jfree.chart.renderer.category.BarRenderer3D;

//import org.jfree.chart.renderer.category.CategoryItemRenderer;

//import org.jfree.chart.renderer.category.LineAndShapeRenderer;

import org.jfree.ui.GradientPaintTransformType;

import org.jfree.ui.StandardGradientPaintTransformer;

BarRenderer   barRenderer = (BarRenderer)plot.getRenderer();        

barRenderer.setDrawBarOutline(false);    

          barRenderer.setOutlinePaint(Color.blue);

          barRenderer.setOutlineStroke(new BasicStroke(1.1f, BasicStroke.JOIN_ROUND, BasicStroke.JOIN_BEVEL));

 

/*

Change the following gradient values to set the bar color.

gp0 is the color for the first series

gp1 is the color for the second series and so on. If you have more series in you bar chart then you can add another

row as

GradientPaint gp3 = new GradientPaint(         0.0f, 0.0f, new Color(x,y,z) ,         0.0f, 0.0f, new Color(x1,y1,z1)       );        

    barRenderer.setSeriesePaint(3,gp3);

 

where x,y,z are the RGB values

*/

GradientPaint gp0 = new GradientPaint(         0.0f, 0.0f, new Color(153,102,255),         0.0f, 0.0f,Color.lightGray         );        

GradientPaint gp1 = new GradientPaint(         0.0f, 0.0f, Color.green,         0.0f, 0.0f, Color.lightGray         );        

GradientPaint gp2 = new GradientPaint(         0.0f, 0.0f, Color.red,         0.0f, 0.0f, Color.lightGray         );        

barRenderer.setSeriesPaint(0, gp0);        

barRenderer.setSeriesPaint(1, gp1);        

barRenderer.setSeriesPaint(2, gp2);

barRenderer.setGradientPaintTransformer(   new StandardGradientPaintTransformer(   GradientPaintTransformType.HORIZONTAL));

      float h = displayFrame.getHeight();

      float w = displayFrame.getWidth();

                  // GradientPaint gradientPaint = new GradientPaint(0.0F, 10.0F, Color.WHITE, h, w, Color.green.darker());

                    //plot.setBackgroundPaint(gradientPaint);

/* The following line sets the background color of the chart*/

                    chart.setBackgroundPaint(new GradientPaint(0,0,Color.blue,0,h, Color.cyan));

CategoryAxis domainAxis = plot.getDomainAxis();

domainAxis.setTickLabelPaint(Color.white);

domainAxis.setTickLabelFont(new Font("Arial",Font.BOLD,12));

domainAxis.setLabelPaint(Color.white);

NumberAxis rangeAxis = (NumberAxis) plot.getRangeAxis();

rangeAxis.setTickLabelPaint(Color.WHITE);

rangeAxis.setTickLabelFont(new Font("Arial",Font.BOLD,12));

rangeAxis.setLabelPaint(Color.white);

chart.getTitle().setPaint(Color.white);

//chart.getTitle().setText("Top 5 Tables by Row Count");