Swiftchart      to create your own chart and graph New! Swiftbarcodes! Barcodes by Swiftchart
EAN, UPC and many more ...
  Home | Examples | Parameters | Products | Contact us | Site map | FAQ Quick links : Get evaluation | Order
  Charts | CSV | JavaScript | Drill down | Popup label | JSP/Servlet Bar Graph | Line Graph

Bar Graphs

Bar graphs are probably the most popular and most widely used graph types. Bar graphs allow a graphical representation of data in different categories or groups. The length of a bar represents the numerical amount for a given serie point.

The intention of this page is to show how to make a bar graph with Swiftchart in order you can start to generate a dynamic bar graph for your web site or web application - starting with a very simple example of a bar graph all the way to complex examples how to create a bar graph. Further examples can be found on the chart and graph examples page.


Simple example of a bar graph

Bar graph with extended appearance control

Vertical bar graph or horizontal bar graph ?

Create a bar graph as a 3D graph

Grouped bar graph

Simple example of a bar graph

This example of a bar graph is based on just five parameters:

  • chart_type
  • title_text
  • x_value
  • s1_value
  • s1_label
    •

    Swiftchart will scale the bar graph automatically and assign default appearance parameters.     		Applet code

    <applet code="swiftchart.class" width="400" height="300">
    <param name="chart_type" value="BAR">
    <param name="title_text" value="Simple Bar Graph">
    <param name="x_value" value="Jan,Feb,Mar,Apr,May,Jun">
    <param name="s1_value" value="20,11,12,13,22,18">
    <param name="s1_label" value="serie 1">
    </applet>

    to top

    		 JSP code

    <html>
    <body>
    <%@ page session="false"%>
    <%@ page contentType="image/jpeg"
    import="com.sun.image.codec.jpeg.*,swiftchart.swiftchart_app.*" %>
    <% swiftchart.swiftchart_app mychart= new swiftchart.swiftchart_app(400,300);
    mychart.setParam("chart_type","BAR");
    mychart.setParam("title_text","Simple Bar Graph");
    mychart.setParam("x_value","Jan,Feb,Mar,Apr,May,Jun");
    mychart.setParam("s1_value","20,11,12,13,22,18");
    mychart.setParam("s1_label","serie 1");
    mychart.setParam("s1_color","990000");
    ServletOutputStream sos = response.getOutputStream();
    JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(sos);
    encoder.encode(mychart.getChart()); %>
    </body>
    </html>

    Bar graph with extended appearance control

    This example shows how to make a bar graph using Swiftchart's extended appearance parameters such as:

  • title text
  • y-axis font
  • x-axis font and orientation
  • bar color
  • background and border color
  • legend position
  • bar width
    •

    For a full bar graph parameter list please visit the Swiftchart parameter page.     		Applet code

    <applet code="swiftchart.class" width="400" height="300">
    <param name="chart_type" value="BAR">
    <param name="bar_width" value="80">
    <param name="bg" value="EEFFCC">
    <param name="chart_bg" value="FFFFFF">
    <param name="chart_border_color" value="009900">
    <param name="title_text" value="Simple Bar Graph">
    <param name="title_font_size" value="18">
    <param name="title_font_type" value="Courier">
    <param name="title_font_style" value="BOLD">
    <param name="y_axis_font_style" value="BOLD">
    <param name="x_value" value="Jan,Feb,Mar,Apr,May,Jun">
    <param name="x_axis_font_size" value="16">
    <param name="x_axis_font_orientation" value="LEFT">
    <param name="s1_value" value="20,11,12,13,22,18">
    <param name="s1_color" value="669900">
    <param name="s1_color_border" value="000000">
    <param name="s1_label" value="serie 1">
    <param name="legend_position" value="INTOPRIGHT">
    <param name="grid_line_hor_type" value="0">
    <param name="grid_line_hor_color" value="CCCCCC">
    </applet>

    to top

    		 JSP code

    <html>
    <body>
    <%@ page session="false"%>
    <%@ page contentType="image/jpeg"
    import="com.sun.image.codec.jpeg.*,swiftchart.swiftchart_app.*" %>
    <% swiftchart.swiftchart_app mychart= new swiftchart.swiftchart_app(400,300);
    mychart.setParam("chart_type","BAR");
    mychart.setParam("bar_width","80");
    mychart.setParam("bg","EEFFCC");
    mychart.setParam("chart_bg","FFFFFF");
    mychart.setParam("chart_border_color","009900");
    mychart.setParam("title_text","Simple Bar Graph");
    mychart.setParam("title_font_size","18");
    mychart.setParam("title_font_type","Courier");
    mychart.setParam("title_font_style","BOLD");
    mychart.setParam("y_axis_font_style","BOLD");
    mychart.setParam("x_value","Jan,Feb,Mar,Apr,May,Jun");
    mychart.setParam("x_axis_font_size","16");
    mychart.setParam("x_axis_font_orientation","LEFT");
    mychart.setParam("s1_value","20,11,12,13,22,18");
    mychart.setParam("s1_color","669900");
    mychart.setParam("s1_color_border","000000");
    mychart.setParam("s1_label","serie 1");
    mychart.setParam("legend_position","INTOPRIGHT");
    mychart.setParam("grid_line_hor_type","0");
    mychart.setParam("grid_line_hor_color","CCCCCC");ServletOutputStream sos = response.getOutputStream();
    JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(sos);
    encoder.encode(mychart.getChart()); %>
    </body>
    </html>

    Vertical bar graph or horizontal bar graph ?

    When making a bar graph there are two ways of displaying the graph - horizontal or vertical. Generating a horizontal bar graph or a vertical bar graph is simple using the chart_type parameter as followed:

  • chart_type=BAR
  • chart_type=HORBAR


    • Applet code
    <param="chart_type" value="BAR">
    or
    <param="chart_type" value="HORBAR">


    JSP code
    mychart.setParam("chart_type","BAR");
    or
    mychart.setParam("chart_type","HORBAR");

    to top

    Create a bar graph as a 3D graph

    Swiftchart includes 3D graph software allowing to plot bar graphs in 3D. The following examples show how to make a bar graph in 2D with Swiftchart and how to control the 3D depth:

  • chart_type=BAR3D
  • chart_type=HORBAR3D
  • depth3D=40


    • Applet code
    <param="chart_type" value="BAR3D">
    or
    <param="chart_type" value="HORBAR3D">
    and
    <param="depth3D" value="200">


    JSP code
    mychart.setParam("chart_type","BAR3D");
    or
    mychart.setParam("chart_type","HORBAR3D");
    and
    mychart.setParam("depth3D","200");

    to top

    Grouped bar graph

    Swiftchart allows to create grouped bar graphs. Grouped graphs are generated defining several series:

  • s1_value" value="20,11,12"
  • s2_value" value="16,21,32"
  • s1_label" value="Serie 1"
  • s2_label" value="Serie 2"


    • Applet code
    <param="chart_type" value="BAR3D">
    or
    <param name="s1_value" value="20,11,12">
    <param name="s1_label" value="serie 1">
    <param name="s2_value" value="16,21,32">
    <param name="s2_label" value="serie 2">


    JSP code
    mychart.setParam("s1_value","20,11,12");
    mychart.setParam("s1_label","Serie 1");
    mychart.setParam("s2_value","16,21,32");
    mychart.setParam("s2_label","Serie 2");

    to top