Graph Drawing Module Programming Guide -...

intra-mart Accel Platform

Graph Drawing Module Programming Guide

2012/10/01 Initial Version

<< Revision History >>

Revision Date Updated Contents


Table of Contents

By NTT DATA INTRAMART CORPORATION Page i

＜＜ Table of Contents ＞＞ 1 Introduction .....................................................................................................................................................................................1 2 API ..................................................................................................................................................................................................2

2.1 Summary .................................................................................................................................................................................2 2.2 JavaEE Development Model ...................................................................................................................................................2

2.2.1 Tag Library......................................................................................................................................................................2 2.2.2 im-BizAPI .......................................................................................................................................................................2

2.3 Script Development Model......................................................................................................................................................2 2.3.1 Tag Library......................................................................................................................................................................2

3 JavaEE Development Model ...........................................................................................................................................................4 3.1 Introduction .............................................................................................................................................................................4 3.2 Pie Graph.................................................................................................................................................................................4

3.2.1 APIs used in Sample Program .........................................................................................................................................4 3.2.2 Sample Code....................................................................................................................................................................4 3.2.3 Execution Result..............................................................................................................................................................5

3.3 Portfolio...................................................................................................................................................................................6 3.3.1 APIs used in Sample Program .........................................................................................................................................6 3.3.2 Sample Code....................................................................................................................................................................6 3.3.3 Execution Result..............................................................................................................................................................7

3.4 Combination Graph No. 1 .......................................................................................................................................................8 3.4.1 APIs used in Sample Program .........................................................................................................................................8 3.4.2 Sample Code....................................................................................................................................................................8 3.4.3 Execution Result..............................................................................................................................................................9

3.5 Combination Graph No. 2 .....................................................................................................................................................10 3.5.1 APIs used in Sample Program .......................................................................................................................................10 3.5.2 Sample Code..................................................................................................................................................................10 3.5.3 Execution Result............................................................................................................................................................11

4 Script Development Model............................................................................................................................................................12 4.1 Introduction ...........................................................................................................................................................................12 4.2 Pie Graph...............................................................................................................................................................................12

4.2.1 APIs used in Sample Program .......................................................................................................................................12 4.2.2 Sample Code..................................................................................................................................................................12 4.2.3 Execution Result............................................................................................................................................................13

4.3 Portfolio.................................................................................................................................................................................14 4.3.1 APIs used in Sample Program .......................................................................................................................................14 4.3.2 Sample Code..................................................................................................................................................................14 4.3.3 Execution Result............................................................................................................................................................15



5 Setting File and Setting .................................................................................................................................................................20 5.1 WEB-INF/conf/graph/default.properties ...............................................................................................................................20

intra-mart Graph Drawing Module Programming Guide

Page ii Copyright 2000-2012 NTT DATA INTRAMART CORPORATION All rights Reserved.

5.1.1 Directory Structure........................................................................................................................................................ 20 5.1.2 Setting Items ................................................................................................................................................................. 20

5.2 WEB-INF/web.xml............................................................................................................................................................... 23 5.2.1 jp.co.intra_mart.foundation.chart.servlet.GraphDrawerServlet Class ........................................................................... 23

5.3 Theme Function .................................................................................................................................................................... 23 5.3.1 Usage Steps................................................................................................................................................................... 23

6 Directory Structure ....................................................................................................................................................................... 25 6.1 Directory Structure ............................................................................................................................................................... 25

7 Addendum .................................................................................................................................................................................... 26 7.1 Graph Samples...................................................................................................................................................................... 26

7.1.1 Menu............................................................................................................................................................................. 26 7.1.2 Directory Structure........................................................................................................................................................ 26

1 Introduction

By NTT DATA INTRAMART CORPORATION Page 1

1 Introduction Graph Drawing Module of intra-mart Accel Platform (hereafter called iAP) utilizes the graph creation library

[JfreeChart (http://www.jfree.org/jfreechart/)] to draw graphs.

This document describes and explains the basic settings and programming of Graph Drawing Module.

http://www.jfree.org/jfreechart/�


Page 2 Copyright 2000-2012 NTT DATA INTRAMART CORPORATION All rights Reserved.

2 API

2.1 Summary iAP provides the following Graph Drawing Module APIs.

2.2 JavaEE Development Model

2.2.1 Tag Library

intra-mart Standard Tag Library

Graph Drawing Tag

Library

imchart:chart

2.2.2 im-BizAPI

Application Common Module API

jp.co.intra_mart.foundation.chart.data

jp.co.intra_mart.foundation.chart.dataset

jp.co.intra_mart.foundation.chart.drawer Package

jp.co.intra_mart.foundation.chart.graphInfo

<*> Please see API List for the details of classes and methods included in the packages above.

2.3 Script Development Model

2.3.1 Tag Library

Screen Common IMART Tag Library

Graph Drawing Type Tag chart



3 JavaEE Development Model

3.1 Introduction This section describes how to use (programming) Graph Drawing Module in JavaEE Development Model

using a simple sample program as an example.

3.2 Pie Graph

3.2.1 APIs used in Sample Program

Graph Drawing Tag Library imchart:chart

style Attribute pie

jp.co.intra_mart.foundation.chart.graphInfo.PieGraphInfo

jp.co.intra_mart.foundation.chart.dataset.PieDataset Application Common Module API

jp.co.intra_mart.foundation.chart.data.PieData

3.2.2 Sample Code < jsp >

<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>

<%@ taglib uri="http://www.intra-mart.co.jp/taglib/foundation/chart" prefix="imchart"%>

<%@page import="jp.co.intra_mart.foundation.chart.dataset.*"%>

<%@page import="jp.co.intra_mart.foundation.chart.data.*"%>

<%@page import="jp.co.intra_mart.foundation.chart.graphInfo.*"%>

<%

// Sample Data for Pie Graph

PieGraphInfo pieGraphInfo = new PieGraphInfo();

PieDataset pieDataset = new PieDataset();

pieDataset.addDataset(new PieData("Tokyo Branch", 700));

pieDataset.addDataset(new PieData("Osaka Branch", 300));

pieDataset.addDataset(new PieData("Kanagawa Branch", 250));

pieDataset.addDataset(new PieData("Chiba Branch", 302));

pieDataset.addDataset(new PieData("Nagoya Branch", 155));

pieDataset.addDataset(new PieData("Saitama Branch", 400));

pieGraphInfo.setDataset(pieDataset);

%>

<div class="imui-title">

<h1>Pie Graph Sample</h1>

</div>

<div class="imui-form-container-narrow">

<table>

<tr>

<td><imchart:chart displayType="3D" style="pie" data="<%=pieGraphInfo %>"></imchart:chart></td>

</tr>

</table>

</div>

Pie Graph Data Creation Part

Graph Image Display Part



3.2.3 Execution Result



3.3 Portfolio



style Attribute portFolio

jp.co.intra_mart.foundation.chart.graphInfo.PortFolioGraphInfo

jp.co.intra_mart.foundation.chart.dataset.PortFolioDataset

jp.co.intra_mart.foundation.chart.data.PortFolioData Application Common Module API

jp.co.intra_mart.foundation.chart.data.PortFolioValue







<%

// Sample Data for Portfolio Graph

PortFolioGraphInfo portFolioInfo = new PortFolioGraphInfo(50, 6000);

PortFolioDataset portFolioDataset = new PortFolioDataset();

PortFolioData pfSeries1 = new PortFolioData();

pfSeries1.setName("Tokyo");

pfSeries1.addValue(new PortFolioValue(15, 3000, 1000));



pfSeries2.setName("Osaka");



pfSeries3.setName("Nagoya");


portFolioDataset.addData(pfSeries1);



portFolioInfo.setDataset(portFolioDataset);

%>


<h1>Portfolio Sample</h1>

</div>


<table>

<tr>

<td><imchart:chart style="portFolio" data="<%=portFolioInfo %>"></imchart:chart></td>

</tr>

</table>

</div>

Portfolio Graph

Data Creation Part







3.4 Combination Graph No. 1



style Attribute combined

jp.co.intra_mart.foundation.chart.graphInfo.BarGraphInfo

jp.co.intra_mart.foundation.chart.dataset.BarDataset

jp.co.intra_mart.foundation.chart.data.StandardData

jp.co.intra_mart.foundation.chart.graphInfo.LineGraphInfo


jp.co.intra_mart.foundation.chart.dataset.LineDataset







<%

// Bar Graph Sample Data

BarGraphInfo barGraphInfo = new BarGraphInfo();

BarDataset barDataset = new BarDataset();

StandardData barSeries1 = new StandardData();

barSeries1.setName("Tokyo Branch");

barSeries1.setValues(new Number[] { 300, 200, 400, 500, 250, 380 });

StandardData barSeries2 = new StandardData();

barSeries2.setName("Osaka Branch");

barSeries2.setValues(new Number[] { 190, 320, 320, 500, 410, 230 });

barDataset.setCategory(

new String[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun" });

barDataset.addData(barSeries1);

barDataset.addData(barSeries2);

barGraphInfo.setDataset(barDataset);

// Line Graph Sample Data

LineGraphInfo lineGraphInfo = new LineGraphInfo();

LineDataset lineDataset = new LineDataset();

StandardData lineSeries1 = new StandardData();

lineSeries1.setName("Tokyo Branch");

lineSeries1.setValues(new Number[] { 300, 200, 250, 300, 360, 390 });

StandardData lineSeries2 = new StandardData();

lineSeries2.setName("Osaka Branch");

lineSeries2.setValues(new Number[] { 240, 300, 350, 180, 380, 340 });

lineDataset.setCategory(

new String[] { "Jan", "Feb", "Mar", "Apr", "May", "Jun" });

lineDataset.addData(lineSeries1);

lineDataset.addData(lineSeries2);

lineGraphInfo.setDataset(lineDataset);

Bar Graph

Data Generation Part

Line Graph




%>


<h1>Combination Graph 1 Sample</h1>

</div>


<table>

<tr>

<td><imchart:chart style="combined" data="<%=barGraphInfo %>"

subData="<%=lineGraphInfo %>"></imchart:chart></td>

</tr>

</table>

</div>








style Attribute bar

jp.co.intra_mart.foundation.chart.graphInfo.LineGraphInfo

jp.co.intra_mart.foundation.chart.dataset.LineDataset

jp.co.intra_mart.foundation.chart.data.StandardData

jp.co.intra_mart.foundation.chart.graphInfo.BarGraphInfo


jp.co.intra_mart.foundation.chart.dataset.BarDataset







<%


LineGraphInfo lineInfo = new LineGraphInfo();

LineDataset lineData = new LineDataset();

StandardData lineSeries = new StandardData();

lineSeries.setName("Sales Expense");

lineSeries.setValues(

new Number[] { 280, 130, 100, 190, 70, 80, 130, 110, 390, 383 });

lineData.setCategory(new String[] { "1999", "2000", "2001", "2002",

"2003", "2004", "2005", "2006", "2007", "2008" });

lineData.addData(lineSeries);

lineInfo.setDataset(lineData);


BarGraphInfo barInfo = new BarGraphInfo();

BarDataset barData = new BarDataset();

StandardData barSeries = new StandardData();

barSeries.setName("Tokyo Branch");

barSeries.setValues(

new Number[] { 3200, 3600, 4000, 4200, 3940,

4300, 6400, 2320, 3420, 5000 });

barData.setCategory(new String[] { "1999", "2000", "2001", "2002",

"2003", "2004", "2005", "2006", "2007", "2008" });

barData.addData(barSeries);

barInfo.setDataset(barData);

%>



</div>


<table>

<tr>

Line Graph


Bar Graph




<td><imchart:chart style="bar"

data="<%=barInfo %>" subData="<%=lineInfo %>"></imchart:chart></td>

</tr>

</table>

</div>





4 Script Development Model

4.1 Introduction This section describes how to use (programming) Graph Drawing Module in Script Development Model

using a simple sample program as an example.

4.2 Pie Graph


Graph Drawing Tag Library chart

style Attribute pie

4.2.2 Sample Code < html >


<h1>Pie Graph Sample</h1>

</div>


<table>

<tr>

<td><imart type="chart" style="pie" data=pieData /></td>

</tr>

</table>

</div>

< js > let pieData = {};

function init(request){

// Pie Graph Sample Data

pieData.dataset = [{

"name" : "Tokyo Branch",

"value" : 700

}, {

"name" : "Osaka Branch",

"value" : 300

}, {

"name" : "Kanagawa Branch",

"value" : 250

}, {

"name" : "Chiba Branch",

"value" : 302

}, {

"name" : "Nagoya Branch",

"value" : 155

}, {

"name" : "Saitama Branch",

"value" : 400

}];

}


Pie Graph Data Generation Part






4.3 Portfolio



style Attribute portFolio



<h1>Portfolio Sample</h1>

</div>


<table>

<tr>

<td><imart type="chart" style="portFolio" data=portFolioData /></td>

</tr>

</table>

</div>

< js > let portFolioData = {};


// Portfolio Graph Sample Data

portFolioData.xAxis = {

"max" : 100,

"min" : 0,

"scale" : 10

};

portFolioData.yAxis = {

"max" : 10000,

"min" : 0,

"scale" : 1000

};

portFolioData.dataset = {

"data" : [{

"name" : "Tokyo",

"value" : [{

"xValue" : 15,

"yValue" : 3000,

"size" : 1000

}, {

"xValue" : 90,

"yValue" : 9000,

"size" : 100

}]

}, {

"name" : "Osaka",

"value" : [{

"xValue" : 50,

"yValue" : 5000,

"size" : 3000

}]

}, {

"name" : "Nagoya",

"value" : [{

"xValue" : 35,

"yValue" : 3000,

"size" : 2000

}]


Portfolio Graph




}]

};

}







style Attribute combined




</div>


<table>

<tr>

<td><imart type="chart" style="combined" data=lineData subData=barData /></td>

</tr>

</table>

</div>

< js > let barData = {};

let lineData = {};


// Bar Graph Sample Data (General Bar Graph)

barData.dataset = {

"category" : ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],

"data" : [{


"value" : [300, 200, 400, 500, 250, 380]

}, {


"value" : [190, 320, 320, 500, 410, 230]

}, {

"name" : "Chiba Branch",

"value" : [210, 260, 300, 320, 330, 360]

}]

};


lineData.dataset = {

"category" : ["Jan", "Feb", "Mar", "Apr", "May", "Jun"],

"data" : [{


"value" : [300, 200, 250, 300, 360, 390]

}, {


"value" : [240, 300, 350, 180, 380, 340]

}]

};

}


Line Graph


Bar Graph










style Attribute bar




</div>


<table>

<tr>

<td><imart type="chart" style="bar" data=bar subData=line /></td>

</tr>

</table>

</div>

< js > let line = {};

let bar = {};



line.dataset = {

"category" : ["1999", "2000", "2001", "2002", "2003", "2004",

"2005", "2006", "2007", "2008"],

"data" : [{

"name" : "Sales Expense",

"value" : [280, 130, 100, 190, 70, 80, 130, 110, 390, 383]

}]

};


bar.dataset = {

"category" : ["1999", "2000", "2001", "2002", "2003", "2004",

"2005", "2006", "2007", "2008"],

"data" : [{


"value" : [3200, 3600, 4000, 4200, 3940, 4300, 6400, 2320, 3420, 5000]

}]

};

}


Line Graph


Bar Graph







5 Setting File and Setting

5.1 WEB-INF/conf/graph/default.properties In the default.properties, settings of title font, background color, and so on for the graph image file are made.

5.1.1 Directory Structure WAR File

┃

┣ ┃ ┃ ┃ ┃

WEB-INF/ ┃ ┗conf/

┃ ┗ graph/

┃ ┗ default.properties

＿＿＿＿＿ Graph Drawing Module Setting File

☆Reference☆

Code conversion using JDK [native2ascii] command is made in this setting file.

In case you need to edit or refer to it, please convert it to the native code file by the [-reverse] option.

5.1.2 Setting Items

<<グラフ画像と設定項目>>



5.1.2.1 Image Contents Type

Parameter Description Default value

graph.content.type Contents Type of Image File

Following contents type can be specified.

・ png

・ jpeg

png

5.1.2.2 Image File Title

Parameter Description Default Value

graph.extra.large.font.name Font Name dialog

graph.extra.large.font.style Font Style

Following font styles can be specified.

・ BOLD

・ PLAIN

・ ITALIC

・ BOLDITALIC

BOLD

graph.extra.large.font.size Font Size

Point size in decimal notation is specified.

18

5.1.2.3 Image File Sub-Title


graph.large.font.name Font Name dialog

graph.large.font.style Font Style

Following font styles can be specified.

・ BOLD

・ PLAIN

・ ITALIC

・ BOLDITALIC

PLAIN

graph.large.font.size Font Size


14



5.1.2.4 x-Axis Label, y-Axis Lable, Legend


graph.regular.font.name Font Name dialog

graph.regular.font.style Font Style

Following styles can be specified.

・ BOLD

・ PLAIN

・ ITALIC

・ BOLDITALIC

PLAIN

graph.regular.font.size Font Size


12

5.1.2.5 Character Font Displayed in the Image


graph.small.font.name Font Name dialog

graph.small.font.style Font Style

Following styles can be specified.

・ BOLD

・ PLAIN

・ ITALIC

・ BOLDITALIC

PLAIN

graph.small.font.size Font Size


10

5.1.2.6 Height of Image File


graph.image.height Height of Image File 360

5.1.2.7 Width of Image File


graph.image.width Width of Image File 300

5.1.2.8 Background Color

Parameter Description Default

Value

graph.plot.background.color Background color of image file white

graph.plot.outline.color Background color of grid line of image file gray

graph.legend.background.color Background color of Legend white

graph.chart.background.color Background color of chart (graph) whitesmoke

graph.horizontal.gridline.color Background color of grid line (horizontal) lightgrey

graph.vertical.gridline.color Background color of grid line (vertical) lightgrey

<*> Background color can be specified in Hexadecimal notation too.

(example) Specify white color as background → #FFFFFF



5.2 WEB-INF/web.xml In the web.xml it is set if the generated image file is stored to Storage Service or not.

5.2.1 jp.co.intra_mart.foundation.chart.servlet.GraphDrawerServlet Class

5.2.1.1 Parameter

Parameter

Name

Description Default Value

store Whether the created image file is stored to the Storage Service or not is set.

true ： file is generated

ｆalse ： file is not generated

false

5.2.1.2 Storage Loaction of Image File

Storage Location

Directory

% System Storage root%/work/im_chart/Tenant ID/Login user Name/

File Name 15-digit unique ID

Remarks Created image files are to be deleted when the corresponding session is discarded.

(Example of Saving Image File)

%System Storage root%/work/im_chart/default/aoyagi/5hq5us79nrk7a8t

5.3 Theme Function With the Theme function, title font of graph image files or background color setting can be defined in your

own property file instead of using default.properties.

As a consequence it is possible to specify the title font for each graph image file or background color.

5.3.1 Usage Steps

1. Create your own property file, and place it in the directory similar to default.properties (WEB-INF/conf/graph).

Please refer to [5.1.2 Setting Items] for setting items.

Here it is assumed that WEB-INF/conf/graph/sample.properties will be created.

2. Specify Theme in the program.

JavaEE Development Model <imart:chart style="portFolio"

data="<%=portFolioInfo %>"

imageHeight="800"

imageWidth="600">

</imart:chart>

<imart:chart style="portFolio"


theme="sample">

Specify Property Name.



Script Development Model <imart:chart style="portFolio"


imageHeight="800"

imageWidth="600">

</imart:chart>

<imart:chart style="portFolio"

data=portFolioData

theme="sample">

By following the steps above, setting contents that were defined in sample.properties are reflected in the specified graph image file.

Specify Property Name.

6 Directory Structure


6 Directory Structure In this chapter directory of the libraries related to graph drawing module and the setting files will be described.

All the directory structures stated here are for the initial state at product installation time.

6.1 Directory Structure WAR File

┃

┣ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃

WEB-INF / ┃ ┣ conf/ ┃ ┃ ┃ ┗ graph/ ┃ ┃ ┃ ┗default.properties ┣ lib/ ┃ ┃ ┃ ┣ im_chart-8.0.0-main.jar ┃ ┃ ┃ ┗ jfreechart-1.0.12.jar ┗ jssp/ ┃ ┗ platform/ ┃ ┗ system/ ┃ ┗ common/ ┃ ┗ parts/ ┃ ┗ chart/ ┃ ┣ chart_tag.js ┃ ┗ init.js

＿＿＿＿＿ Graph Drawing Module Setting File ＿＿ iWP/iAF Graph Drawing Module (Library) ＿ JfreeChart Library ＿＿＿＿＿＿＿＿＿＿＿＿ Graph Drawing Module ＿ Initialization File



7 Addendum

7.1 Graph Samples iAP provides the samples of graphs which use the graph drawing module for JavaEE Development Model and

Script Development Model respectively.

Graph samples can be obtained by the System Administrator by importing sample data.

7.1.1 Menu

7.1.1.1 JavaEE Development Model

Menu：Sample＞Script Development Model＞Graph

7.1.1.2 Script Development Model

Menu : Sample＞JavaEE Development Model＞Graph

7.1.2 Directory Structure

7.1.2.1 WAR File ┃

┣ ┃ ┃ ┣

┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃ ┃

sample/ ┃ ┗ chart/ WEB-INF/

┣ conf/ ┃ ┃

┃ ┣ routing-jssp-config/ ┃ ┃ ┗ im_chart-sample.xml ┃ ┗ routing-servlet-config/ ┃ ┗ im_chart-sample.xml ┗ jssp/ ┗ src/ ┗ sample/ ┗chart

＿ JavaEE Development Model – Graph Sample (directory) ＿＿＿ Script Development Model Router Setting File ＿ JavaEE Development Model Router Setting File ＿＿＿ Script Development Model – Graph Sample (directory)

7 Addendum


intra-mart Accel Platform

Graph Drawing Module Programming Guide


Copyright 2000-2012

NTT DATA INTRAMART CORPORATION

All rights Reserved.

TEL: 03-5549-2821 FAX: 03-5549-2816

E-MAIL: [email protected]

URL: http://www.intra-mart.jp/

Date post:	30-Apr-2018
Category:	Documents
Upload:	voxuyen
View:	219 times
Download:	4 times

Graph Drawing Module Programming Guide -...

Documents