 |
|||||
|
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
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 WebFOCUS/FOCUS Forum on Focal Point [CLOSED] Packed Bubble Chart Issue
Focal Point Forums WebFOCUS/FOCUS Forum on Focal Point [CLOSED] Packed Bubble Chart Issue Read-Only TopicGo | Search | Notify | Tools |
| [CLOSED] Packed Bubble Chart Issue | Login/Join |
| Platinum Member |
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 8206 All formats | ||
|
| Expert |
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
| |||||||||
|
| Platinum Member |
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?
WebFOCUS 8206 All formats | |||
|
| Expert |
Sorry, it was a typo  Also, I am on the road so have no time to provide an example. Good luck! T
| |||||||||
|
| Expert |
I've taken a little time out for this as it should work OK. Looking at the syntax, I realised that I missed something 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"
}
*ENDT
| |||||||||
|
| Platinum Member |
Thanks Tony. This worked and will give me a start.
WebFOCUS 8206 All formats | |||
|
| Platinum Member |
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 8206 All formats | |||
|
| Expert |
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
| |||||||||
|
| Powered by Social Strata |
 | Please Wait. Your request is being processed... |
Read-Only TopicFocal Point Focal Point Forums WebFOCUS/FOCUS Forum on Focal Point [CLOSED] Packed Bubble Chart Issue
Focal Point Forums WebFOCUS/FOCUS Forum on Focal Point [CLOSED] Packed Bubble Chart IssueCopyright © 1996-2020 Information Builders
| View $GS_USERNAME's Public Profile |
| Add $GS_USERNAME to my Ignore List |
| View Recent Posts by $GS_USERNAME |
| Notify me of New Posts by $GS_USERNAME |