i have the requirement to build several double pie chart see image sample below.

https://imgur.com/YhfMgar

i tried to create 2 pie chart and overlap one(svg) over the other and it is not successful.

i have requested my admin to install sunburst and try it on it by making ring hole size and space between ring size.

but why would this is not available in default in the product as it seems to be widely recommended by business.

anyone have a better recommendation on it. please share your ideas.

thank you.


PS: https://imgur.com/YhfMgar

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

Vinodh

Since no one has been able to give you any guidance I suggest you open a case with techsupport.

Admittedly, I haven't heard of these charts and googled double pie chart with nothing resembling the picture you posted. You could probably write your own D3 chart that you can use as an extension. I doubt sunburst chart is going to meet your requirement.

Have to agree with Babak, couldn't really find anything close to what you referenced. In concept maybe something like this could work https://www.amcharts.com/demos...gauge-with-two-axes/

quote:

eard of these charts and googled double pie chart with nothing resembling the picture you posted. You could probably write your own D3 chart that you can use as an extension. I doubt sunburst chart is going to meet your requirement.

i could see a similar ticket showing 2 charts one above other in the below forum discussion.

http://forums.informationbuild...71057331/m/185106911

since the latest webfocus doesnt do the windows command (DEL and COPY) due to security. do you guys think, we have a alternative commands that could help us resolve this idea.

quote:

Originally posted by Mike Williams:
Have to agree with Babak, couldn't really find anything close to what you referenced. In concept maybe something like this could work https://www.amcharts.com/demos...gauge-with-two-axes/

mark have u tried the charts from this website and does it worked ? i am trying to utilize the nested-donut-chart.
thanks mike for this website. i havent tried charts from here. below chart link looks similar to my requirement i guess. having nested donut chart.?

https://www.amcharts.com/demos/nested-donut-chart/

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

You could try using the arc chart but there will be limitations such as a maximum arc of 0.75 of the full circle (see code below).

Or you could use what I have advocated before, using WebFOCUS function - Bubble chart using WebFOCUS functions

T

-HTMLFORM BEGIN
<style>
.label {fill: rgba(0,0,0,0) !important;}
</style>
-HTMLFORM END
GRAPH FILE GGSALES
SUM DOLLARS NOPRINT
    BUDDOLLARS NOPRINT
	COMPUTE PCENT/D7.2% = (C1 / C2 * 100) ;
 BY REGION
WHERE REGION CONTAINS 'east'
ON GRAPH PCHOLD FORMAT JSCHART
ON GRAPH SET VZERO OFF
ON GRAPH SET LOOKGRAPH EXTENSION
ON GRAPH SET EMBEDHEADING ON
ON GRAPH SET AUTOFIT ON
ON GRAPH SET STYLE *
*GRAPH_SCRIPT
setPieDepth(0);
setPieTilt(0);
setDepthRadius(0);
setPlace(true);
setCurveFitEquationDisplay(false);
*END
INCLUDE=IBFS:/FILE/IBI_HTML_DIR/ibi_themes/Warm.sty,$
TYPE=DATA, COLUMN=N1, BUCKET= >label, $
TYPE=DATA, COLUMN=N4, BUCKET= >value, $
TYPE=HEADING, JUSTIFY=CENTER, $
*GRAPH_SCRIPT
setReportParsingErrors(false);
setSelectionEnableMove(false);
*GRAPH_JS_FINAL
"extensions": {
    "com.ibi.arc": {
        "arc": {
		    "start": 0,
			"padding": 0.1,
			"extent": 0.9
		},
		"axis": {
		    "base": {"color": "rgba(0,0,0,0)", "width": 0},
		    "ticks": {"color": "rgba(0,0,0,0)", "width": 0}
		},
		"valueLabel": {"color": "rgba(0,0,0,0)"},
		"labels": {
		    "text": {"color": "rgba(0,0,0,0)"}
		}
    }
},
"pieProperties": {
    "holeSize": "0%"
},
"chartType": "com.ibi.arc",
"agnosticSettings": {
    "chartTypeFullName": "com.ibi.sankey"
}
*END
ENDSTYLE
END

thank you @tony A for your write up. it looks nice and i will try to show up to my users to see if i can convince.

currently i am looking for look and feel only as my requirement is for public audience thats why users want to be more eye appealing.

quote:

Originally posted by vinodh:

quote:

Originally posted by Mike Williams:
Have to agree with Babak, couldn't really find anything close to what you referenced. In concept maybe something like this could work https://www.amcharts.com/demos...gauge-with-two-axes/

mark have u tried the charts from this website and does it worked ? i am trying to utilize the nested-donut-chart.
thanks mike for this website. i havent tried charts from here. below chart link looks similar to my requirement i guess. having nested donut chart.?

https://www.amcharts.com/demos/nested-donut-chart/

Wow!! that is a GREAT library. Easy to implement too. Just hold the output as JSON and plug it in:

 
TABLE FILE CAR
SUM DEALER_COST
    RETAIL_COST
BY CAR  
ON TABLE HOLD FORMAT JSON
END
-HTMLFORM BEGIN NOEVAL
<!-- Styles -->
<style>
    body { 
        background-color: #30303d; 
        color: #fff; 
    }
    #chartdiv {
        width: 100%;
        height: 500px;
    }
</style>

<!-- Resources -->
<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/dark.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>

<!-- Chart code -->
<script>
//Hold file information
var ibiData = !IBI.FIL.HOLD; ;

am4core.ready(function() {

    // Themes begin
    am4core.useTheme(am4themes_dark);
    am4core.useTheme(am4themes_animated);
    // Themes end

    // Create chart instance
    var chart = am4core.create("chartdiv", am4charts.PieChart);

    // Let's cut a hole in our Pie chart the size of 40% the radius
    chart.innerRadius = am4core.percent(40);

    // Add data
    chart.data = ibiData.records;

    // Add and configure Series
    var pieSeries = chart.series.push(new am4charts.PieSeries());
    pieSeries.dataFields.value = "DEALER_COST";
    pieSeries.dataFields.category = "CAR";
    pieSeries.slices.template.stroke = am4core.color("#fff");
    pieSeries.slices.template.strokeWidth = 2;
    pieSeries.slices.template.strokeOpacity = 1;

    // Disabling labels and ticks on inner circle
    pieSeries.labels.template.disabled = true;
    pieSeries.ticks.template.disabled = true;

    // Disable sliding out of slices
    pieSeries.slices.template.states.getKey("hover").properties.shiftRadius = 0;
    pieSeries.slices.template.states.getKey("hover").properties.scale = 0.9;

    // Add second series
    var pieSeries2 = chart.series.push(new am4charts.PieSeries());
    pieSeries2.dataFields.value = "RETAIL_COST";
    pieSeries2.dataFields.category = "CAR";
    pieSeries2.slices.template.stroke = am4core.color("#fff");
    pieSeries2.slices.template.strokeWidth = 2;
    pieSeries2.slices.template.strokeOpacity = 1;
    pieSeries2.slices.template.states.getKey("hover").properties.shiftRadius = 0;
    pieSeries2.slices.template.states.getKey("hover").properties.scale = 1.1;

}); // end am4core.ready()
</script>

<!-- HTML -->
<div id="chartdiv"></div>
-HTMLFORM END

-EXIT


 

thank you @hallway. you are awesome.
you make answers look simple.

someday i will make trip to Salt Lake city to thank you.

quote:

Originally posted by vinodh:
thank you @hallway. you are awesome.
you make answers look simple.

someday i will make trip to Salt Lake city to thank you.

Ha, ha. You're too kind. I just copy/pasted in the amCharts code and added in the JSON data from IBI. There is A LOT more that you can do with these charts. Be sure and read through the docs: https://www.amcharts.com/docs/v4/

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