Focal Point
[SOLVED] JSCHART datatables drillDown

This topic can be found at:
https://forums.informationbuilders.com/eve/forums/a/tpc/f/7971057331/m/1907066096

August 06, 2018, 10:51 AM
JACQUETL
[SOLVED] JSCHART datatables drillDown
Hi

Is it possible to add drilldown on column N2 on JSCHART ?
TYPE DATA attribute style don't Work -Frowner

Thanks

  

ENGINE INT CACHE SET ON


-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
BY CAR.ORIGIN.COUNTRY
BY CAR.COMP.CAR
BY CAR.CARREC.MODEL
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET HTMLENCODE ON
ON GRAPH SET GRAPHDEFAULT OFF
ON GRAPH SET ARGRAPHENGIN JSCHART
ON GRAPH SET EMBEDHEADING ON
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); 
setCurveFitEquationDisplay(false); 
setPlace(true); 

*END
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, ORIENTATION=LANDSCAPE, $
TYPE=DATA, COLUMN=N1, BUCKET= >row, $
TYPE=DATA, COLUMN=N2, BUCKET=tooltip,$
TYPE=DATA, COLUMN=N3, BUCKET= >row, $
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

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


Webfocus 8.201M.
Windows
InfoAssist +
Chrome, IE, Excel, HTML; PDF, AHTML,GRAPH
August 06, 2018, 11:39 AM
BabakNYC
It seems like you can only drill into Measures.
  

ENGINE INT CACHE SET ON
SET PAGE-NUM=NOLEAD
-DEFAULTH &WF_HTMLENCODE=OFF;
SET HTMLENCODE=&WF_HTMLENCODE

SET ARGRAPHENGINE=JSCHART
-DEFAULTH &WF_EMPTYREPORT=ON;
SET EMPTYREPORT=&WF_EMPTYREPORT

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
BY CAR.ORIGIN.COUNTRY
BY CAR.COMP.CAR
BY CAR.CARREC.MODEL
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET GRWIDTH 1
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 DATAGRID
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_SCRIPT

setPieDepth(0);
setPieTilt(0);
setDepthRadius(0); 
setCurveFitEquationDisplay(false); 
setPlace(true); 

*END
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, ORIENTATION=LANDSCAPE, $
TYPE=DATA, COLUMN=N1, BUCKET=row, $
TYPE=DATA, COLUMN=N2, BUCKET=row, $
TYPE=DATA, COLUMN=N3, BUCKET=row, $
TYPE=DATA, COLUMN=N4, ALT='car detail', TARGET='_blank', BUCKET=measure, FOCEXEC=IBFS:/WFC/Repository/Public/car_detail.fex(COUNTRY=CAR.ORIGIN.COUNTRY CAR=CAR.COMP.CAR MODEL=CAR.CARREC.MODEL), $
*GRAPH_SCRIPT

setReportParsingErrors(false);
setSelectionEnableMove(false);
*GRAPH_JS_FINAL
"pieProperties": {
    "holeSize": "0%"
},
"agnosticSettings": {
    "chartTypeFullName": "DataGrid"
}

*END
ENDSTYLE
END

-RUN



WebFOCUS 8206, Unix, Windows
August 06, 2018, 02:16 PM
Doug
So, why are you using "DATAGRID"? Whyt not use the baster TAB LE FILE request ON TABLE HOLD FORMAT (AHTML or HTML)?

Here's a sample. 
-* File: IBFS:/Dev/WFC/Repository/KGPCo_IT/Doug/Procedure10.fex Created by WebFOCUS AppStudio
ENGINE INT CACHE SET ON
SET PAGE-NUM=NOLEAD
-DEFAULTH &WF_HTMLENCODE=OFF;
SET HTMLENCODE=&WF_HTMLENCODE

SET ARGRAPHENGINE=JSCHART
-DEFAULTH &WF_EMPTYREPORT=ON;
SET EMPTYREPORT=&WF_EMPTYREPORT

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';
TABLE FILE CAR
HEADING
"DRILLDOWN ON ANYTHING"
SUM CAR.BODY.SALES
BY CAR.ORIGIN.COUNTRY
BY CAR.COMP.CAR
BY CAR.CARREC.MODEL
ON TABLE PCHOLD FORMAT HTML
ON TABLE SET AUTOFIT OFF
-*ON TABLE SET VZERO OFF
-*ON TABLE SET GRWIDTH 1
-*ON TABLE SET UNITS &WF_STYLE_UNITS
-*ON TABLE SET HAXIS &WF_STYLE_WIDTH
-*ON TABLE SET VAXIS &WF_STYLE_HEIGHT
-*ON TABLE SET LOOKGRAPH AHTML
-*ON GRAPH SET LOOKGRAPH DATAGRID
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_SCRIPT

setPieDepth(0);
setPieTilt(0);
setDepthRadius(0); 
setCurveFitEquationDisplay(false); 
setPlace(true); 

*END
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, ORIENTATION=LANDSCAPE, $
-*TYPE=DATA, COLUMN=N1, BUCKET=row, $
-*TYPE=DATA, COLUMN=N2, BUCKET=row, $
-*TYPE=DATA, COLUMN=N3, BUCKET=row, $
TYPE=DATA, COLUMN=N4, ALT='car detail', TARGET='_blank', BUCKET=measure, FOCEXEC=IBFS:/WFC/Repository/Public/car_detail.fex(COUNTRY=CAR.ORIGIN.COUNTRY CAR=CAR.COMP.CAR MODEL=CAR.CARREC.MODEL), $
TYPE=DATA, COLUMN=N1, ALT='DD on Column 1', TARGET='_blank', FOCEXEC=IBFS:/WFC/Repository/Public/car_detail.fex(COUNTRY=CAR.ORIGIN.COUNTRY CAR=CAR.COMP.CAR MODEL=CAR.CARREC.MODEL), $
TYPE=DATA, COLUMN=N2, ALT='DD on Column 2', TARGET='_blank', FOCEXEC=IBFS:/WFC/Repository/Public/car_detail.fex(COUNTRY=CAR.ORIGIN.COUNTRY CAR=CAR.COMP.CAR MODEL=CAR.CARREC.MODEL), $
TYPE=DATA, COLUMN=N3, ALT='DD on Column 3', TARGET='_blank', FOCEXEC=IBFS:/WFC/Repository/Public/car_detail.fex(COUNTRY=CAR.ORIGIN.COUNTRY CAR=CAR.COMP.CAR MODEL=CAR.CARREC.MODEL), $
TYPE=HEADING, ALT='DD on HEADING', TARGET='_blank', FOCEXEC=IBFS:/WFC/Repository/Public/car_detail.fex(COUNTRY=CAR.ORIGIN.COUNTRY CAR=CAR.COMP.CAR MODEL=CAR.CARREC.MODEL), $
-**GRAPH_SCRIPT
-*
-*setReportParsingErrors(false);
-*setSelectionEnableMove(false);
-**GRAPH_JS_FINAL
-*"pieProperties": {
-*    "holeSize": "0%"
-*},
-*"agnosticSettings": {
-*    "chartTypeFullName": "DataGrid"
-*}
-*
-**END
ENDSTYLE
END

-RUN

August 07, 2018, 02:59 AM
JACQUETL
quote:
BabakNYC


I'm sorry BabakNYC, i will test your code, but not drill appear ? Confused


Webfocus 8.201M.
Windows
InfoAssist +
Chrome, IE, Excel, HTML; PDF, AHTML,GRAPH
August 07, 2018, 03:00 AM
JACQUETL
@doug :
User uses discovery (IA +) and the grid is proposed


Webfocus 8.201M.
Windows
InfoAssist +
Chrome, IE, Excel, HTML; PDF, AHTML,GRAPH
August 07, 2018, 08:18 AM
BabakNYC
Have you tried the example on a different browser?


WebFOCUS 8206, Unix, Windows
August 07, 2018, 08:34 AM
JACQUETL
Hello

I tested IE and Chrome Browser.
Same result : no Hyperlink


Webfocus 8.201M.
Windows
InfoAssist +
Chrome, IE, Excel, HTML; PDF, AHTML,GRAPH
August 07, 2018, 08:37 AM
BabakNYC
How about this example? Do you see a link when you hover over the pie?
  
ENGINE INT CACHE SET ON
SET PAGE-NUM=NOLEAD
-DEFAULTH &WF_HTMLENCODE=OFF;
SET HTMLENCODE=&WF_HTMLENCODE

SET ARGRAPHENGINE=JSCHART
-DEFAULTH &WF_EMPTYREPORT=ON;
SET EMPTYREPORT=&WF_EMPTYREPORT

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
BY CAR.ORIGIN.COUNTRY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET GRWIDTH 1
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 PIE
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_SCRIPT

setPieDepth(0);
setPieTilt(0);
setDepthRadius(0); 
setCurveFitEquationDisplay(false); 
setPlace(true); 
setPieFeelerTextDisplay(1); 

*END
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$
TYPE=REPORT, TITLETEXT=&WF_TITLE.QUOTEDSTRING, ORIENTATION=LANDSCAPE, $
TYPE=DATA, COLUMN=N1, BUCKET=color, $
TYPE=DATA, COLUMN=N2, ALT='car detail', TARGET='_blank', BUCKET=measure, FOCEXEC=IBFS:/WFC/Repository/Public/car_detail.fex(COUNTRY=CAR.ORIGIN.COUNTRY), $
*GRAPH_SCRIPT

setReportParsingErrors(false);
setSelectionEnableMove(false);
*GRAPH_JS_FINAL
"pieProperties": {
"holeSize": "0%"
},
"agnosticSettings": {
"chartTypeFullName": "Pie_Multi"
}

*END
ENDSTYLE
END

-RUN



WebFOCUS 8206, Unix, Windows
August 07, 2018, 08:43 AM
JACQUETL
Yes with pie it's ok but not with datatables :-(

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


Webfocus 8.201M.
Windows
InfoAssist +
Chrome, IE, Excel, HTML; PDF, AHTML,GRAPH
August 08, 2018, 02:14 PM
vaayu
We had the same issue so we ended up using datatables outside of HTML5 Extension by holding it as HTMTABLE

 
TABLE FILE CAR
SUM SALES DEALER_COST SEATS
BY CAR
BY COUNTRY
ON TABLE SET PAGE-NUM NOLEAD
ON TABLE SET DROPBLNKLINE ON
ON TABLE NOTOTAL
ON TABLE HOLD AS HTBL FORMAT HTMTABLE
ON TABLE SET STYLE *
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$
TYPE=TITLE,
     COLOR='BLACK',
     BACKCOLOR='WHITE',
$
TYPE=REPORT,
     LINES-PER-PAGE=UNLIMITED,
$
TYPE=DATA, COLUMN=N1, BUCKET= >row,
 FOCEXEC=IBFS:/WFC/Repository/Test/Car_Chart_with_Drilldown.fex(COUNTRY=N2),
	 TARGET='_BLANK',
$
ENDSTYLE
END

-HTMLFORM BEGIN
<!DOCTYPE html >
<html>
<head>
	<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.16/css/jquery.dataTables.min.css">
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
    <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/t/dt/dt-1.10.11,fc-3.2.1,fh-3.1.1,r-2.0.2,se-1.1.2/datatables.min.css"/>
<script type="text/javascript" src="https://cdn.datatables.net/t/dt/dt-1.10.11,fc-3.2.1,fh-3.1.1,r-2.0.2,se-1.1.2/datatables.min.js"></script>
<style>
.dataTables_wrapper {
	font-family: Tahoma,Verdana,Arial,sans-serif;
	font-size: 8pt;
}
table.dataTable tbody th, table.dataTable tbody td {
    padding: 5px 10px;
}
</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, "order": [[ 3, "asc" ]],
											columnDefs: [
        									{ 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"] ],
								ordering: true,
								filter: true
							}); //initialize table with no initial order
} );

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

August 09, 2018, 02:38 AM
JACQUETL
quote:
vaayu


Oh great vaayu ! Thanks it's good

Good One

just à last question : how can you find good JS script ?

too bad End user can not do this, maybe next release

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


Webfocus 8.201M.
Windows
InfoAssist +
Chrome, IE, Excel, HTML; PDF, AHTML,GRAPH