<div id="main-content" class="wiki-content group">
<p class="MsoNormal">The main objective of the Graph Viewer is to
allow other applications to display customized graph within Fluig. In
order to do that, the application just has to register your graph
service in Fluig and provide two rest methods. One that will provide
the configuration parameters of the graph, and another that will
provide the data.</p>
<p class="MsoNormal">
<span style="font-size: 10.0pt; line-height: 13.0pt;">The Graph
Viewer allows to display in the following formats: table, column
chart and pie chart.</span>
</p>
<p class="MsoNormal">
<span style="font-size: 10.0pt; line-height: 13.0pt;"><img
class="confluence-embedded-image"
src="http://tdn.totvs.com/download/attachments/80970184/grafico1.png?version=1&modificationDate=1380654979000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/80970184/grafico1.png?version=1&modificationDate=1380654979000&api=v2"></span>
</p>
<p class="MsoNormal">
<span style="font-size: 10.0pt; line-height: 13.0pt;"><img
class="confluence-embedded-image"
src="http://tdn.totvs.com/download/attachments/80970184/grafico2.png?version=1&modificationDate=1380654979000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/80970184/grafico2.png?version=1&modificationDate=1380654979000&api=v2"><br /></span>
</p>
<p class="MsoNormal">
<span style="font-size: 10.0pt; line-height: 13.0pt;"><img
class="confluence-embedded-image"
src="http://tdn.totvs.com/download/attachments/80970184/grid.png?version=1&modificationDate=1380654979000&api=v2"
data-image-src="http://tdn.totvs.com/download/attachments/80970184/grid.png?version=1&modificationDate=1380654979000&api=v2"></span>
</p>
<p class="MsoNormal">
<strong style="font-size: 10.0pt; line-height: 13.0pt;">1. Register
the data service in Fluig.</strong>
</p>
<p class="MsoNormal">To register the graph data service, just send
an asynchronous message to Fluig.</p>
<p class="MsoNormal">The developer must use the event
"REGISTER_CHART_SERVICE". You need to pass an object type
ChartServiceVO with the data of the data service in question.</p>
<p class="MsoNormal">
The object ChartServiceVO, available in package
com.totvs.technology.wcm.common.chart, is composed by the following
elements:<br /> <span style="font-size: 10.0pt; line-height: 13.0pt;">String
id: graph service code<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">String
description: graph service description<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">String
ParametersRest: URL of the rest service that will return the
parameters<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">String
dataRest: URL of the rest service that will return the graph data</span>
</p>
<p class="MsoNormal">
<strong>Example:</strong>
</p>
<p class="MsoNormal">
ChartServiceVO ecm1 = new ChartServiceVO("ECM1", "ECM - Volumes: Space
Used (Per Volume in %)");<br /> <span
style="font-size: 10.0pt; line-height: 13.0pt;">ecm1.setDataRest(“</span><a
href="http://localhost:8080/portal/ecm/api/rest/ecm/volume/chartDataByVolume"
style="font-size: 10.0pt; line-height: 13.0pt;" class="external-link"
rel="nofollow">http://localhost:8080/portal/ecm/api/rest/ecm/volume/chartDataByVolume</a><span
style="font-size: 10.0pt; line-height: 13.0pt;">");<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">ecm1.setParametersRest(“</span><a
href="http://localhost:8080/portal/ecm/api/rest/ecm/volume/chartParametersByVolume"
style="font-size: 10.0pt; line-height: 13.0pt;" class="external-link"
rel="nofollow">http://localhost:8080/portal/ecm/api/rest/ecm/volume/chartParametersByVolume</a><span
style="font-size: 10.0pt; line-height: 13.0pt;">");<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">IntegrationUtil.sendAsyncMessage(WCMAsyncEvents.REGISTER_CHART_SERVICE.getEvent(),
ecm1);</span>
</p>
<p class="MsoNormal">This record must be run each time the
application is deployed, that is, every time Fluig is up. In order to
do that, we suggest that a servlet is created in your application with
the option loadOnStartup = 1, which will perform this task.</p>
<p class="MsoNormal">
<strong>2. Parameter Services</strong><span
style="font-size: 10.0pt; line-height: 13.0pt; text-indent: -24.0px;"> </span>
</p>
<p class="MsoNormal">
<span
style="font-size: 10.0pt; line-height: 13.0pt; text-indent: -24.0px;">This
rest service must return a list of ChartParameterVO, which will
contain the parameters that your data service will need to supply the
graph data. Based on this service, Fluig will build the configuration
screen.<br /> <br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">ChartParameterVO
(com.totvs.technology.wcm.common.chart package) is composed by the
following elements:<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">int code
id: sequential numeric code that will be used for subsequent data
search<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">String
title: field name as it will appear on the screen<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">String
type: field type (ChartParameterVO.TYPE_STRING,
ChartParameterVO.TYPE_NUMBER, ChartParameterVO.TYPE_DATA or
ChartParameterVO.TYPE_BOOLEAN)<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">String
AllowedList:iIf the field is of the string type, options can be
provided for the user to select from a list. These options are
separated by ";"<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">boolean
multipleSelection - > true/false, if it allows multiple selection or
not, if AllowedList is in use<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">String
value - > Initial value, if any</span>
</p>
<p class="MsoNormal">
<strong>Example:<br /></strong><span
style="font-size: 10.0pt; line-height: 13.0pt;">List<ChartParameterVO>
params = new ArrayList<>();<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">ChartParameterVO
param1 = new ChartParameterVO();<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">param1.setCode(1);<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">param1.setTitle("Código
do Item");<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">param1.setType(ChartParameterVO.TYPE_STRING);<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">param1.setAllowedList(“Item
1;Item 2;Item 3”);<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">param1.setMultipleSelection(ChartParameterVO.SELECTION_UNIQUE);<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">params.add(param1);</span>
</p>
<p class="MsoNormal">
ChartParameterVO param2 = new ChartParameterVO();<br /> <span
style="font-size: 10.0pt; line-height: 13.0pt;">param2.setCode(2);<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">param2.setTitle("Display
only active items");<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">param2.setType(ChartParameterVO.TYPE_BOOLEAN);<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">params.add(param2);<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">return params;<br />
<span style="font-size: 10.0pt; line-height: 13.0pt;"><br />
<br /> <strong>3. Data Service</strong><br /> <br />The REST
service must return a </span><span
style="font-size: 10.0pt; font-family: Consolas; color: black; background: silver;">ChartVO</span><span
style="font-size: 10.0pt; font-family: Consolas; color: black;">,
with the data to display the graph.<br />
</span>
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">ChartVO
(com.totvs.technology.wcm.common.chart package) is composed by the
following elements:<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">String
title: title that will be displayed in the graph<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">String
description: graph description<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">String
type: graph type (ChartTypes.column.getName(),
ChartTypes.pie.getName(), ChartTypes.table.getName()<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">Map<String,
Object>[] source: graph data<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">ChartCategoryVO
category: categories<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">ChartSerieGroupVO[]
seriesGroups: groups of series</span>
</p>
<p class="MsoNormal">
<strong>Example for a Pie chart:</strong>
</p>
<p class="MsoNormal">
ChartVO result = new ChartVO("Espaço utilizado", "Volume " +
codVolFisic,ChartTypes.pie.getName());<br /> <span
style="font-size: 10.0pt; line-height: 13.0pt; text-indent: -35.4pt;">Map<String,
Object>[] source = new Map[2];<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">Map<String,
Object> data0 = new HashMap<String, Object>();<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">data0.put("label","Utilizado");<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">data0.put("size",80);<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">source[0] =
data0;</span>
</p>
<p class="MsoNormal">
Map<String, Object> data1 = new HashMap<String, Object>();<br />
<span style="font-size: 10.0pt; line-height: 13.0pt;">data1.put("label","Livre");<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">data1.put("size",20);<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">source[1] =
data1;<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">result.setSource(source);</span>
</p>
<p class="MsoNormal">
ChartSerieGroupVO[] seriesGroups = new ChartSerieGroupVO[1];<br /> <span
style="font-size: 10.0pt; line-height: 13.0pt;">ChartSerieGroupVO
serieGroup = new ChartSerieGroupVO(ChartTypes.pie.getName(),"label");<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">ChartSerieVO[]
series = new ChartSerieVO[1];<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">ChartSerieVO
serie = new ChartSerieVO("size","label");<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">series[0]
= serie;<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">serieGroup.setSeries(series);<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">seriesGroups[0]
= serieGroup;</span>
</p>
<p class="MsoNormal">
result.setSeriesGroups(seriesGroups);<br /> <span
style="font-size: 10.0pt; line-height: 13.0pt;">return result;</span>
</p>
<p class="MsoNormal">
<strong>Example for a Column chart:<br /></strong><span
style="font-size: 10.0pt; line-height: 13.0pt;">ChartVO result
= new ChartVO("Espaço utilizado","Todos os
volumes",ChartTypes.column.getName());</span>
</p>
<p class="MsoNormal">Map<String, Object>[] source = new
Map[2]; </p>
<p class="MsoNormal">
Map<String, Object> data0 = new HashMap<String, Object>();<br />
<span style="font-size: 10.0pt; line-height: 13.0pt;">data0.put("label",”Item
1”);<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">data0.put("total",100);<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">data0.put("used",40);<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">data0.put("free",60);<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">source[0] =
data0;</span>
</p>
<p class="MsoNormal">
Map<String, Object> data0 = new HashMap<String, Object>();<br />
<span style="font-size: 10.0pt; line-height: 13.0pt;">data0.put("label",”Item
2”););<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">data0.put("total",120);<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">data0.put("used",60);<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">data0.put("free",60);<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">source[1] =
data0;</span>
</p>
<p class="MsoNormal">result.setSource(source);</p>
<p class="MsoNormal">
ChartCategoryVO category = new ChartCategoryVO("label");<br /> <span
style="font-size: 10.0pt; line-height: 13.0pt;">result.setCategory(category);</span>
</p>
<p class="MsoNormal">
ChartSerieGroupVO[] seriesGroups = new ChartSerieGroupVO[1];<br /> <span
style="font-size: 10.0pt; line-height: 13.0pt;">ChartSerieGroupVO
serieGroup = new
ChartSerieGroupVO(ChartTypes.column.getName(),"Espaço(Mb)");</span>
</p>
<p class="MsoNormal">
ChartAxiVO axis = new ChartAxiVO(20,true,"Espaço(Mb)");<br /> <span
style="font-size: 10.0pt; line-height: 13.0pt;">serieGroup.setValueAxis(axis);</span>
</p>
<p class="MsoNormal">ChartSerieVO[] series = new ChartSerieVO[3];</p>
<p class="MsoNormal">
ChartSerieVO total = new ChartSerieVO("total","Espaço Total");<br />
<span style="font-size: 10.0pt; line-height: 13.0pt;">series[0]
= total;</span>
</p>
<p class="MsoNormal">
ChartSerieVO used = new ChartSerieVO("used","Espaço Utilizado");<br />
<span style="font-size: 10.0pt; line-height: 13.0pt;">series[1]
= used;</span>
</p>
<p class="MsoNormal">
ChartSerieVO free = new ChartSerieVO("free","Espaço Livre");<br /> <span
style="font-size: 10.0pt; line-height: 13.0pt;">series[i] =
free;</span>
</p>
<p class="MsoNormal">
serieGroup.setSeries(series);<br /> <span
style="font-size: 10.0pt; line-height: 13.0pt;">seriesGroups[0]
= serieGroup;</span>
</p>
<p class="MsoNormal">result.setSeriesGroups(seriesGroups);</p>
<p class="MsoNormal">return this.buildResponse(result);</p>
<p class="MsoNormal">
<strong>Example for a Table chart:</strong>
</p>
<p class="MsoNormal">ChartVO result = new ChartVO("Espaço
utilizado","Todos os volumes",ChartTypes.table.getName());</p>
<p class="MsoNormal">Map<String, Object>[] source = new Map[2];</p>
<p class="MsoNormal">
Map<String, Object> data0 = new HashMap<String, Object>();<br />
<span style="font-size: 10.0pt; line-height: 13.0pt;">data0.put("label",”Item
1”);<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">data0.put("total",100);<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">data0.put("used",40);<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">data0.put("free",60);<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">source[0] =
data0;</span>
</p>
<p class="MsoNormal">
Map<String, Object> data0 = new HashMap<String, Object>();<br />
<span style="font-size: 10.0pt; line-height: 13.0pt;">data0.put("label",”Item
2”););<br />
</span><span style="font-size: 10.0pt; line-height: 13.0pt;">data0.put("total",120);<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">data0.put("used",60);<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">data0.put("free",60);<br /></span><span
style="font-size: 10.0pt; line-height: 13.0pt;">source[1] =
data0;</span>
</p>
<p class="MsoNormal">result.setSource(source);</p>
<p class="MsoNormal">ChartSerieGroupVO[] seriesGroups = new
ChartSerieGroupVO[1];</p>
<p class="MsoNormal">ChartSerieGroupVO serieGroup = new
ChartSerieGroupVO(ChartTypes.table.getName(),"Espaço(Mb)");  
   </p>
<p class="MsoNormal">ChartAxiVO axis = new
ChartAxiVO(20,true,"Espaço(Mb)");</p>
<p class="MsoNormal">serieGroup.setValueAxis(axis);</p>
<p class="MsoNormal">ChartSerieVO[] series = new ChartSerieVO[4];</p>
<p class="MsoNormal">
ChartSerieVO label = new ChartSerieVO("label","Item");<br /> <span
style="font-size: 10.0pt; line-height: 13.0pt;">series[0] =
label;</span>
</p>
<p class="MsoNormal">
ChartSerieVO total = new ChartSerieVO("total","Espaço Total");<br />
<span style="font-size: 10.0pt; line-height: 13.0pt;">series[1]
= total;</span>
</p>
<p class="MsoNormal">
ChartSerieVO used = new ChartSerieVO("used","Espaço Utilizado");<br />
<span style="font-size: 10.0pt; line-height: 13.0pt;">series[2]
= used;</span>
</p>
<p class="MsoNormal">
ChartSerieVO free = new ChartSerieVO("free","Espaço Livre");<br /> <span
style="font-size: 10.0pt; line-height: 13.0pt;">series[3] =
free;</span>
</p>
<p class="MsoNormal">
serieGroup.setSeries(series);<br /> <span
style="font-size: 10.0pt; line-height: 13.0pt;">seriesGroups[0]
= serieGroup;</span>
</p>
<p class="MsoNormal">result.setSeriesGroups(seriesGroups);</p>
<p class="MsoNormal">return this.buildResponse(result);</p>
</div> |