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     [CLOSED] Packed Bubble Chart - Highcharts
Go
New
Search
Notify
Tools
Reply
  
[CLOSED] Packed Bubble Chart - Highcharts
 Login/Join
 
Gold 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 8202
All formats
 
Posts: 71 | Registered: September 13, 2017Reply With QuoteReport 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: 1714 | Location: New York City | Registered: December 30, 2015Reply With QuoteReport This Post
Gold 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 8202
All formats
 
Posts: 71 | Registered: September 13, 2017Reply With QuoteReport This Post
Virtuoso
posted Hide Post
That's the only Pack Chart I saw in IBI's github. Sorry.


WebFOCUS 8206, Unix, Windows
 
Posts: 1714 | Location: New York City | Registered: December 30, 2015Reply With QuoteReport 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.06OS:LinuxOutputs:HTML, PDF, Excel, PPT
In Focus since 1984
Know The Code

 
Posts: 6136 | Location: 33.8688° S, 151.2093° E | Registered: October 31, 2006Reply With QuoteReport This Post
Gold 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 8202
All formats
 
Posts: 71 | Registered: September 13, 2017Reply With QuoteReport 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.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
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.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
  Powered by Social Strata  
 

Focal Point    Focal Point Forums  Hop To Forum Categories  WebFOCUS/FOCUS Forum on Focal Point     [CLOSED] Packed Bubble Chart - Highcharts

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