Focal Point Banner
Community Center Education Summit Technical Support User Groups
Let's Get Social!

Facebook Twitter LinkedIn YouTube
Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [SOLVED] HTML 5 Chart Extension - KPI Table
Go
New
Search
Notify
Tools
Reply
  
[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, 2015Reply With QuoteReport 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: 3045 | Location: Middle Tennessee [8204M Gen48 in Test&Prod] | Registered: February 23, 2005Reply With QuoteReport 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.06 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
 
Posts: 5617 | Location: United Kingdom | Registered: April 08, 2004Reply With QuoteReport 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.06 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
 
Posts: 5617 | Location: United Kingdom | Registered: April 08, 2004Reply With QuoteReport 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, 2015Reply With QuoteReport 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: 3045 | Location: Middle Tennessee [8204M Gen48 in Test&Prod] | Registered: February 23, 2005Reply With QuoteReport 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.06 on Windows Svr 2008 R2  
WebFOCUS App Studio 8.2.06 standalone on Windows 10 
 
Posts: 5617 | Location: United Kingdom | Registered: April 08, 2004Reply With QuoteReport This Post
Expert
posted Hide Post
quote:
8204M Gen48
I'll check out the configuration first.
 
Posts: 3045 | Location: Middle Tennessee [8204M Gen48 in Test&Prod] | Registered: February 23, 2005Reply With QuoteReport 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: 12 | Registered: November 17, 2015Reply With QuoteReport This Post
  Powered by Social Strata  
 

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

Copyright © 1996-2018 Information Builders, leaders in enterprise business intelligence.