{"id":2662,"date":"2021-02-11T10:07:27","date_gmt":"2021-02-11T10:07:27","guid":{"rendered":"https:\/\/mindfusion.eu\/blog\/?p=2662"},"modified":"2021-02-11T10:07:46","modified_gmt":"2021-02-11T10:07:46","slug":"area-chart-in-java-swing","status":"publish","type":"post","link":"https:\/\/mindfusion.dev\/blog\/area-chart-in-java-swing\/","title":{"rendered":"Area Chart in Java Swing"},"content":{"rendered":"

In this blog post we are going to show you how to build this beautiful area chart with two series. We use MindFusion charting library for Java Swing and the AreaChart<\/a> control that is part of it.<\/p>\n

\"Area<\/p>\n

<\/p>\n

I. General Setup<\/strong><\/p>\n

We use IntelliJ Idea as the IDE for developing the chart application. You can use any other IDE, the menus may differ, but the steps are the same.<\/p>\n

First, we create a new project and add a folder called libs to it. There we copy the JPack.jar archive, which contains all MindFusion controls from the Pack for Java Swing<\/a> collection. You don’t have to use the jar archive for the pack, you can use just the jar with the charting control, which you can download from https:\/\/mindfusion.dev\/java-chart.html<\/a>.<\/p>\n

After we copy the archive, we right click on it and select “Add as library” from the context menu. The IDE will add the jar file to the build path of the project. When asked where do you want to have the jar added to, make sure you specify the whole project:<\/p>\n

\"Add<\/p>\n

After that we create a new class, which we call AreaChart and make it extend JFrame. This will be the main and only class of our application. In its main method we add the default Java code for creating and starting a window. Then, we create a new instance of the AreaChart<\/a> class:<\/p>\n

public class AreaChart extends JFrame\n    {\n        public static void main(String[] args) {\n            JFrame f = new JFrame();\n            f.setTitle(\"MindFusion.Charting sample: Area Chart\");\n            f.setSize(800, 600);\n            f.setDefaultCloseOperation(JFrame.EXIT_ON_CLOSE);\n           \n            com.mindfusion.charting.swing.AreaChart chart =\n                    new com.mindfusion.charting.swing.AreaChart();\n\n\t    f.getContentPane().setLayout(new BorderLayout());\n            f.getContentPane().add(chart, BorderLayout.CENTER);\n\n            f.setVisible(true);\n\n}<\/pre>\n
II. Chart Data and Series<\/p>\n
The data for the chart is specified with two instances of the Series2D<\/a> class. This class takes as parameters in the constructor three lists: array with data for the X-coordinates of data points, array with data for the Y-coordinates of data points and a list with the labels. The list with the labels can be null.<\/p>\n
\/\/ create sample data series\nSeries2D series1 = new Series2D(\n      Arrays.asList(0.0, 1.0, 2.0, 3.0, 4.0, 5.0, 6.0, 7.0, 8.0, 9.0, 10.0, 11.0),\n      Arrays.asList(25.0, 35.0, 24.0, 26.0, 27.0, 19.0, 29.0, 19.0, 27.0, 23.0, 17.0, 15.0),\nlabels);<\/pre>\n
The labels list is defined this way:<\/p>\n
List labels = Arrays.asList(\n    \"Jan\", \"Feb\", \"Mar\", \"Apr\", \"May\", \"Jun\",\n    \"Jul\", \"Aug\", \"Sept\", \"Oct\", \"Nov\", \"Dec\"\n);\n\n
We do not want the labels to appear at data points, which is the default way of rendering these labels. Luckily, the Series2D<\/a> class exposes a method called setSupportedLabels<\/a> which allows us to specify where these labels should be applied. The paramter of this method is an instance of the LabelKinds<\/a> enumeration, which exposes members for all type of labels that can be found on a chart. The members allow bitwise combining.\n\nIn our case we want to render the labels at the X-axis. So, we set them in this simple way:\n\n\n\n
series1.setSupportedLabels(LabelKinds.XAxisLabel);<\/pre>\n
We also have to specify a title for our series with the setTitle<\/a> method. The title is rendered as an item for the series in the legend. We will show legend on our chart, so we need to specify the label that corresponds to this series.<\/p>\n
Finally, we must add this Series2D<\/a> to the collection of Series<\/a> for the chart. We use getSeries<\/a> to get the collection and add the newly-created series:<\/p>\n
chart.getSeries().add(series1);<\/pre>\n
The second series differs to the first one only in the Y-data. It also doesn't have labels. We don't need two lists of labels at the X-axis - one is enough.<\/p>\n
With that setting of the data is finished and we can run the appliation to see our chart:<\/p>\n
\"An<\/p>\n
The chart is correct but doesn't look very attractive. We need to style it.<\/p>\n
III. Chart Styling<\/strong><\/p>\n
We fine-tune the appearance of the chart axes with the methods of the Axis<\/a> class. The Axis objects, responsible for the two axes are accessed with the getXAxis<\/a> and getYAxis<\/a> methods. We use the setMaxValue<\/a> and setInterval<\/a> methods to adjust the intervals of both axes. This has effect on the max value as well. We also use setTitle<\/a> to hide the axis title - we specify an empty string.<\/p>\n
chart.getYAxis().setInterval(5.0);\nchart.getYAxis().setMaxValue(50.0);\nchart.getXAxis().setMaxValue(12.0);\nchart.getXAxis().setInterval(1.0);\nchart.getXAxis().setTitle(\"\");\nchart.getYAxis().setTitle(\"\");<\/pre>\n
Then we customize the grid. We want horizontal grid with dashed lines. We use the \"Horizontal\" member of the GridType<\/a> enumeration. It is provided as an argument to the setGridType<\/a> method of chart. We specify the dashed lines with setGridLineStyle<\/a> and use setGridLineColor<\/a> to specify color for the grid lines.<\/p>\n
chart.setGridType(GridType.Horizontal);\nchart.getTheme().setGridLineColor(new Color(190, 190, 190));\nchart.getTheme().setGridLineStyle(DashStyle.Dash);<\/pre>\n
We need to adjust the size of the font for the chart labels as well:<\/p>\n
chart.setShowXCoordinates(false);\nchart.getTheme().setAxisLabelsFontSize(14);\nchart.getTheme().setDataLabelsFontSize(14);<\/pre>\n
The chart has many properties for customizing all types of font used on it. They are members of the Theme<\/a> class. Each chart type has a Theme object in it, it is accessible through getTheme<\/a><\/p>\n
Finally, we need to think about the colors of the area graphics. We will use the setCommonSeriesFills<\/a> method of Theme<\/a> to specify the colors for each Series<\/a>. The commonSeriesFills and strokes properties specify lists with brushes that color the inside and the contour of each series.<\/p>\n
chart.getTheme().setCommonSeriesFills(\n   Arrays.asList(\n          new SolidBrush( new Color (102, 154, 204, 190)),\n          new SolidBrush(new Color (156, 170, 198, 190))));\n\n   chart.getTheme().setCommonSeriesStrokes(\n     Arrays.asList(\n        new SolidBrush( new Color (28, 58, 88))));\n        chart.getTheme().setCommonSeriesStrokeThicknesses(\n        Arrays.asList(5.0));<\/pre>\n
And these are the last customizations on our AreaChart<\/a>. The final chart is ready.<\/p>\n
You can download the full source code of the sample from this link:<\/p>\n
Area Chart in Java Swing: Download Full Source Code<\/a><\/p>\n
For technical support, please use the discussion board for the charting library for Java Swing at https:\/\/mindfusion.dev\/Forum\/YaBB.pl?board=jchart_dic<\/a><\/p>\n
About MindFusion Chart & Gauge Library for Java Swing: This is a native Java Swing library suitable for drawing numerous chart and gauge types. The flexible API allows combination of the various chart parts: axes, plots and series, to create unique charts suitable for the specific needs of any business application: charts with multiple plots, axes at all sides, different chart graphics in one plot and more. All chart series descend from a basic Series interface, which can be implemented by the programmer to create their own Series classes. The appearance is controlled by themes, with aspect of the chart looks being customizable. The gauge library is part of the chart control and offers a set of oval and linear gauge, which can be used to create any type of gauge circular or rectangular gauge with up to three measure scales. The library comes with a set of predefined popular gauges: compass, clock, thermometer and more. Learn further details about MindFusion Charts and Gauges for Java Swing at: https:\/\/mindfusion.dev\/java-chart.html<\/a>.<\/i>
\n<\/string><\/p>\n","protected":false},"excerpt":{"rendered":"
In this blog post we are going to show you how to build this beautiful area chart with two series. We use MindFusion charting library for Java Swing and the AreaChart control that is part of it.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","enabled":false},"version":2}},"categories":[61,535,74],"tags":[625,463,661,660],"class_list":["post-2662","post","type-post","status-publish","format-standard","hentry","category-charting-2","category-java-swing","category-sample-code","tag-data-visualization","tag-java-chart","tag-java-swing-chart-library","tag-java-tutrial"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p3RlKs-GW","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/2662","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/comments?post=2662"}],"version-history":[{"count":2,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/2662\/revisions"}],"predecessor-version":[{"id":2664,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/2662\/revisions\/2664"}],"wp:attachment":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/media?parent=2662"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/categories?post=2662"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/tags?post=2662"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}