[CLOSED] Packed Bubble Chart

June 10, 2019, 02:00 PM

WebFOCUS_Dev

[CLOSED] Packed Bubble Chart - Highcharts

Hello all

Does anyone have a working example of packed bubble chart using below high charts? I am just looking for an example with 1 dimension and 1 measure.

Highcharts Packed Bubble

Please suggest.
Thank you.

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

June 10, 2019, 03:35 PM

BabakNYC

  

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 wf_retail/wf_retail
-* Created by Info Assist for Graph
SUM WF_RETAIL.WF_RETAIL_SALES.REVENUE_US
BY WF_RETAIL.WF_RETAIL_PRODUCT.PRODUCT_CATEGORY
ON GRAPH PCHOLD FORMAT JSCHART
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= >labels, $
TYPE=DATA, COLUMN=N2, BUCKET= >size, $
*GRAPH_SCRIPT

setReportParsingErrors(false);
setSelectionEnableMove(false);
*GRAPH_JS_FINAL
"pieProperties": {
"holeSize": "0%"
},
"chartType": "com.ibi.pack",
"agnosticSettings": {
"chartTypeFullName": "com.ibi.pack"
}

*END
ENDSTYLE
END

-RUN

June 10, 2019, 03:43 PM

WebFOCUS_Dev

Hello babaknyc, I am aware of this but I want to use high charts as I mentioned.
This doesn't even give flexibility to add custom tooltip like adding $ to amount.

quote:

Originally posted by BabakNYC:

  

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 wf_retail/wf_retail
-* Created by Info Assist for Graph
SUM WF_RETAIL.WF_RETAIL_SALES.REVENUE_US
BY WF_RETAIL.WF_RETAIL_PRODUCT.PRODUCT_CATEGORY
ON GRAPH PCHOLD FORMAT JSCHART
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= >labels, $
TYPE=DATA, COLUMN=N2, BUCKET= >size, $
*GRAPH_SCRIPT

setReportParsingErrors(false);
setSelectionEnableMove(false);
*GRAPH_JS_FINAL
"pieProperties": {
"holeSize": "0%"
},
"chartType": "com.ibi.pack",
"agnosticSettings": {
"chartTypeFullName": "com.ibi.pack"
}

*END
ENDSTYLE
END

-RUN

June 10, 2019, 03:50 PM

BabakNYC

That's the only Pack Chart I saw in IBI's github. Sorry.

June 10, 2019, 05:23 PM

Waz

Well you have two choices.

1. Try to get the Highchart embedded into WebFOCUS
2. Create an HTML page that calls Highcharts and supplied the data.

Had a quick look at the sample you gave, and it seems simple enough. Just have to supply JSON to configure Highcharts and also supply the data.

Highcharts.chart('container', {
    chart: {
        type: 'packedbubble',
        height: '100%'
    },
    title: {
        text: 'Carbon emissions around the world (2014)'
    },
    tooltip: {
        useHTML: true,
        pointFormat: '<b>{point.name}:</b> {point.value}m CO<sub>2</sub>'
    },
    plotOptions: {
        packedbubble: {
            minSize: '30%',
            maxSize: '120%',
            zMin: 0,
            zMax: 1000,
            layoutAlgorithm: {
                splitSeries: false,
                gravitationalConstant: 0.02
            },
            dataLabels: {
                enabled: true,
                format: '{point.name}',
                filter: {
                    property: 'y',
                    operator: '>',
                    value: 250
                },
                style: {
                    color: 'black',
                    textOutline: 'none',
                    fontWeight: 'normal'
                }
            }
        }
    },
    series: [{
        name: 'Europe',
        data: [{
            name: 'Germany',
            value: 767.1
        }, {
            name: 'Croatia',
            value: 20.7
        },
        {
            name: "Belgium",
            value: 97.2
        },
        {
            name: "Czech Republic",
            value: 111.7
        },
        {
            name: "Netherlands",
            value: 158.1
.
.
.
.

June 11, 2019, 09:28 AM

WebFOCUS_Dev

Waz, I saw this code on the website. But I am not aware of how to supply dynamic data from table to Highcharts code. I will need to look into it.

quote:

Originally posted by Waz:
Well you have two choices.

1. Try to get the Highchart embedded into WebFOCUS
2. Create an HTML page that calls Highcharts and supplied the data.

Had a quick look at the sample you gave, and it seems simple enough. Just have to supply JSON to configure Highcharts and also supply the data.

Highcharts.chart('container', {
    chart: {
        type: 'packedbubble',
        height: '100%'
    },
    title: {
        text: 'Carbon emissions around the world (2014)'
    },
    tooltip: {
        useHTML: true,
        pointFormat: '[b]{point.name}:[/b] {point.value}m CO[sub]2[/sub]'
    },
    plotOptions: {
        packedbubble: {
            minSize: '30%',
            maxSize: '120%',
            zMin: 0,
            zMax: 1000,
            layoutAlgorithm: {
                splitSeries: false,
                gravitationalConstant: 0.02
            },
            dataLabels: {
                enabled: true,
                format: '{point.name}',
                filter: {
                    property: 'y',
                    operator: '>',
                    value: 250
                },
                style: {
                    color: 'black',
                    textOutline: 'none',
                    fontWeight: 'normal'
                }
            }
        }
    },
    series: [{
        name: 'Europe',
        data: [{
            name: 'Germany',
            value: 767.1
        }, {
            name: 'Croatia',
            value: 20.7
        },
        {
            name: "Belgium",
            value: 97.2
        },
        {
            name: "Czech Republic",
            value: 111.7
        },
        {
            name: "Netherlands",
            value: 158.1
.
.
.
.

June 11, 2019, 09:45 AM

Tony A

Search the forum as this type of question has been raised before and examples given.

Should be your first port of call and it could have saved you a couple of days

June 18, 2019, 09:12 AM

Tony A

A question, does the fact that Highcharts requires a commercial licence pose any issues for your company? Something to bear in mind before jumping into Highcharts.

Another alternative would be to make a copy of com.ibi.pack, naming it differently (together with all the filename change(s) that would be required), and making a change to the section where the tooltips are created to incorporate the value prefix that you require.

This is easily done and the line in pack.js where the tooltips are created is around line 248.

NOTE: I do not recommend changing the original because if you refresh the extension package then you will lose your change(s).

I have looked through the JavaScript for the extension and I can find no facility to affect the tooltip content without making changes to the JavaScript.

T

Prod:	WebFOCUS 7.6.10/8.1.04	Upgrade:	WebFOCUS 8.2.07	OS:	Linux	Outputs:	HTML, PDF, Excel, PPT
In Focus since 1984
Pity the lost knowledge of an old programmer!

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