Background

There are many chart functions used on the web such as google chart and chart.js. However, you cannot use it unless you are familiar with JavaScript. There may be people who think the hurdles are high due to individual differences.

When using an Excel chart, you can create a chart by simply selecting a data table and selecting the graph type. I think it would be great if there was a way to do this on the web. See the jsp example below.

Example

Even though it's JSP, it's mostly HTML. Only 4 lines are related to java.

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="efw" uri="efw" %>
<!DOCTYPE HTML>
<HTML>
<HEAD>
	<title>chart テスト</title>
	<efw:Client lang="jp"/>
</HEAD>
<BODY>
<table>
<tr><td>
<!--ここはデータ表-->
	<table border=1 id="chart1_data" data-format="$#,##0" data-legend="bottom">
		<caption>Chart Caption</caption>
		<tr><th>Row0Col0</th><th>col1</th><th>col2</th><th>col3</th></tr>
		<tr><td>row1</td><td>$1,000</td><td>$700</td><td>$300</td></tr>
		<tr><td>row2</td><td>$900</td><td>$700</td><td>$600</td></tr>
		<tr><td>row3</td><td>$800</td><td>$600</td><td>$500</td></tr>
		<tr><td>row4</td><td>$700</td><td>$500</td><td>$400</td></tr>
		<tr><td>row5</td><td>$1,000</td><td>$800</td><td>$700</td></tr>
	</table>
</td><td>
<!--ここは縦棒グラフ-->
	<efw:Chart id="char1" data="chart1_data" type="column"/>
</td></tr></table>
</BODY>
</HTML>

This 4-line java program will display a google chart as shown in the evidence below. Isn't it easy? Isn't the color matching similar to Excel?

Get Jar

It can be downloaded from maven.

<dependency>
    <groupId>io.github.efwgrp</groupId>
    <artifactId>efw</artifactId>
    <version>4.07.000</version>
</dependency>

efw Chart tag

How to use the above explanation is efw's Chart tag. Although complex charts cannot be created, commonly used Excel-like charts can be created with a single tag. For detailed API information, see the link below.
https://github.com/efwGrp/efw4.X/blob/master/help/e/tag.chart.md
Chart type, data settings, title, legend, scale, format, etc. The functions that can be realized can be seen from the diagram below.

Also, since Google Chart cannot be used when you are not online, we have also included chart.js, which can be used offline. Switch by mode.

Please try it if you are interested. The above evidence program can be downloaded from the link below.