I am trying to create a data table with the last column displaying sparkline mini charts. I found the following discussion in the forum. It's quite helpful in getting me started. However, it only works in PDF. Does anyone know how to make this work in HTML?

Specifically I have a couple questions:

1. Does the IMAGE attribute work for HTML output?

2. As in the previous discussion, if I save the sparkline images as hold files, how can I refer to them as image URLs later in my HTML report? I tried holding them in FOCCACHE and added "FOCCACHE/" to the image file name, and it didn't work.

http://forums.informationbuild...1057331/m/2407030816

You have to create the complete image tag via a define or compute. You also need to use the EDAGET command to retrieve the image from the WFRS.

focexec:

-** fex: getimage
-** example EX EDAGET JPG,foccache/someimage,B
-DEFAULTH &TYPE='JPG'
-DEFAULTH &APPDIR='foccache'
-SET &FULL_FILE=&TYPE || ',' || &APPDIR || '/' || &FILE || ',B';
EX EDAGET &FULL_FILE  

The image tag will look like:

COMPUTE IMG/A100 = '<img src="/ibi_apps/WFServlet?IBIF_ex=getimage&|TYPE=PNG&|FILE=' || IMAGENAME || '" />';  

Can you demo that with the CAR file (SUM DCOST BY MODEL)?

JC, Francis found an easy method for producing sparklines in HTML using JQuery.

http://forums.informationbuild...1057331/m/4707004516

I saw the JQuery post too, and it's very interesting. But I still want to know whether it's doable purely within WebFocus, if only just for the sake of learning some new tricks (In this case, it is starting to look like a dark art).

dhagen, I have tried following your instructions to use EDAGET. I have been able to use it to send an image file to the browser. However, I can't understand how to go from that to constructing the image tag. Specifically, I don't understand how the "IMAGENAME" field in your code gets its value. Can you please explain?

Also, I saw your other posts on EDAGET and you mentioned that it only works in the reporting server, and NOT in Managed Reporting. Is that true? Is there a way around it?

Here is an example using EDAGET. I use the CENTORD table:

SET PAGE=NOPAGE
-RUN

APP HOLD BASEAPP
-RUN

GRAPH FILE CENTORD
SUM QUANTITY
BY PLANTLNG
ACROSS QUARTER

ON GRAPH SET GRAPHDEFAULT OFF
ON GRAPH HOLD AS ORD FORMAT PNG
ON GRAPH SET LOOKGRAPH VLINE
ON GRAPH SET HAXIS 100
ON GRAPH SET VAXIS 25
ON GRAPH SET 3D OFF
ON GRAPH SET GRAPHSTYLE *
setDepthAngle(0);                      // Turn off 2.5D
setDepthRadius(0);                     // Turn off 2 D
setExtendToFrameEdge(true);            // Extend graph to use entire presentation area.
setFillColor(getSeries(0),new Color(100 100 100)); // Change line color to Dark Grey.
setFootnoteDisplay(false);             // Turn off footnotes ... just in case.
setFrameDisplay(false);                // Turn off graph frame display
setGraphType(41);                      // Vertical Absolute Line Plot
setLegendAutomatic(false);             // Turn off legend automatic setting.
setLegendDisplay(false);               // Turn off legend
setLineWidth(getSeries(0),2);          // Smallest line width for series 0.
setMarkerShape(getSeries(0),0);        // Turn off marker shape for series 0.
setMarkerSize(getSeries(0),0);         // Turn off merker size for series 0.
setO1AxisLineDisplay(false);           // Turn off Ordinal (Category) Axis display
setO1LabelDisplay(false);              // Turn off Ordinal (Category) Axis Labels
setO1MajorGridDisplay(false);          // Turn off Ordinal (Category) Axis Major Grid lines
setO1TitleDisplay(false);              // Turn off title display for displayed series 0.
setSubtitleDisplay(false);             // Turn off subtitles.
setTitleDisplay(false);                // Turn off titles.
setToolTipDisplay(false);              // Turn off tool tips
setY1AxisLineDisplay(false);           // Turn off Numeric Axis display
setY1LabelDisplay(false);              // Turn off Numeric Axis Labels
setY1MajorGridDisplay(false);          // Turn off Numeric Axis Major Grid lines
setReportParsingErrors(false);
setSelectionEnableMove(false);
setTransparentBorderColor(getSeries(0),true);
setDepthRadius(0);
setUseSeriesShapes(true);
setMarkerSizeDefault(50);
setPlace(false);
setTransparentBorderColor(getChartBackground(),true);
setTransparentFillColor(getChartBackground(),true);
setTransparentFillColor(getFrame(),true);
setRect(getFrame(), new Rectangle(-16000,-16000,32000,32000)); // Set the graph display area to be the entire canvas.
// Make graph background transparent - See techsupport.informationbuilders.com/sps/60762508.html
setFillColor(getFrame(),new Color(255,255,255,0));             // Make graph background transparent and case 73502531
setFillColor(getChartBackground(),new Color(255,255,255,0));   // Make graph background transparent and case 73502531
ENDSTYLE
END
-RUN

TABLE FILE CENTORD
SUM
-* Determine counter to include correct Sparkline graph image
COMPUTE COUNTER_BASE/D3  = LAST COUNTER_BASE + 1; NOPRINT
COMPUTE COUNTER/D3       = COUNTER_BASE - 1; NOPRINT
COMPUTE IMAGE_NAME/A6 = 'ord' || LJUST(3,FTOA(COUNTER,'(D3c)','A3'),'A3'); NOPRINT
COMPUTE SPARK_IMAGE/A300 =
'<img border="0" alt="Order Quantity" src="/ibi_apps/WFServlet?IBIF_adhocfex=EX%20EDAGET%20PNG,BASEAPP/' || IMAGE_NAME || ',B"/>'; AS 'Order Quantity'

BY PLANTLNG

SUM
QUANTITY AS ''

BY PLANTLNG AS 'Plant'
ACROSS QUARTER AS ''

ON TABLE SET HTMLCSS ON
ON TABLE SET STYLE *
TYPE=REPORT, FONT=Arial, SIZE=9, GRID=ON, $
TYPE=TITLE, STYLE=BOLD, $
TYPE=REPORT, COLUMN=SPARK_IMAGE, SEQUENCE=99, $
END

The report looks like this:


Image in Dropbox

I hold the images in baseapp - you can easily change that to a mapped application folder. The image name length is 8 characters max. You have a maximum of four characters for the image prefix - I named the images "ord..." using the code ON GRAPH HOLD AS ORD FORMAT PNG. The other four characters are reserved for numbering, starting at zero. You have to watch out for null data - if the data for the sparkline is null an image is not created which means you either have to exclude the null data from the report section of the program or calculate the counter taking into account null data.

I use the STYLE tag "SEQUENCE" to change the position of the image column to be after the ACROSS values.

Francis, thank you so much for posting the sample code. Using IBIF_adhocfex is a neat trick I have learned from that.

My report can have multiple users running it at the same time, so I want to be able to hold and reference the image files per user session. I tried changing from holding in an app directory to FOCCACHE, but EDAGET failed. Can it work with FOCCACHE?

Foccache does work. Change the hold line to ON TABLE HOLD FOCCACHE/ORD FORMAT PNG.

Also, I would not suggest you use the IBIF_adhocfex. If you read the Best Practices for building and deploying applications, IB recommends that you put a
"protect" on it. Do yourself a favour and create a FEX like the one I put at the beginning of this post.

So, there are Best Practices for something that isn't documented, namely EDAGET and EDAPUT?

New code below, taking dhagen's suggestion into account.

Two things:
- I can't get this to work with foccache (important)
- I can't get this to work with the syntax ON GRAPH HOLD AS baseapp/ORD FORMAT PNG, have to use APP HOLD baseapp (not important)

SET PAGE=NOPAGE
-RUN

-SET &HOLDAPP = 'baseapp';
-*-SET &HOLDAPP = 'foccache';

APP HOLD &HOLDAPP
-RUN

GRAPH FILE CENTORD
SUM
QUANTITY AS ''
BY PLANTLNG
ACROSS QUARTER AS ''
ON GRAPH HOLD AS ORD FORMAT PNG

ON GRAPH SET GRAPHDEFAULT OFF
ON GRAPH SET LOOKGRAPH VLINE
ON GRAPH SET HAXIS 100
ON GRAPH SET VAXIS 25
ON GRAPH SET 3D OFF

ON GRAPH SET GRAPHSTYLE *
setDepthAngle(0);                      // Turn off 2.5D
setDepthRadius(0);                     // Turn off 2 D
setExtendToFrameEdge(true);            // Extend graph to use entire presentation area.
setFillColor(getSeries(0),new Color(100 100 100)); // Change line color to Dark Grey.
setFootnoteDisplay(false);             // Turn off footnotes ... just in case.
setFrameDisplay(false);                // Turn off graph frame display
setGraphType(41);                      // Vertical Absolute Line Plot
setLegendAutomatic(false);             // Turn off legend automatic setting.
setLegendDisplay(false);               // Turn off legend
setLineWidth(getSeries(0),2);          // Smallest line width for series 0.
setMarkerShape(getSeries(0),0);        // Turn off marker shape for series 0.
setMarkerSize(getSeries(0),0);         // Turn off merker size for series 0.
setO1AxisLineDisplay(false);           // Turn off Ordinal (Category) Axis display
setO1LabelDisplay(false);              // Turn off Ordinal (Category) Axis Labels
setO1MajorGridDisplay(false);          // Turn off Ordinal (Category) Axis Major Grid lines
setO1TitleDisplay(false);              // Turn off title display for displayed series 0.
setSubtitleDisplay(false);             // Turn off subtitles.
setTitleDisplay(false);                // Turn off titles.
setToolTipDisplay(false);              // Turn off tool tips
setY1AxisLineDisplay(false);           // Turn off Numeric Axis display
setY1LabelDisplay(false);              // Turn off Numeric Axis Labels
setY1MajorGridDisplay(false);          // Turn off Numeric Axis Major Grid lines
setReportParsingErrors(false);
setSelectionEnableMove(false);
setTransparentBorderColor(getSeries(0),true);
setDepthRadius(0);
setUseSeriesShapes(true);
setMarkerSizeDefault(50);
setPlace(false);
setTransparentBorderColor(getChartBackground(),true);
setTransparentFillColor(getChartBackground(),true);
setTransparentFillColor(getFrame(),true);
setRect(getFrame(), new Rectangle(-16000,-16000,32000,32000)); // Set the graph display area to be the entire canvas.
// Make graph background transparent - See techsupport.informationbuilders.com/sps/60762508.html
setFillColor(getFrame(),new Color(255,255,255,0));             // Make graph background transparent and case 73502531
setFillColor(getChartBackground(),new Color(255,255,255,0));   // Make graph background transparent and case 73502531
ENDSTYLE
END
-RUN

TABLE FILE CENTORD
SUM
-* Determine counter to include correct Sparkline graph image
COMPUTE COUNTER_BASE/D3  = LAST COUNTER_BASE + 1; NOPRINT
COMPUTE COUNTER/D3       = COUNTER_BASE - 1; NOPRINT
COMPUTE IMAGE_NAME/A6 = 'ord' || LJUST(3,FTOA(COUNTER,'(D3c)','A3'),'A3'); NOPRINT
COMPUTE SPARK_IMAGE/A300 =
-*'<img border="0" alt="Order Quantity" src="/ibi_apps/WFServlet?IBIF_adhocfex=EX%20EDAGET%20PNG,&HOLDAPP/' || IMAGE_NAME || ',B"/>'; AS 'Order Quantity'
'<img border="0" alt="Order Quantity" src="/ibi_apps/WFServlet?IBIF_ex=getimage&|TYPE=PNG&|APPDIR=&HOLDAPP&|FILE=' || IMAGE_NAME || ',B" />'; AS 'Order Quantity'

BY PLANTLNG

SUM
QUANTITY AS ''

BY PLANTLNG AS 'Plant'
ACROSS QUARTER AS ''

ON TABLE SET HTMLCSS ON
ON TABLE SET STYLE *
TYPE=REPORT, FONT=Arial, SIZE=9, GRID=ON, $
TYPE=TITLE, STYLE=BOLD, $
TYPE=REPORT, COLUMN=SPARK_IMAGE, SEQUENCE=99, $
END

This message has been edited. Last edited by: Francis Mariani,

Darryl, Francis--

Three questions:

• What makes GRAPH FILE ... create multiple files -- six of them in this case -- and name them ord1, ord2 ...?
  
  
• I take it EDAGET (at least with these parameters) returns the retrieved graphic file as the "requested document". Is that correct, and is it documented?
  
  
• The generated report (once loaded) fires off a separate call to WF report server for each of the sparkline graphics just created. So in all seven requests will be directed to WF. Is it possible, instead, for the generated img tags to reference the jpg files directly?

Here are my humble, non technical answers:

By default GRMERGE is set to off, hence separate graphs for the second BY/ACROSS statement. Try these:

   
SET GRMERGE=OFF

GRAPH FILE CENTORD
SUM QUANTITY
BY PLANTLNG
ACROSS QUARTER
END

SET GRMERGE=ON

GRAPH FILE CENTORD
SUM QUANTITY
BY PLANTLNG
ACROSS QUARTER
END

EDAGET isn't really documented, though Waz has made an attempt with EDAPUT.

The EDAGET method is good for multi-tier environments where the reporting server (the one that generates the graph images) cannot 'talk to' the web server (the one that displays the images). If the servers can 'talk to each other' or they're on the same box, then it's definitely better to use normal hyperlinks.

quote:

Originally posted by j.gross:

• What makes GRAPH FILE ... create multiple files -- six of them in this case -- and name them ord1, ord2 ...?
  
  
• I take it EDAGET (at least with these parameters) returns the retrieved graphic file as the "requested document". Is that correct, and is it documented?
  
  
• The generated report (once loaded) fires off a separate call to WF report server for each of the sparkline graphics just created. So in all seven requests will be directed to WF. Is it possible, instead, for the generated img tags to reference the jpg files directly?

1) FM answered that.
2) Yep, since version 2.1 of EDA. It is buried deep and I believe the last time I saw the complete doc was in a programmers reference manual for the EDA platform. I have to admit that I haven't seen it documented completely in a WF doc. Only the text retrieval command was documented, not the binary or hex references.
3) Yes, but you have to ensure the image location is web addressable. That then introduces a lot of issues, especially if your environment is a multi-tiered one.

I wouldn't be too worried about it. This is essentially a file streaming command, so the server does very little work with very little overhead. Also, the benefits of leveraging foccache to keep user requests automatically segmented far out weighs the effort you would have to do to make the requests unique and reference-able at the web tier.

You could embed the image directly into img tag using the data argument. However, you would have to build some custom process to convert the image into a base64 string for that to work. That would be a pretty cool approach to something like this!