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 Issue
Go
New
Search
Notify
Tools
Reply
  
[CLOSED] Packed Bubble Chart Issue
 Login/Join
 
Gold member
posted
Hello

I am working on packed bubble chart (D3) for the first time. I am having issue with customization as the graph is not using the colors and font as specified.
Can someone please suggest if I am doing something wrong? Also, this is with CAR file. Graph is looking good.
When I implement this with actual data, one bubble is going behind/underneath another bubble. I am not sure what's causing this. Any thoughts on this?
-*IA_GRAPH_BEGIN
-*Do not delete or modify the comments above
ENGINE INT CACHE SET ON
SET PAGE-NUM=NOLEAD
SET HTMLENCODE=ON
SET ARGRAPHENGINE=JSCHART
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 car
-* Created by Info Assist for Graph
SUM CAR.BODY.SALES
CAR.BODY.SALES
BY CAR.COMP.CAR
BY CAR.CARREC.MODEL
BY CAR.COMP.CAR
BY CAR.ORIGIN.COUNTRY
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, PAGESIZE=LEGAL, $
TYPE=DATA, COLUMN=N1, BUCKET= >labels, $
TYPE=DATA, COLUMN=N2, BUCKET= >labels, $
TYPE=DATA, COLUMN=N3, BUCKET= >color, $
TYPE=DATA, COLUMN=N4, BUCKET= >sort_dim, $
TYPE=DATA, COLUMN=N5, BUCKET= >size, $
TYPE=DATA, COLUMN=N6, BUCKET= >sort_mes, $
*GRAPH_SCRIPT
setReportParsingErrors(false);
setSelectionEnableMove(false);
setPieTilt(0);
setPieDepth(0);
setDepthRadius(0);
setDepthAngle(0);
*GRAPH_JS_FINAL
"properties": {
	"circles": {
		"colors": ["#4087b8","#e31a1c","#9ebcda","#c994c7","#41b6c4","#49006a","#ec7014","#a6bddb","#67001f","#800026","#addd8e","#e0ecf4","#fcc5c0","#238b45","#081d58","#d4b9da","#2b8cbe",
 "#74a9cf","#41ab5d","#fed976","#ce1256","#7f0000","#a6bddb","#ffffcc","#e7e1ef","#016c59","#f7fcfd","#99d8c9","#fff7fb","#ffffe5"],
		"labels": {
			"font" : "12px sans-serif"
		},
		"padding": 3
	},
	"legend": {
		"enabled": false,
		"title": {
			"font": "14px sans-serif"
		},
		"labels": {
			"font": "12px sans-serif"
		}
	},
	"hover": {
		"stroke": "grey",
		"stroke-width": 3
	},
    "toolTip": {
      "enabled": true
    }
},
"chartType": "com.ibi.pack",
"agnosticSettings": {
    "chartTypeFullName": "com.ibi.pack"
}
*END
ENDSTYLE
END
-RUN

-*IA_GRAPH_FINISH


Please suggest. Thank you.

This message has been edited. Last edited by: WebFOCUS_Dev,


WebFOCUS 8202
All formats
 
Posts: 71 | Registered: September 13, 2017Reply With QuoteReport This Post
Expert
posted Hide Post
com.ibi.pack is an HTML5 Chart Extension and, as you attempted, uses specific styling properties, which are configured in the properties.json file of the extension.

Your method of utilising them , however, is incorrect. You need to use specific syntax for HTML5 Chart Extensions. So your *GRAPH_JS_FINAL should look like this -
*GRAPH_JS_FINAL
"properties": {
  "com.ibi.rack":{
	"circles": {
		"colors": ["#4087b8","#e31a1c","#9ebcda","#c994c7","#41b6c4","#49006a","#ec7014","#a6bddb","#67001f","#800026","#addd8e","#e0ecf4","#fcc5c0","#238b45","#081d58","#d4b9da","#2b8cbe",
 "#74a9cf","#41ab5d","#fed976","#ce1256","#7f0000","#a6bddb","#ffffcc","#e7e1ef","#016c59","#f7fcfd","#99d8c9","#fff7fb","#ffffe5"],
		"labels": {
			"font" : "16px sans-serif"
		},
		"padding": 3
	},
	"legend": {
		"enabled": false,
		"title": {
			"font": "14px sans-serif"
		},
		"labels": {
			"font": "12px sans-serif"
		}
	},
	"hover": {
		"stroke": "grey",
		"stroke-width": 3
	},
    "toolTip": {
      "enabled": true
    }
  }
},


There is an issue, I think, within this extension as it appears that the configuration isn't actually used within the scripts!

Time to raise it as an issue on GitHub.

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
Gold member
posted Hide Post
Thanks for the example Tony.
com.ibi.rack - Do you mean pack? This is giving me a bar chart instead of bubble chart. Can you post an example with car using this code?

quote:
Originally posted by Tony A:
com.ibi.pack is an HTML5 Chart Extension and, as you attempted, uses specific styling properties, which are configured in the properties.json file of the extension.

Your method of utilising them , however, is incorrect. You need to use specific syntax for HTML5 Chart Extensions. So your *GRAPH_JS_FINAL should look like this -
*GRAPH_JS_FINAL
"properties": {
  "com.ibi.rack":{
	"circles": {
		"colors": ["#4087b8","#e31a1c","#9ebcda","#c994c7","#41b6c4","#49006a","#ec7014","#a6bddb","#67001f","#800026","#addd8e","#e0ecf4","#fcc5c0","#238b45","#081d58","#d4b9da","#2b8cbe",
 "#74a9cf","#41ab5d","#fed976","#ce1256","#7f0000","#a6bddb","#ffffcc","#e7e1ef","#016c59","#f7fcfd","#99d8c9","#fff7fb","#ffffe5"],
		"labels": {
			"font" : "16px sans-serif"
		},
		"padding": 3
	},
	"legend": {
		"enabled": false,
		"title": {
			"font": "14px sans-serif"
		},
		"labels": {
			"font": "12px sans-serif"
		}
	},
	"hover": {
		"stroke": "grey",
		"stroke-width": 3
	},
    "toolTip": {
      "enabled": true
    }
  }
},


There is an issue, I think, within this extension as it appears that the configuration isn't actually used within the scripts!

Time to raise it as an issue on GitHub.

T


WebFOCUS 8202
All formats
 
Posts: 71 | Registered: September 13, 2017Reply With QuoteReport This Post
Expert
posted Hide Post
Sorry, it was a typo Frowner

Also, I am on the road so have no time to provide an example.

Good luck!

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
I've taken a little time out for this as it should work OK.

Looking at the syntax, I realised that I missed something Frowner It should be "extensions" not "properties" - I wrongly assumed you had that bit correct!

Try this -

*GRAPH_JS_FINAL
"extensions": {
  "com.ibi.pack": {
    "circles": {
        "colors": ["#4087b8","#e31a1c","#9ebcda","#c994c7","#41b6c4","#49006a","#ec7014","#a6bddb","#67001f","#800026",
                   "#addd8e","#e0ecf4","#fcc5c0","#238b45","#081d58","#d4b9da","#2b8cbe","#74a9cf","#41ab5d","#fed976",
                   "#ce1256","#7f0000","#a6bddb","#ffffcc","#e7e1ef","#016c59","#f7fcfd","#99d8c9","#fff7fb","#ffffe5"],
        "labels": {
            "font" : "16px sans-serif"
        },
        "padding": 3
    },
    "legend": {
        "enabled": false,
        "title": {
            "font": "14px sans-serif"
        },
        "labels": {
            "font": "12px sans-serif"
        }
    },
    "hover": {
        "stroke": "grey",
        "stroke-width": 3
    },
    "toolTip": {
      "enabled": true
    }
  }
},
"chartType": "com.ibi.pack",
"agnosticSettings": {
    "chartTypeFullName": "com.ibi.pack"
}
*END


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
Gold member
posted Hide Post
Thanks Tony. This worked and will give me a start.
quote:
Originally posted by Tony A:
I've taken a little time out for this as it should work OK.

Looking at the syntax, I realised that I missed something Frowner It should be "extensions" not "properties" - I wrongly assumed you had that bit correct!

Try this -

*GRAPH_JS_FINAL
"extensions": {
  "com.ibi.pack": {
    "circles": {
        "colors": ["#4087b8","#e31a1c","#9ebcda","#c994c7","#41b6c4","#49006a","#ec7014","#a6bddb","#67001f","#800026",
                   "#addd8e","#e0ecf4","#fcc5c0","#238b45","#081d58","#d4b9da","#2b8cbe","#74a9cf","#41ab5d","#fed976",
                   "#ce1256","#7f0000","#a6bddb","#ffffcc","#e7e1ef","#016c59","#f7fcfd","#99d8c9","#fff7fb","#ffffe5"],
        "labels": {
            "font" : "16px sans-serif"
        },
        "padding": 3
    },
    "legend": {
        "enabled": false,
        "title": {
            "font": "14px sans-serif"
        },
        "labels": {
            "font": "12px sans-serif"
        }
    },
    "hover": {
        "stroke": "grey",
        "stroke-width": 3
    },
    "toolTip": {
      "enabled": true
    }
  }
},
"chartType": "com.ibi.pack",
"agnosticSettings": {
    "chartTypeFullName": "com.ibi.pack"
}
*END


T


WebFOCUS 8202
All formats
 
Posts: 71 | Registered: September 13, 2017Reply With QuoteReport This Post
Gold member
posted Hide Post
quote:
Originally posted by Tony A:
I've taken a little time out for this as it should work OK.
Looking at the syntax, I realised that I missed something Frowner It should be "extensions" not "properties" - I wrongly assumed you had that bit correct!


Tony, I got it to work. I am not able to add custom tooltip though. Below custom tooltip series code works with regular WebFOCUS graphs but not working with this.
Any way to get this work? Please suggest.
  
ENGINE INT CACHE SET ON
SET PAGE-NUM=NOLEAD
SET HTMLENCODE=ON
SET ARGRAPHENGINE=JSCHART
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 car
-* Created by Info Assist for Graph
SUM CAR.BODY.SALES
CAR.BODY.SALES
	COMPUTE TT_CAR/A16 = FPRINT(MAX.CAR,'A16','A16');
	COMPUTE TT_MOD/A24 = FPRINT(MAX.MODEL,'A24','A24');
BY CAR.COMP.CAR
BY CAR.CARREC.MODEL
BY CAR.COMP.CAR
BY CAR.ORIGIN.COUNTRY
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, PAGESIZE=LEGAL, $
TYPE=DATA, COLUMN=N1, BUCKET= >labels, $
TYPE=DATA, COLUMN=N2, BUCKET= >labels, $
TYPE=DATA, COLUMN=N3, BUCKET= >color, $
TYPE=DATA, COLUMN=N4, BUCKET= >sort_dim, $
TYPE=DATA, COLUMN=N5, BUCKET= >size, $
TYPE=DATA, COLUMN=N6, BUCKET= >sort_mes, $
TYPE=DATA, COLUMN=N7, BUCKET= tooltip, $
TYPE=DATA, COLUMN=N8, BUCKET= tooltip, $

*GRAPH_SCRIPT
setReportParsingErrors(false);
setSelectionEnableMove(false);
setPieTilt(0);
setPieDepth(0);
setDepthRadius(0);
setDepthAngle(0);
*GRAPH_JS_FINAL
"extensions": {
  "com.ibi.pack": {
    "circles": {
      "colors": ["red","blue","green","black"],
        "labels": {"font" : "12px sans-serif"},
    }
  }
},
"chartType": "com.ibi.pack",
"agnosticSettings": {
    "chartTypeFullName": "com.ibi.pack"
},
"series": [
	{"series": "reset",
		"tooltip": '<table><tr><td>Car:</td><td><b>{{tooltip1}}</b></td></tr> <tr><td>Model:</td><td><b>{{tooltip2}}</b></td></tr></table>'
	}
],
"htmlToolTip": {
    "enabled": true,
	style: {
	  "background": "white",
	  "font-color": "#4c4c4c",
	  "font-size": "16pt",
	  "font-family": "Arial",}
}
*END
ENDSTYLE
END
-RUN


WebFOCUS 8202
All formats
 
Posts: 71 | Registered: September 13, 2017Reply With QuoteReport This Post
Expert
posted Hide Post
quote:
with regular WebFOCUS graphs

HTML5 Extensions can be very different in how they deal with GRAPH_JS callouts. Not having been involved with the creation of IBI.COM.PACK, I cannot advise how it was coded and how you might be able to achieve your desired formatting. I would have to analyse the JavaScript code and I do not have time for that (I have a day job after all!).

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 Issue

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