{"id":1780,"date":"2017-03-31T11:47:45","date_gmt":"2017-03-31T11:47:45","guid":{"rendered":"http:\/\/mindfusion.eu\/blog\/?p=1780"},"modified":"2021-01-21T14:10:13","modified_gmt":"2021-01-21T14:10:13","slug":"a-poll-chart-a-stacked-bar-chart-in-java-swing-that-represents-results-of-a-survey","status":"publish","type":"post","link":"https:\/\/mindfusion.dev\/blog\/a-poll-chart-a-stacked-bar-chart-in-java-swing-that-represents-results-of-a-survey\/","title":{"rendered":"A Poll Chart: A Stacked Bar Chart in Java Swing that Represents Results of a Survey"},"content":{"rendered":"<p><strong>Part I: Overview of chart elements, the dashboard, plot and axes.<\/strong><\/p>\n<p><a href=\"http:\/\/mindfusion.dev\/blog\/a-poll-chart-a-stacked-bar-chart-in-java-swing-that-represents-results-of-a-survey-ii\/\">Part II : Bar series and their drawing, rendering of custom labels with AnnotationRenderer-s. <\/a><\/p>\n<p>In this blog post we will build a horizontal stacked bar chart in Java. To build the chart we use the Java chart library. We want to add a few custom elements to the chart and that&#8217;s why we will use the <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/chart.java\/index.htm?T_com_mindfusion_charting_swing_Dashboard.htm\">Dashboard<\/a> control that gives us complete control over the chart elements that we use and how to arrange them.<\/p>\n<p><strong>I. Chart Elements<\/strong><\/p>\n<p>We use the following chart elements:<\/p>\n<ul>\n<li>a <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/chart.java\/index.htm?T_com_mindfusion_charting_swing_Dashboard.htm\">Dashboard<\/a> control as the base Component.<\/li>\n<li>a <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/chart.java\/index.htm?T_com_mindfusion_charting_components_TextComponent.htm\">TextComponent<\/a> for the title.<\/li>\n<li>a <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/chart.java\/index.htm?T_com_mindfusion_charting_components_GridPanel.htm\">GridPanel<\/a> for the axes and the plot.<\/li>\n<li>two <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/chart.java\/index.htm?T_com_mindfusion_charting_AxisRenderer.htm\">AxisRenderer<\/a> instances for each axis.<\/li>\n<li>a <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/chart.java\/index.htm?T_com_mindfusion_charting_BarStackRenderer.htm\">BarStackRenderer<\/a> control that draws the bars.<\/li>\n<li>two <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/chart.java\/index.htm?T_com_mindfusion_charting_AnnotationRenderer.htm\">AnnotationRenderer<\/a> instances that draw the custom labels to the left and the top.<\/li>\n<li>a <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/chart.java\/index.htm?T_com_mindfusion_charting_Plot.htm\">Plot<\/a> control that holds the <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/chart.java\/index.htm?T_com_mindfusion_charting_BarRenderer.htm\">BarRenderer<\/a> and the <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/chart.java\/index.htm?T_com_mindfusion_charting_AnnotationRenderer.htm\">AnnotationRenderer<\/a>-s.<\/li>\n<\/ul>\n<p>The image below gives you a visual presentation on how the components used are arranged:<\/p>\n<div id=\"attachment_1783\" style=\"width: 797px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2017\/03\/stacked-bar-chart-java-parts.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1783\" class=\"size-full wp-image-1783\" src=\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2017\/03\/stacked-bar-chart-java-parts.png\" alt=\"The chart elements that build this stacked bar chart\" width=\"787\" height=\"413\" srcset=\"https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2017\/03\/stacked-bar-chart-java-parts.png 787w, https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2017\/03\/stacked-bar-chart-java-parts-300x157.png 300w, https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2017\/03\/stacked-bar-chart-java-parts-768x403.png 768w, https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2017\/03\/stacked-bar-chart-java-parts-500x262.png 500w\" sizes=\"auto, (max-width: 787px) 100vw, 787px\" \/><\/a><p id=\"caption-attachment-1783\" class=\"wp-caption-text\">The chart elements that build this stacked bar chart<\/p><\/div>\n<p>The <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/chart.java\/index.htm?T_com_mindfusion_charting_components_GridPanel.htm\">GridPanel<\/a> has two rows and two columns. On the first row is the <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/chart.java\/index.htm?T_com_mindfusion_charting_XAxisRenderer.htm\">XAxisRenderer<\/a> , that renders the X-axis, on the second row is the <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/chart.java\/index.htm?T_com_mindfusion_charting_YAxisRenderer.htm\">YAxisRenderer<\/a> and the <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/chart.java\/index.htm?T_com_mindfusion_charting_Plot.htm\">Plot<\/a> with the <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/chart.java\/index.htm?T_com_mindfusion_charting_BarStackRenderer.htm\">BarStackRenderer<\/a> .<\/p>\n<p><strong>II. The Dashboard<\/strong><\/p>\n<p>First, we create the <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/chart.java\/index.htm?T_com_mindfusion_charting_swing_Dashboard.htm\">Dashboard<\/a> and add some styling to it with a <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/chart.java\/index.htm?T_com_mindfusion_charting_Theme.htm\">Theme<\/a> . The <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/chart.java\/index.htm?T_com_mindfusion_charting_Theme.htm\">Theme<\/a> class allows us to specify all appearance settings of a chart. We set only those that we want to use: the grid, the font:<\/p>\n<pre>Dashboard board = new Dashboard();\n\t\t\t\t\t\t\n\/\/ set up appearance\nTheme theme = board.getTheme();\ntheme.setPlotBorderStrokeThickness(0);\ntheme.setTitleBrush(new SolidBrush(Color.black));\ntheme.setGridColor1(Color.white);\ntheme.setGridColor2(new Color(240, 240, 240));\ntheme.setGridLineColor(new Color(255, 255, 255));\n<\/pre>\n<p>We add the <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/chart.java\/index.htm?T_com_mindfusion_charting_components_TextComponent.htm\">TextComponent<\/a> for the title and the <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/chart.java\/index.htm?T_com_mindfusion_charting_components_GridPanel.htm\">GridPanel<\/a> to the <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/chart.java\/index.htm?M_com_mindfusion_charting_swing_Dashboard_getLayoutPanel_0.htm\">LayoutPanel<\/a> of the <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/chart.java\/index.htm?T_com_mindfusion_charting_swing_Dashboard.htm\">Dashboard<\/a> . The <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/chart.java\/index.htm?M_com_mindfusion_charting_swing_Dashboard_getLayoutPanel_0.htm\">LayoutPanel<\/a> is a vertical <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/chart.java\/index.htm?T_com_mindfusion_charting_components_StackPanel.htm\">StackPanel<\/a> and it arranges the elements exactly as we want them to appear:<\/p>\n<pre>board.getLayoutPanel().getChildren().add(title);\nboard.getLayoutPanel().getChildren().add(panel);\n\ngetContentPane().setLayout(new BorderLayout());\ngetContentPane().add(board, BorderLayout.CENTER);\n<\/pre>\n<p>We make sure the ContentPane of the JFrame that our Swing application uses applies the BorderLayout on the <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/chart.java\/index.htm?T_com_mindfusion_charting_swing_Dashboard.htm\">Dashboard<\/a> and places it in the center which means it will stretch automatically when the user changes the size of the JFrame.<\/p>\n<p><strong>III. The Plot<\/strong><\/p>\n<p>The plot for the <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/chart.java\/index.htm?T_com_mindfusion_charting_swing_Chart.htm\">Chart<\/a> is a <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/chart.java\/index.htm?T_com_mindfusion_charting_Plot2D.htm\">Plot2D<\/a> control. It will hold the <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/chart.java\/index.htm?T_com_mindfusion_charting_BarRenderer.htm\">BarRenderer<\/a> and the two <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/chart.java\/index.htm?T_com_mindfusion_charting_AnnotationRenderer.htm\">AnnotationRenderer<\/a> -s. First, we set some general options: that the plot allows span, that it stretches in both directions and it will render a vertical grid.<\/p>\n<pre>\/\/create the Plot2D\nPlot2D out = new Plot2D();\t\nout.setAllowPan(true);\nout.setHighlightStrokeDashStyle(DashStyle.Dash);\nout.setHorizontalAlignment(LayoutAlignment.Stretch);\nout.setVerticalAlignment(LayoutAlignment.Stretch);\nout.setGridType(GridType.Vertical);\n<\/pre>\n<p>Then we go on with the styling options. The colors for the bars are set by a <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/chart.java\/index.htm?T_com_mindfusion_charting_SeriesStyle.htm\">SeriesStyle<\/a> class. We use an instance of the <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/chart.java\/index.htm?T_com_mindfusion_charting_PerSeriesStyle.htm\">PerSeriesStyle<\/a> which assings one brush and one fill for all elements in a single Series. We also set the HighlightStroke, which is the <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/chart.java\/index.htm?T_com_mindfusion_drawing_Brush_0.htm\">Brush<\/a> that is used to highlight the bar that is selected:<\/p>\n<pre>List fills = fill();\nList strokes = stroke();\nout.setBackground(new SolidBrush(Color.white));\nout.setVerticalScroll(true);\nout.setSeriesStyle(new PerSeriesStyle(fills, strokes, Arrays.asList(5.0), null));\t\t\nout.setHighlightStroke(new SolidBrush(new Color(0, 0, 99)));\n<\/pre>\n<p>Finally we indicate the location of the plot in the <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/chart.java\/index.htm?T_com_mindfusion_charting_components_GridPanel.htm\">GridPanel<\/a> (more about the grid later):<\/p>\n<pre>\/\/position in the grid\nout.setGridColumn(1);\nout.setGridRow(1);\n<\/pre>\n<p><strong>IV. Axes<\/strong><\/p>\n<p>The axes are two &#8211; X and Y. The Y axis is present, but not visible. The X-axis is visible, aligned to the top and does not draw labels. The Axis are instances of the <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/chart.java\/index.htm?T_com_mindfusion_charting_Axis.htm\">Axis<\/a> class. They both use <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/chart.java\/index.htm?T_com_mindfusion_charting_AxisRenderer.htm\">AxisRenderer<\/a> instances to be drawn:<\/p>\n<pre>xAxis = new Axis();\nxAxis.setMinValue(0.0);\nxAxis.setMaxValue(300.0);\nxAxis.setInterval(50);\t\t\nxAxis.setTitle(\"\");\t\t\n<\/pre>\n<p>The intervals of the axis are important because they determine the location of the grid stripes. The <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/chart.java\/index.htm?T_com_mindfusion_charting_Axis.htm\">Axis<\/a> sets some apperance properties like brush and font for the labels.<\/p>\n<pre>\/\/the xAxisRenderer is bound to the xAxis\nxAxisRenderer = new XAxisRenderer(xAxis);\t\t\t\nxAxisRenderer.setAxisStroke(new SolidBrush(Colors.Black));\nxAxisRenderer.setAxisStrokeThickness(1.0);\nxAxisRenderer.setLabelFontSize(12.0);\nxAxisRenderer.setLabelBrush(new SolidBrush(Colors.Black));\n<\/pre>\n<p>Then comes the importnat part: we must tell this <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/chart.java\/index.htm?T_com_mindfusion_charting_Axis.htm\">Axis<\/a> that its labels come from an <a href=\"http:\/\/www.mindfusion.dev\/onlinehelp\/chart.java\/index.htm?T_com_mindfusion_charting_AnnotationRenderer.htm\">AnnotationRenderer<\/a> , that it must not draw its intervals and that the labels are drawn above, rather than below the axis line:<\/p>\n<pre>\/\/axis labels will be rendered by an AnnotationRenderer\nxAxisRenderer.setLabelsSource(annotationRenderer1);\nxAxisRenderer.setShowCoordinates(false);\t\t\nxAxisRenderer.setPlotBottomSide(false);\n<\/pre>\n<p>Finally, we specify its location and stretch settings:<\/p>\n<pre>\/\/stretch this horizontal axis\nxAxisRenderer.setHorizontalAlignment(LayoutAlignment.Stretch);\n   \t\n\/\/position in the Grid\nxAxisRenderer.setGridColumn(1);\nxAxisRenderer.setGridRow(0); \n<\/pre>\n<p>The Y-axis is similar to the X-axis, so we won&#8217;t describe its settings here. Here is the final chart:<\/p>\n<div id=\"attachment_1784\" style=\"width: 812px\" class=\"wp-caption aligncenter\"><a href=\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2017\/03\/java-stacked-bar-chart.png\"><img loading=\"lazy\" decoding=\"async\" aria-describedby=\"caption-attachment-1784\" class=\"size-full wp-image-1784\" src=\"http:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2017\/03\/java-stacked-bar-chart.png\" alt=\"A stacked bar chart in Java Swing\" width=\"802\" height=\"400\" srcset=\"https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2017\/03\/java-stacked-bar-chart.png 802w, https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2017\/03\/java-stacked-bar-chart-300x150.png 300w, https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2017\/03\/java-stacked-bar-chart-768x383.png 768w, https:\/\/mindfusion.dev\/blog\/wp-content\/uploads\/2017\/03\/java-stacked-bar-chart-500x249.png 500w\" sizes=\"auto, (max-width: 802px) 100vw, 802px\" \/><\/a><p id=\"caption-attachment-1784\" class=\"wp-caption-text\">Poll chart in Java Swing<\/p><\/div>\n<p>This is the end of the Part I of this tutorial. In part II we&#8217;ll cover the BarRenderer with the BarSeries and the AnnotationRenderer-s. We will also briefly discuss the GridPanel.<\/p>\n<p>You can download the complete source code of the sample from here:<\/p>\n<p align=\"center\"><a href=\"https:\/\/mindfusion.dev\/samples\/java\/chart\/StackedBarChart.zip\">Download The Stacked Bar Chart in Java Sample<\/a><\/p>\n<p><em>About Charting for Java:<\/em> MindFusion.Charting for Java Swing is a multipurpose graphics library that lets you create and customize a large variety of chart types: bar, column, pie, doughnut, radar, polar etc., candlestick financial charts, gauges and dashboards with dynamic layout of their components. The library boasts a smart API which lets you combine and arrange multiple lots, axes, legends, images and other chart components. The chart appearance can be customized on multiple levels &#8211; from properties applied on a single element to global themes reused by all charts and series. Charts use a uniform Series interface for reading data and labels. You can implement the interface and create custom Series that matches your data source. Written in pure Java, this tool provides every type of Java Swing application with powerful charting capabilities. Read more about the component from <a href=\"http:\/\/mindfusion.dev\/java-chart.html\">here.<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Part I: Overview of chart elements, the dashboard, plot and axes. Part II : Bar series and their drawing, rendering of custom labels with AnnotationRenderer-s. In this blog post we will build a horizontal stacked bar chart in Java. To &hellip; <a href=\"https:\/\/mindfusion.dev\/blog\/a-poll-chart-a-stacked-bar-chart-in-java-swing-that-represents-results-of-a-survey\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":2,"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":true,"_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,74],"tags":[458,456,455,457,454],"class_list":["post-1780","post","type-post","status-publish","format-standard","hentry","category-charting-2","category-sample-code","tag-horizontal-bar-chart","tag-java-swing-bar-chart","tag-java-swing-chart","tag-poll-chart","tag-stacked-bar-chart"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p3RlKs-sI","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/1780","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\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/comments?post=1780"}],"version-history":[{"count":6,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/1780\/revisions"}],"predecessor-version":[{"id":2616,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/posts\/1780\/revisions\/2616"}],"wp:attachment":[{"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/media?parent=1780"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/categories?post=1780"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mindfusion.dev\/blog\/wp-json\/wp\/v2\/tags?post=1780"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}