Treemap Diagram in Java Swing
Learn how to build a TreeMap diagram using the MindFusioni diagramming library for Java.
Join the DZone community and get the full member experience.Join For Free
In this tutorial, we will build a TreeMap diagram using the MindFusion diagramming library for Java and using IntelliJ as the development IDE.
I. General Setup With Gradle and Maven
We create a new Gradle project, which we name TreemapDiagram. We create a new package called com.mindfusion.tutorial. Then we open File->'Project Structure' menu from the IntelliJ toolbar and click on the 'Libraries' item in the menu tree. Then we click the plus sign '+' and from the project sub menu select 'Maven'. In the dialog that opens, we type 'mindfusion' in the search box. You should see there the available MindFusion Java repositories on Maven. We select the diagram.
After that, go to the Modules tab, choose your project name, and add once again the library using the '+' sign. From the drop-down menu list, choose "Library" on the type of module to add. Then, select the newly added from Maven library and click 'Apply'. With this, the new library is added to the class path of the project and IntelliJ can recognize it. Click 'OK' and close the window.
We add a new package by right-clicking on the main subfolder in the src folder. Then in the package, again with a right-click, we add a new class called MainWidow. MainWindow extends JFrame and will be the main and only class in our application. We add to it the main method and there we create the MainWindow and render it on screen.
In the constructor, we add the standard code when creating a new MainWindow:
We set the default close operation, the window size, and the title. We also declare a class variable called diagram of type Diagram. We initialize the diagram to a new instance of the Diagram class in the constructor. We also specify some settings on the newly created diagram:
We specify the default shape for our diagram: a rectangle. We also set the back brush to be white, set the measure unit as millimeter, and specify the initial bounds of the diagram.
We then add a DiagramView instance, which is the control that renders the diagram. The diagram object does not render itself directly. DiagramView is one of the ways to render a diagram in the 2D space. We place the diagramView in a JScrollPane, which will allow larger diagrams to be scrolled in smaller windows. Finally, we add the JScrollPane to the contentPane of the JFrame:
Now, we will add an XML file to the project, right where the MainWindow.java file is located. The XML file contains the data for our diagram. This is statistics data for a courier company. The treemap diagram that we are building will render the coverage of the courier company in the state of California:
We parse our XML file with the help of the DocumentBuilderFactory and DocumentBuilder classes from the javax.xml.parsers namespace. We also use the Document class from org.w3c.dom and File from java.io.
We place the code in a new method called assignData:
Then we need to get the DocumentElement from the parsed file and then get the list with nodes that are defined as <state>:
The stateNodes variable is defined as class variable again. It is of type NodeList. We get the first element in the NodeList with tag 'cities' - it is the only element. Then, in another NodeList we get all elements with the tag 'city'. After we do this, we create a ContainerNode and set its caption:
We cycle through all Element-s in the second list with employees and cities:
We use the Factory class of the Diagram library. It is a helper class that creates various types of DiagramItem-s. You don't create a Factory object, you get one with the getFactory method of Diagram. With the method createShapeNode of the FactoryClass we create all ShapeNode-s that represent the XML data for a city. We add them to the container node.
Here we need to note that the setTag method is used to add to each ShapeNode the Element with its data. We keep it for further reference - when we construct the layout. The Tag property of DiagramItem is used exactly for cases like this one: when you want to store data that is relevant to the object.
III. Diagram Layout and Coloring
In order the TreemapLayout to work, we need to assign weights to the ShapeNode-s. The weights are used by several layout algorithms, treemap is one of them. Weights can be assigned to links as well.
We get the value of the coverage attribute from the XML Element that corresponds to this ShapeNode and multiply it by 1000. This makes the value suitable for the layout algorithm. Then we use setWeight to assign the calculated weight to the node.
We declare now an array with the colours that we will use for the map:
We defined the array as a class variable and initialize the colours in the constructor:
The colours in the array could be more or less than 3. The more you have, the more accurate the color mapping will be. Then we write another method, called assignColors. In it we will set for its node the correct brush shade, according to its weight.
We calculate the biggest coverage and calculate the shades of the nodes according to their ratio to the biggest number:
The last method that we need to implement is the layout of the diagram. This is the method where we create an instance of the TreemapLayout algorithm and apply it on the diagram:
All layout algorithms are applied the same way: you create an instance of the layout class, customize the layout through its properties, then call its arrange method with the diagram, on which the algorithm should be applied.
We need to call the methods we've created in the MainWindow constructor:
And our TreeMap application is ready.
You can download the source code as a Gradle Project from https://mindfusion.eu/samples/java/diagram/TreemapDiagram.zip
Find out more abut diagramming for Java Swing at https://mindfusion.eu/java-diagram.html
Opinions expressed by DZone contributors are their own.