LoginSignup

This article is a Private article. Only a writer and users who know the URL can access it.
Please change open range to public in publish setting if you want to share this article with other users.

Web Chart Function with One Tag

Posted at

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?
image.png

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/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.
image.png
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.

0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up