A Pie chart capable of drilldown

This pie chart shows how you can drill down into detailed charts. It is built of a main-chart (the pie chart) and three drill-in bar charts. If you click into a pie segment or use the contextmenu (right-click into main chart), the main chart will be replaced by a detailed bar chart for it. With second value ("1") of parameter "drill_chart" a contextmenu is requested as well. This opens, if you right-click into drill-chart and gives you the option to redisplay main-chart.

[No canvas support]>

Parameters for creation of chart

Note: Required parameters to build this kind of chart are marked with red color.
Main Chart:
{rgraph title="Revenue in January by Location" width="600" height="350" type="Pie" marginTop="30" marginLeft="60"
marginRight="80" data="Frankfurt,Munic,Stuttgart/48000,46000,51000" variant="pie3d" radius="95" labelsSticks="1"
labelsIngraphBounding="0" labelsIngraphColor="#f0f0f0" draw_option="implode()"
drill_charts="chart1,chart2,chart3" contextmenu="Frankfurt,chart1|Munic,chart2|Stuttgart,chart3"
labelsIngraph="Frankfurt,Munic,Stuttgart"}cvs{/rgraph}
Drill-in charts:
{title="Revenue by Week in Frankfurt" draw_option="grow()" tooltip="#key#: #val# €"
data="1,2,3,4,5/2000,2000,3500,2500,2600|3200,3100,3200,3300,3300|3100,4100,3200,4400,4500"
drill_chart="chart1,1" key="Books,CDs,DVDs" keyPositionX="260" marginTop="50" marginBottom="80"
marginLeft="35" variant="3d" "marginRight="15" titleXaxis="Week" titleXaxisPos="0.6" ymax="5000"}cvs{/rgraph} {rgraph title="Revenue by Week in Munic" draw_option="fadeIn()" tooltip="#key#: #val# €" data="1,2,3,4,5/1800,1800,3200,2300,2500|3100,3000,3100,3200,3200|3000,4000,3100,4300,4400"
drill_chart="chart2,1" key="Books,CDs,DVDs" keyPositionX="260" marginTop="50" marginBottom="80"
marginLeft="35" variant="3d" "marginRight="15" titleXaxis="Week" titleXaxisPos="0.6" ymax="5000"}cvs{/rgraph} {rgraph title="Revenue by Week in Stuttgart" draw_option="fadeIn()" tooltip="#key#: #val# €" data="1,2,3,4,5/2200,2200,3700,2700,2800|3400,3300,3400,3500,3500|3300,4300,3400,4600,4700"
drill_chart="chart3,1" key="Books,CDs,DVDs" keyPositionX="260" marginTop="50" marginBottom="80"
marginLeft="35" variant="3d" "marginRight="15" titleXaxis="Week" titleXaxisPos="0.6" ymax="5000"}cvs{/rgraph}

 

Important: If you want to test this sample via copy/paste, ensure that you paste with option "paste as plain text" otherwise imbedded html-codes may invalidate your input.
go back...