|
Line Graphs
Line graphs are very widely used, normally to display data that changes over a period of time.
The intention of this page is to show how to make a line graph with Swiftchart in order you can start to dynamically create a line graph for your web site or web application - starting with a very simple example of line graph all the way to complex examples how to create a line graph. Further examples can be found on the chart and graph examples page.
Simple example of line graph
Line graph with extended appearance control
Bar and line graph in one graph
|
Simple example of line graph
This example of a line graph is based on just five parameters:
chart_type
title_text
x_value
s1_value
s1_label
Swiftchart will scale the line graph automatically and assign default appearance parameters.
|
Applet code
<applet code="swiftchart.class" width="400" height="300">
<param name="chart_type" value="LINE">
<param name="title_text" value="Simple Line 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","LINE");
mychart.setParam("title_text","Simple Line 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");
ServletOutputStream sos = response.getOutputStream();
JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(sos);
encoder.encode(mychart.getChart());
%>
</body>
</html>
|
|
|
Line graph with extended appearance control
This example shows how to create a line graph using Swiftchart's extended appearance parameters such as:
title text
y-axis font
x-axis font and orientation
line color
line style and markers
background and border color
legend position
For a full line graph parameter list please visit the Swiftchart parameter page.
|
to top
|
Applet code
<applet code="swiftchart.class" width="400" height="300">
<param name="chart_type" value="LINE">
<param name="bg" value="EEFFCC">
<param name="chart_bg" value="FFFFFF">
<param name="chart_border_color" value="009900">
<param name="title_text" value="Simple Line 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="s1_value" value="20,11,12,13,22,18">
<param name="s1_color" value="669900">
<param name="s1_line_marker" value="N">
<param name="s1_label" value="serie 1">
<param name="s1_line_weight" value="1">
<param name="s2_value" value="30,21,22,23,42,28">
<param name="s2_color" value="996600">
<param name="s2_label" value="serie 2">
<param name="s2_line_marker" value="Y">
<param name="s2_line_marker_type" value="8">
<param name="s3_value" value="43,31,42,33,52,48">
<param name="s3_color" value="009966">
<param name="s3_label" value="serie 3">
<param name="s3_line_marker" value="N">
<param name="s3_line_weight" value="2">
<param name="s3_line_style" value="2">
<param name="legend_position" value="BOTTOM">
<param name="grid_line_hor_type" value="0">
<param name="grid_line_hor_color" value="CCCCCC">
</applet></applet>
|
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","LINE");
mychart.setParam("bg","EEFFCC");
mychart.setParam("chart_bg","FFFFFF");
mychart.setParam("chart_border_color","009900");
mychart.setParam("title_text","Simple Line 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("s1_value","20,11,12,13,22,18");
mychart.setParam("s1_color","669900");
mychart.setParam("s1_line_marker","N");
mychart.setParam("s1_label","serie 1");
mychart.setParam("s1_line_weight","1");
mychart.setParam("s2_value","30,21,22,23,42,28");
mychart.setParam("s2_color","996600");
mychart.setParam("s2_label","serie 2");
mychart.setParam("s2_line_marker","Y");
mychart.setParam("s2_line_marker_type","8");
mychart.setParam("s3_value","43,31,42,33,52,48");
mychart.setParam("s3_color","009966");
mychart.setParam("s3_label","serie 3");
mychart.setParam("s3_line_marker","N");
mychart.setParam("s3_line_weight","1");
mychart.setParam("s3_line_style","2");
mychart.setParam("legend_position","BOTTOM");
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>
|
|
|
Bar and line graph in one graph
Swiftchart allows to create line and bar graphs in one graph, using the sub_chart parameter. It is possible to create line graphs with one or more bars or graphs with several lines and one or more bars. This line graph example displays 2 lines with 2 bars.
Applet code
<param="s1_sub_chart" value="LINE">
<param="s2_sub_chart" value="LINE">
JSP code
mychart.setParam("s1_sub_chart","LINE");
mychart.setParam("s2_sub_chart","LINE");
to top
|
|
|
