Create SVG Chart with JFreeChart - Java Example Program - Batik

Create SVG Chart with JFreeChart - Introduction

I was thinking about a possibility to create a SVG chart with JFreeChart today. There is some support available in org.jfree.chart.JFreeChart class, in the form of a "draw" method. And we know very well that Batik can create SVG documents easily. So, is there a way we can combine JFreeChart with Apache Batik to create a SVG Pie Chart, to start with? The answer is yes, and this tutorial will explain how this can be done. So, the focus of this tutorial would be to create an SVG Chart in Java using JFreeChart / Apache Batik library. We will aim to provide a step by step guide to this, so that it can be understood easily. You would need jfreechart-1.0.14.jar and full Batik library for the examples to work.

Define SVG Pie Chart Data

We begin with defining the data for the SVG Pie Chart using the DefaultPieDataset class available in org.jfree.data.general.DefaultPieDataset. We have discussed this many times in our earlier JFreeChart tutorials, so, we will provide only the code snippet here.

                /* Define the data range for SVG Pie Chart */
                DefaultPieDataset mySvgPieChartData = new DefaultPieDataset();                
                mySvgPieChartData.setValue("JFreeChart", 77);
                mySvgPieChartData.setValue("Batik", 80);
                mySvgPieChartData.setValue("Chart", 55);
                mySvgPieChartData.setValue("Apache", 67);
                mySvgPieChartData.setValue("Java", 80);

Create JFreeChart Pie Chart

Once we have the dataset ready, we can create a JFreeChart object using this and create our chart. We cannot directly transcode the data set to SVG chart. We have to create a chart object first before using Batik to draw the chart as a SVG chart. Creating a JFreeChart pie chart is easy, and the code is provided below:

                /* This method returns a JFreeChart object back to us */                                
                JFreeChart myColoredChart=ChartFactory.createPieChart("JFreeChart - SVG Pie Chart Example",mySvgPieChartData,true,true,false);
                /* Our logical Pie chart is ready at this step. We can now write the chart as SVG using Batik */

Create SVG Chart in Batik

Now we are ready to create a SVG document in Batik. The first step is to get an instance of DOMImplementation class. This is the root for creating SVG document.

                /* Get DOM Implementation */
                DOMImplementation mySVGDOM= GenericDOMImplementation.getDOMImplementation();

Once you get DOM Implementation, you can create a Document with that easily. You have to pass the namespace, type of document information to the createDocument method. You can leave the namespace as null as the example is basic.

                /* create Document object */
                Document document = mySVGDOM.createDocument(null, "svg", null);

Once you have the document object ready, you can create a SVGGraphics2D object using this object, which is a subclass of java.awt.Graphics2D. JFreechart has built in methods to draw a chart as a Graphics2D object. That links JFreeChart to the Batik library.

                /* Create SVG Generator */
                SVGGraphics2D my_svg_generator = new SVGGraphics2D(document);

Render Chart as SVG

The methods available in JFreeChart library to render a chart as a 2D object is shown below:

JFreeChart - Render Chart as Graphics2D object - Supported methods from Api Doc

We can now invoke the draw method and render the chart as SVG Graphics 2D object. This is shown below:

                /* Render chart as SVG 2D Graphics object */
                myPieChart.draw(my_svg_generator, new Rectangle2D.Double(0, 0, 640, 480), null);

Write SVG Chart to File

The last step is to write the SVG chart to a file. SVGGraphics2D class has a method "stream" through which you can write the output to a SVG file.

                /* Write output to file */
                my_svg_generator.stream("output_pie_chart.svg");            

Complete Java Program - SVG Chart with JFreeChart

The complete Java program to create a SVG Pie Chart with JFreeChart is provided below:

import java.io.*;
import org.jfree.data.general.DefaultPieDataset; /* This class is required to define the data for our Pie Chart */
import org.jfree.chart.ChartFactory; /* This class creates the Pie Chart for us */
import org.jfree.chart.JFreeChart;
import org.apache.batik.dom.GenericDOMImplementation;
import org.w3c.dom.DOMImplementation;
import org.w3c.dom.Document;
import java.awt.geom.Rectangle2D;
import org.apache.batik.svggen.SVGGraphics2D;
public class chart2svg {  
     public static void main(String[] args){
        try {
                /* Define the data range for SVG Pie Chart */
                DefaultPieDataset mySvgPieChartData = new DefaultPieDataset();                
                mySvgPieChartData.setValue("JFreeChart", 77);
                mySvgPieChartData.setValue("Batik", 80);
                mySvgPieChartData.setValue("Chart", 55);
                mySvgPieChartData.setValue("Apache", 67);
                mySvgPieChartData.setValue("Java", 80);
                /* This method returns a JFreeChart object back to us */                                
                JFreeChart myPieChart=ChartFactory.createPieChart("JFreeChart - SVG Pie Chart Example",mySvgPieChartData,true,true,false);
                /* Our logical Pie chart is ready at this step. We can now write the chart as SVG using Batik */
                /* Get DOM Implementation */
                DOMImplementation mySVGDOM= GenericDOMImplementation.getDOMImplementation();
                /* create Document object */
                Document document = mySVGDOM.createDocument(null, "svg", null);
                /* Create SVG Generator */
                SVGGraphics2D my_svg_generator = new SVGGraphics2D(document);
                /* Render chart as SVG 2D Graphics object */
                myPieChart.draw(my_svg_generator, new Rectangle2D.Double(0, 0, 640, 480), null);
                /* Write output to file */
                my_svg_generator.stream("output_pie_chart.svg");            
        }
        catch (Exception i)
        {
            System.out.println(i);
        }
    }
}

You will need a number of JAR files to run this program. So, make sure you copy all the JAR files from JFreeChart / Batik to your classpath. The output of this program is shown below, we got the Pie chart as a SVG image :)

JFreeChart - SVG Pie Chart - Java Program - Example Output

You can generate any SVG chart in this method; bar chart, 3D pie chart etc in SVG format. I hope this tutorial would have given you a heads up on how to generate SVG charts with JFreeChart. If you have any questions, you can post it in the comments section of this blog.