Focal Point Banner


As of December 1, 2020, Focal Point is retired and repurposed as a reference repository. We value the wealth of knowledge that's been shared here over the years. You'll continue to have access to this treasure trove of knowledge, for search purposes only.

Join the TIBCO Community
TIBCO Community is a collaborative space for users to share knowledge and support one another in making the best use of TIBCO products and services. There are several TIBCO WebFOCUS resources in the community.

  • From the Home page, select Predict: WebFOCUS to view articles, questions, and trending articles.
  • Select Products from the top navigation bar, scroll, and then select the TIBCO WebFOCUS product page to view product overview, articles, and discussions.
  • Request access to the private WebFOCUS User Group (login required) to network with fellow members.

Former myibi community members should have received an email on 8/3/22 to activate their user accounts to join the community. Check your Spam folder for the email. Please get in touch with us at community@tibco.com for further assistance. Reference the community FAQ to learn more about the community.


Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED] HTML 5 Chart Extension - KPI Table

Read-Only Read-Only Topic
Go
Search
Notify
Tools
[SOLVED] HTML 5 Chart Extension - KPI Table
 Login/Join
 
Member
posted
I am using the KPI Table extension detailed here: https://github.com/ibi/wf-exte...er/com.ibi.kpi.table. The readme mentions that the color (and other style properties) are controlled in the properties.json file. Is it possible to control the text-color at the fex-level instead of changing the properties.json file?

Here is a KPI Table using CAR:
GRAPH FILE CAR
SUM 
	SALES
	RETAIL_COST
	DEALER_COST
BY 	COUNTRY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
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
TYPE=DATA, COLUMN=N1, BUCKET= >group, $
TYPE=DATA, COLUMN=N2, BUCKET= >keymeasure, $
TYPE=DATA, COLUMN=N3, BUCKET= >measure, $
TYPE=DATA, COLUMN=N4, BUCKET= >measure, $
*GRAPH_SCRIPT
setReportParsingErrors(false);
setSelectionEnableMove(false);
*GRAPH_JS
"pieProperties": {
    "holeSize": "0%"
},
"chartType": "com.ibi.kpi.table",
"agnosticSettings": {
    "chartTypeFullName": "com.ibi.kpi.table"
}
*END
ENDSTYLE
END
-RUN
 
  

This message has been edited. Last edited by: FP Mod Chuck,


BARCHER
App Studio 8.203
Windows

 
Posts: 18 | Registered: February 02, 2015Report This Post
Expert
posted Hide Post
You could accomplish the same results by placing the appropriate TITLEs and DATA elements in a multiline HEADING, formatted as needed, using a simple TABLE FILE request.
 
Posts: 3132 | Location: Tennessee, Nashville area | Registered: February 23, 2005Report This Post
Expert
posted Hide Post
You can achieve changes to the properties within your fex by inserting a *GRAPH_JS_FINAL section relevant to the extension -

*GRAPH_JS_FINAL
"extensions": {
	"com.ibi.kpi.table": {
        "color": "#666",
        "shortenNumbers": true,
        "fontFamily": "'Open Sans'",
        "fontSize": "12px",
        "headingTitle": {
            "fontWeight": "400",
            "color": "inherit",
            "fontSize": "16px"	},
        "headingData": {
            "fontWeight": "700",
            "color": "inherit",
            "fontSize": "24px"
        },
        "columnTitle": {
            "fontWeight": "400",
            "color": "inherit",
            "fontSize": "14px"
        },
        "columnData": {
            "fontWeight": "700",
            "color": "inherit",
            "fontSize": "16px"
        }
    }
}
*END


This is true of any HTML5 extension. Just make sure that you enter the correct extension at the beginning.

If you have a default STY that your company uses, you could add any overrides, that your company dictates, to all the HTML5 extensions within that file.

T



In FOCUS
since 1986
WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
 
Posts: 5694 | Location: United Kingdom | Registered: April 08, 2004Report This Post
Expert
posted Hide Post
quote:
You could accomplish the same results by placing the appropriate TITLEs and DATA elements in a multiline HEADING, formatted as needed, using a simple TABLE FILE request.

Doug,

Have you tried a KPI.TABLE chart? It does more than what you are suggesting.

Try the sample code given by barcher and see the difference.


T



In FOCUS
since 1986
WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
 
Posts: 5694 | Location: United Kingdom | Registered: April 08, 2004Report This Post
Member
posted Hide Post
This is exactly what I am looking for, Tony. Thank you! I knew there should be a way to control the JS properties. I should be able to work this into our stylesheet too.

Here is an update to the sample fex. I changed the background to green using setFillColor() in the GRAPH_SCRIPT, and changed text-color to white and increased font-size of Country in GRAPH_JS_FINAL:
 
GRAPH FILE CAR
SUM 
	SALES
	RETAIL_COST
	DEALER_COST
BY 	COUNTRY
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
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
TYPE=DATA, COLUMN=N1, BUCKET= >group, $
TYPE=DATA, COLUMN=N2, BUCKET= >keymeasure, $
TYPE=DATA, COLUMN=N3, BUCKET= >measure, $
TYPE=DATA, COLUMN=N4, BUCKET= >measure, $
*GRAPH_SCRIPT
setReportParsingErrors(false);
setSelectionEnableMove(false);
-*-*	Changes the background-color to green
setFillColor(getChartBackground(),new Color(0,100,0));
*GRAPH_JS_FINAL
"pieProperties": {
    "holeSize": "0%"
},
"chartType": "com.ibi.kpi.table",
"agnosticSettings": {
    "chartTypeFullName": "com.ibi.kpi.table"
},
"extensions": {
	"com.ibi.kpi.table": {
        "color": "#ffffff",		// changes color to white 
        "shortenNumbers": true,
        "fontFamily": "'Open Sans'",
        "fontSize": "17px",		// only effects the 'group' bucket because of how the heading and column font-sizes are set
        "headingTitle": {
            "fontWeight": "400",
            "color": "inherit",
            "fontSize": "16px"	},
        "headingData": {
            "fontWeight": "700",
            "color": "inherit",
            "fontSize": "24px"
        },
        "columnTitle": {
            "fontWeight": "400",
            "color": "inherit",
            "fontSize": "14px"
        },
        "columnData": {
            "fontWeight": "700",
            "color": "inherit",
            "fontSize": "16px"
        }
    }
}
*END
ENDSTYLE
END
 


BARCHER
App Studio 8.203
Windows

 
Posts: 18 | Registered: February 02, 2015Report This Post
Expert
posted Hide Post
quote:
Doug, Have you tried a KPI.TABLE chart? It does more than what you are suggesting.


I tried it in IA and it looks good within IA during development. Smiler
However, it produces the following error when I run it. I even followed the installation provided. Frowner

I also did a direct copy&paste of Barcher's code, from Wed Oct 02 2019 12:05, into App Studio with the same error when I run it.

Internal Error
TypeError: Unable to get property 'fields' of undefined or null reference
(details)

TypeError: Unable to get property 'fields' of undefined or null referenceat getNumberFormat (http://Dev:8080/ibi_apps/tdg/jschart/distribution/extensions/com.ibi.kpi.table/com.ibi.kpi.table.js:76:3)at Anonymous function (http://Dev:8080/ibi_apps/tdg/jschart/distribution/extensions/com.ibi.kpi.table/com.ibi.kpi.table.js:133:5)at renderCallback (http://Dev:8080/ibi_apps/tdg/jschart/distribution/extensions/com.ibi.kpi.table/com.ibi.kpi.table.js:127:4)at tdgchart.extensionManager.drawExtensionInternal (http://Dev:8080/ibi_apps/tdg/jschart/distribution/tdgchart-min.js:1564:335)at c (http://Dev:8080/ibi_apps/tdg/jschart/distribution/tdgchart-min.js:393:287)at q (http://Dev:8080/ibi_apps/tdg/jschart/distribution/tdgchart-min.js:396:516)at Anonymous function (http://Dev:8080/ibi_apps/tdg/jschart/distribution/tdgchart-min.js:26:179)at tdgchart.extensionManager.drawExtension (http://Dev:8080/ibi_apps/tdg/jschart/distribution/tdgchart-min.js:1563:22)at Anonymous function (http://Dev:8080/ibi_apps/tdg/jschart/distribution/tdgchart-min.js:1562:272)at initCallback (http://Dev:8080/ibi_apps/tdg/jschart/distribution/extensions/com.ibi.kpi.table/com.ibi.kpi.table.js:48:3)

I especially like the 'drilldown heading' Smiler


I added the Profit field in the version in the image.
 
Posts: 3132 | Location: Tennessee, Nashville area | Registered: February 23, 2005Report This Post
Expert
posted Hide Post
What version Doug? It looks like it could possibly be a configuration issue. Might be best to raise a case with Tech Support.

T



In FOCUS
since 1986
WebFOCUS Server 8.2.01M, thru 8.2.07 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
 
Posts: 5694 | Location: United Kingdom | Registered: April 08, 2004Report This Post
Expert
posted Hide Post
quote:
8204M Gen48
I'll check out the configuration first.
 
Posts: 3132 | Location: Tennessee, Nashville area | Registered: February 23, 2005Report This Post
Member
posted Hide Post
You can create a webfocus style-sheet And attach the style sheet to the chart.you can create multiple style sheet with different color and format attach with chart with out editing the fex.

The below style sheet i created for the kpi sparkline,table and dashboard widget .

purple
  *TABLE_STYLE
TYPE=REPORT,
     GRID=OFF,
     FONT='Open Sans',
     SIZE=9,
     STYLE=NORMAL,
     SQUEEZE=ON,
     COLOR=RGB(238 238 238),
     PAGECOLOR=RGB(#480C55),
     BACKCOLOR=RGB(#480C55),
     TITLELINE=SKIP,
$
*END

*GRAPH_STYLE
TYPE=REPORT,
     GRID=OFF,
     FONT='Open Sans',
     SIZE=9,
     STYLE=NORMAL,
     SQUEEZE=ON,
     COLOR=RGB(238 238 238),
     PAGECOLOR=RGB(#480C55),
     BACKCOLOR=RGB(#480C55),
     TITLELINE=SKIP,
$
*END

*GRAPH_SCRIPT
setTransparentBorderColor(getChartBackground(),true);
setFillColor(getChartBackground(),new Color(255,255,255,0));

*GRAPH_JS_FINAL
"extensions":{
    "com.ibi.kpi.sparkline":{
         "type": "bar",
         "color": "#eee",
         "barProperties": {
             "goodColor": "#eee",
             "badColor": "#eee"
         }
    },
    "com.ibi.kpi.sparkline2":{
         "type": "bar",
         "color": "#eee",
         "barProperties": {
             "goodColor": "#eee",
         }
    },
    "com.ibi.kpi.table":{
         "color": "#eee"
    },
    "com.ibi.kpi.dashboard":{
         "type": "bar",
         "color": "#eee",
         "barProperties": {
             "goodColor": "#eee",
             "badColor": "#eee"
         }
    }
}
*END

Blue
  *TABLE_STYLE
TYPE=REPORT,
     GRID=OFF,
     FONT='Open Sans',
     SIZE=9,
     STYLE=NORMAL,
     SQUEEZE=ON,
     COLOR=RGB(238 238 238),
     PAGECOLOR=RGB(#080A5A),
     BACKCOLOR=RGB(#080A5A),
     TITLELINE=SKIP,
$
*END

*GRAPH_STYLE
TYPE=REPORT,
     GRID=OFF,
     FONT='Open Sans',
     SIZE=9,
     STYLE=NORMAL,
     SQUEEZE=ON,
     COLOR=RGB(238 238 238),
     PAGECOLOR=RGB(#080A5A),
     BACKCOLOR=RGB(#080A5A),
     TITLELINE=SKIP,
$
*END

*GRAPH_SCRIPT
setTransparentBorderColor(getChartBackground(),true);
setFillColor(getChartBackground(),new Color(255,255,255,0));

*GRAPH_JS_FINAL
"extensions":{
    "com.ibi.kpi.sparkline":{
         "type": "bar",
         "color": "#eee",
         "barProperties": {
             "goodColor": "#eee",
             "badColor": "#eee"
         }
    },
    "com.ibi.kpi.sparkline2":{
         "type": "bar",
         "color": "#eee",
         "barProperties": {
             "goodColor": "#eee",
         }
    },
    "com.ibi.kpi.table":{
         "color": "#eee"
    },
    "com.ibi.kpi.dashboard":{
         "type": "bar",
         "color": "#eee",
         "barProperties": {
             "goodColor": "#eee",
             "badColor": "#eee"
         }
    }
}
*END


WebFOCUS 8.2.04
AIX/UNIX/Windows, All Outputs
 
Posts: 20 | Registered: November 17, 2015Report This Post
  Powered by Social Strata  

Read-Only Read-Only Topic

Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED] HTML 5 Chart Extension - KPI Table

Copyright © 1996-2020 Information Builders