Focal Point
[CLOSED] Packed Bubble Chart - Highcharts

This topic can be found at:
http://forums.informationbuilders.com/eve/forums/a/tpc/f/7971057331/m/7797053196

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,


WebFOCUS 8206
All formats
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




WebFOCUS 8206, Unix, Windows
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




WebFOCUS 8206
All formats
June 10, 2019, 03:50 PM
BabakNYC
That's the only Pack Chart I saw in IBI's github. Sorry.


WebFOCUS 8206, Unix, Windows
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
.
.
.
.



Waz...

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

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
.
.
.
.



WebFOCUS 8206
All formats
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 Smiler


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 
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



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