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     [CLOSED] Packed Bubble Chart - Highcharts

Read-Only Read-Only Topic
Go
Search
Notify
Tools
[CLOSED] Packed Bubble Chart - Highcharts
 Login/Join
 
Platinum Member
posted
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
 
Posts: 95 | Registered: September 13, 2017Report This Post
Virtuoso
posted Hide Post
  

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
 
Posts: 1853 | Location: New York City | Registered: December 30, 2015Report This Post
Platinum Member
posted Hide Post
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
 
Posts: 95 | Registered: September 13, 2017Report This Post
Virtuoso
posted Hide Post
That's the only Pack Chart I saw in IBI's github. Sorry.


WebFOCUS 8206, Unix, Windows
 
Posts: 1853 | Location: New York City | Registered: December 30, 2015Report This Post
Expert
posted Hide Post
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!

 
Posts: 6347 | Location: 33°49'23.0"S, 151°11'41.0"E | Registered: October 31, 2006Report This Post
Platinum Member
posted Hide Post
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
 
Posts: 95 | Registered: September 13, 2017Report This Post
Expert
posted Hide Post
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 
 
Posts: 5694 | Location: United Kingdom | Registered: April 08, 2004Report This Post
Expert
posted Hide Post
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 
 
Posts: 5694 | Location: United Kingdom | Registered: April 08, 2004Report 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     [CLOSED] Packed Bubble Chart - Highcharts

Copyright © 1996-2020 Information Builders