Hello guys,
I'm finally using the HTML5 extension to show the grid (datatable) extension but I see some challenge formatting a field and drilldowns on a field.


I tried to make the field Alpha using FTOA, FPRINT, EDIT etc., but nothing helped. ANyone else tried this yet?
I'm using 8202M AppStudio
Please let me know your thoughts.

This message has been edited. Last edited by: vaayu,

Can you replicate with CAR file and share your code ?

Here's some sample code, Trying to format the number, I tried FTOA, FPRINT etc., also hoping to be able to use drilldown but not having any luck so far. Please let me know of any thoughts.

 
-* File: IBFS:/Attenti/WFC/Repository/Test/Chart1.fex Created by WebFOCUS AppStudio
ENGINE INT CACHE SET ON
SET PAGE-NUM=NOLEAD
SET ARGRAPHENGINE=JSCHART
SET EMBEDHEADING=ON
SET GRAPHDEFAULT=OFF
-DEFAULTH &WF_STYLE_UNITS='PIXELS';
-DEFAULTH &WF_STYLE_HEIGHT='405.0';
-DEFAULTH &WF_STYLE_WIDTH='770.0';
-DEFAULTH &WF_TITLE='WebFOCUS Report';
DEFINE FILE CAR
SALES_ALPHA/A4 = EDIT(SALES,'9999');
END
GRAPH FILE car
-* Created by Info Assist for Graph
SUM CAR.BODY.SEATS
COMPUTE SALESA/A4 = EDIT(CAR.BODY.SALES,'9999');

BY CAR.ORIGIN.COUNTRY
BY CAR.COMP.CAR
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET UNITS &WF_STYLE_UNITS
ON GRAPH SET HAXIS &WF_STYLE_WIDTH
ON GRAPH SET VAXIS &WF_STYLE_HEIGHT
ON GRAPH SET LOOKGRAPH EXTENSION
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_SCRIPT
setPieDepth(0);
setPieTilt(0);
setDepthRadius(0); 
setPlace(true); 
setCurveFitEquationDisplay(false); 
*END
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, $
TYPE=DATA, COLUMN=N1, BUCKET= >row, 
FOCEXEC=IBFS:/WFC/Repository/Test/Car_DataTable.fex(PARM1=CAR.BODY.SALES), $
$
TYPE=DATA, COLUMN=N2, BUCKET= >row, $
TYPE=DATA, COLUMN=N3, BUCKET= >measure, $
TYPE=DATA, COLUMN=N4, BUCKET= >measure, $
*GRAPH_SCRIPT
setReportParsingErrors(false);
setSelectionEnableMove(false);
*GRAPH_JS_FINAL
"pieProperties": {
    "holeSize": "0%"
},
"chartType": "com.ibi.datatables",
"agnosticSettings": {
    "chartTypeFullName": "com.ibi.datatables"
}
*END
ENDSTYLE
END
-RUN
 
-*IA_GRAPH_FINISH
 

FYI: I have a case open to see what they suggest. No word yet.

Try EDIT2 instead and get rid of the DEFINE.

  
ENGINE INT CACHE SET ON
SET PAGE-NUM=NOLEAD
SET ARGRAPHENGINE=JSCHART
SET EMBEDHEADING=ON
SET GRAPHDEFAULT=OFF
-DEFAULTH &WF_STYLE_UNITS='PIXELS';
-DEFAULTH &WF_STYLE_HEIGHT='405.0';
-DEFAULTH &WF_STYLE_WIDTH='770.0';
-DEFAULTH &WF_TITLE='WebFOCUS Report';

GRAPH FILE car
-* Created by Info Assist for Graph
SUM CAR.BODY.SALES
COMPUTE SALESA/A15 = EDIT2(CAR.BODY.SALES,'I6');

BY CAR.ORIGIN.COUNTRY
BY CAR.COMP.CAR
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET UNITS &WF_STYLE_UNITS
ON GRAPH SET HAXIS &WF_STYLE_WIDTH
ON GRAPH SET VAXIS &WF_STYLE_HEIGHT
ON GRAPH SET LOOKGRAPH EXTENSION
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_SCRIPT
setPieDepth(0);
setPieTilt(0);
setDepthRadius(0); 
setPlace(true); 
setCurveFitEquationDisplay(false); 
*END
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, $
TYPE=DATA, COLUMN=N1, BUCKET= >row, 
FOCEXEC=IBFS:/WFC/Repository/Test/Car_DataTable.fex(PARM1=CAR.BODY.SALES), $
$
TYPE=DATA, COLUMN=N2, BUCKET= >row, $
TYPE=DATA, COLUMN=N3, BUCKET= >measure, $
TYPE=DATA, COLUMN=N4, BUCKET= >measure, $
*GRAPH_SCRIPT
setReportParsingErrors(false);
setSelectionEnableMove(false);
*GRAPH_JS_FINAL
"pieProperties": {
    "holeSize": "0%"
},
"chartType": "com.ibi.datatables",
"agnosticSettings": {
    "chartTypeFullName": "com.ibi.datatables"
}
*END
ENDSTYLE
END
-RUN
 
-*IA_GRAPH_FINISH

No effect on EDIT2 for me. Thanks for the tip though, does it work for you?

Yes, both format conversion and drill down work on mine. I'm using 8202 Gen 143. What Gen are you on?

What exactly are you seeing when you use EDIT2? First try using it in a Report to see if the numbers come out right.

I have 8202m with gen 14. Let me try it on another release and see if thats an issue.
The output is same for SALES and SALESA fields for me and no drillable link (on chrome browser)


Thanks!

You should also make sure you have the latest version of the D3 chart installed.

So I have tried on 8202 Gen 88, same effect no luck. Can't get rid of the decimals and no drilldowns. I'm also using the latest d3 zip file from github.

Any thoughts?

I didn't notice the Integer field IS showing decimals till you pointed it out. So, my example isn't working as I thought. It seems like this chart extension forces a decimal no matter what you do.

However, the drill down is working for me.

BabakNYC,
Did you have any custom library thats making the drilldown to work? ALso please share a screenshot, curious to see if you have the hyperlinks like we'd see in a report. I also tried on another WF instance 8201 Gen 9 but no luck yet. It seems really odd for drilldown to not work. I'll have to pursue it with cust support.

The drill down has to be on a number. When it's in a chart, you don't get the usual blue link. The drill down presents when you hover over the number with the drill down and the pointer changes to a hand indicating the value is a drillable one. I'm using the D3 charts available on github for IBI.

We were able to get this working as a TABLE request instead, was really hoping the HTML5 extension would do the same this works for now! Thanks!

 

ENGINE INT CACHE SET ON
SET PAGE-NUM=NOLEAD
SET ARGRAPHENGINE=JSCHART
SET EMBEDHEADING=ON
SET GRAPHDEFAULT=OFF


TABLE FILE car
-* Created by Info Assist for Graph
SUM CAR.BODY.SALES

BY COUNTRY
BY CAR.COMP.CAR
ON TABLE SET BYDISPLAY ON
ON TABLE HOLD AS CARRPT FORMAT HTML
ON TABLE SET HTMLEMBEDIMG ON
ON TABLE SET HTMLCSS ON
ON TABLE SET STYLE *
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$


     SUMMARY='Cars',
     TITLETEXT='Cars',
$
TYPE=REPORT,
     LINES-PER-PAGE=UNLIMITED,
     ARGRAPHENGINE=JSCHART,

$
TYPE=REPORT,BORDER-TOP=LIGHT,
-*   BORDER-TOP-STYLE=SOLID,
   BORDER-TOP-COLOR=DIM GREY,$
TYPE=DATA, COLUMN=N1, BUCKET= >row,

 FOCEXEC=IBFS:/WFC/Repository/Test/Car_drill( \
     OFFENDER_ID=N2 \
     ),
TARGET='_BLANK',
$
ENDSTYLE
END
-HTMLFORM BEGIN
<!doctype html>
<html>
<head>
<script type="text/javascript" src="/ibi_apps/jquery/js/jquery.min.js"></script>
<script type="text/javascript" src="/ibi_apps/tdg/jschart/distribution/tdgchart-min.js"></script>
<link rel="stylesheet" type="text/css" id="leafletCSSID" href="/ibi_apps/tdg/jschart/distribution/leaflet/leaflet.css">
<link rel="stylesheet" type="text/css" id="leafletDrawCSSID" href="/ibi_apps/tdg/jschart/distribution/leaflet/leaflet.draw.css">
<script type="text/javascript" src="/ibi_apps/tdg/jschart/distribution/extensions/com.ibi.datatables/com.ibi.datatables.js"></script>
<link rel="stylesheet" type="text/css" id="com.ibi.datatables__css__0" href="/ibi_apps/tdg/jschart/distribution/extensions/com.ibi.datatables/css/datatables.min.css">
<link rel="stylesheet" type="text/css" id="com.ibi.datatables__css__1" href="/ibi_apps/tdg/jschart/distribution/extensions/com.ibi.datatables/css/symbol.css">
<script type="text/javascript" src="/ibi_apps/tdg/jschart/distribution/extensions/com.ibi.datatables/lib/datatables-w-jquery.min.js"></script>
<script type="text/javascript" src="/ibi_apps/tdg/jschart/distribution/extensions/com.ibi.datatables/lib/lasso.js">
</script>
<style>
.dataTables_wrapper {
font-family: Verdana;
font-size: 8pt;

}
</style>
<script>

$(document).ready( function ()
{
$("#datatable1 table:first-of-type").attr("id", "thetable"); //assign an id to the table generated by the focexec
$("#thetable").attr("width", "100%"); //make it 100% wide
$("#thetable tr:first-of-type").wrap("<thead></thead>");     //dataTables requires <thead> tags around the headers
$('tr').last().remove();
$("#thetable").dataTable({  responsive: true,
columnDefs: [
-* { responsivePriority: 5, targets: 8 },
-* { responsivePriority: 3, targets: 3 },
-* { responsivePriority: 2, targets: 2 },
        { responsivePriority: 3, targets: 1 },
{ responsivePriority: 1, targets: 0 }
    ],
breakpoints: [
            { name: 'desktop', width: Infinity },
            { name: 'tablet',  width: 800 },
            { name: 'fablet',  width: 768 },
            { name: 'phone',   width: 420 },
        ],
paging: true,
"lengthMenu": [ [10, 20, 25, 50, -1], [10, 20, 25, 50, "All"] ],
-* info: true,
ordering: true,
filter: true
}); //initialize table with no initial order
} );

</script>
</head>
<body>
<div id="datatable1">
!IBI.FIL.CARRPT;
</div>
</body>
-HTMLFORM END