Hi

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

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,

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

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

quote:

BabakNYC

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

@doug :
User uses discovery (IA +) and the grid is proposed

Have you tried the example on a different browser?

Hello

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

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

Yes with pie it's ok but not with datatables :-(

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

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
 

quote:

vaayu

Oh great vaayu ! Thanks it's good



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,