[SOLVED] HTML 5 Chart Extension

October 01, 2019, 01:02 PM

barcher

[SOLVED] HTML 5 Chart Extension - KPI Table

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,

October 01, 2019, 03:02 PM

Doug

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.

October 02, 2019, 10:20 AM

Tony A

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

October 02, 2019, 10:29 AM

Tony A

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

October 02, 2019, 12:05 PM

barcher

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

October 02, 2019, 06:56 PM

Doug

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.

However, it produces the following error when I run it. I even followed the installation provided.

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'

I added the Profit field in the version in the image.

October 06, 2019, 02:33 PM

Tony A

What version Doug? It looks like it could possibly be a configuration issue. Might be best to raise a case with Tech Support.

T

October 06, 2019, 05:15 PM

Doug

quote:
8204M Gen48

I'll check out the configuration first.

October 09, 2019, 12:44 PM

Satheesh Babu

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

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