this is my HTML document named weekly-sales.
<html>
<head>
<title>SARVARI</title>
<script type="text/javascript" src="FusionCharts/FusionCharts.js">
</script>
</head>
<body>
<div id="chartContainer">FusionCharts XT will load here!</div>
<div id="childChartContainer" ></div>
<script type="text/javascript">
FusionCharts.setCurrentRenderer('javascript');
var myChart = new FusionCharts( "FusionCharts/Doughnut2D.swf","myChartId", "650", "650", "0", "1");
myChart.setJSONUrl("Dou1.json");
myChart.render("chartContainer");
myChart.configureLink
(
[
{
swfUrl: 'FusionCharts/Bar2D.swf',
width: '350', height: '350',
renderAt: 'childChartContainer',
insertMode: 'append',
overlayButton: {message: 'Close' }
}
]
);
</script>
</body>
</html>
and this is my JSON document: "Dou1.json"
{
"chart": {
"showlegend": "1",
"showlabels": "0",
"showvalues": "0",
"issmartlineslanted": "0",
"numberprefix": "$",
"plotbordercolor": "FFFFFF",
"showpercentagevalues": "0",
"bgcolor": "FFFFFF,CCCCCC",
"caption": "Spend by Categories"
},
"data": [
{
"alpha": "60",
"color": "99CC00",
"label": "Food",
"value": "212000",
"link":"newchart-json-bar1"
},
{
"alpha": "60",
"color": "333333",
"label": "Entertaiment",
"value": "96800",
"link":"newchart-json-bar2"
},
{
"alpha": "30",
"color": "99CC00",
"label": "Sales",
"value": "26400",
"link":"newchart-json-bar3"
},
{
"alpha": "30",
"color": "333333",
"label": "Others",
"value": "29300",
"link":"newchart-json-bar4"
}
],
"linkeddata":[
{
"id":"bar1",
"linkedcharts":{
"chart": {
"bgcolor": "FFFFFF,FFFFFF",
"caption": "Activity by Card",
"useroundedges": "1",
"tooltipbgcolor": "E7EFF6",
"tooltipbordercolor": "114B78",
"basefontcolor": "114B78",
"alternatevgridcolor": "AFD8F8",
"subcaption": "(supp)"
},
"data": [
{
"color": "AFD8F8",
"label": "JohnSmith",
"value": "100.00"
},
{
"color": "F6BD0F",
"label": "AnnaSmith",
"value": "405.00"
},
{
"color": "8BBA00",
"label": "Kevin Brown",
"value": "210.00"
},
{
"color": "A66EDD",
"label": "All Others",
"value": "75.00"
}
]
}
},
{
"id":"bar2",
"linkedcharts":{
"chart": {
"bgcolor": "FFFFFF,FFFFFF",
"caption": "Activity by Card",
"useroundedges": "1",
"tooltipbgcolor": "E7EFF6",
"tooltipbordercolor": "114B78",
"basefontcolor": "114B78",
"alternatevgridcolor": "AFD8F8",
"subcaption": "(supp)"
},
"data": [
{
"color": "AFD8F8",
"label": "Smith",
"value": "100.00"
},
{
"color": "F6BD0F",
"label": "Smith",
"value": "405.00"
},
{
"color": "8BBA00",
"label": "Brown",
"value": "210.00"
},
{
"color": "A66EDD",
"label": "All Others",
"value": "75.00"
}
]
}
},
{
"id":"bar3",
"linkedcharts":{
"chart": {
"bgcolor": "FFFFFF,FFFFFF",
"caption": "Activity by Card",
"useroundedges": "1",
"tooltipbgcolor": "E7EFF6",
"tooltipbordercolor": "114B78",
"basefontcolor": "114B78",
"alternatevgridcolor": "AFD8F8",
"subcaption": "(supp)"
},
"data": [
{
"color": "AFD8F8",
"label": "John",
"value": "100.00"
},
{
"color": "F6BD0F",
"label": "Anna",
"value": "405.00"
},
{
"color": "8BBA00",
"label": "Kevin",
"value": "210.00"
},
{
"color": "A66EDD",
"label": "All Others",
"value": "75.00"
}
]
}
},
{
"id":"bar4",
"linkedcharts":{
"chart": {
"bgcolor": "FFFFFF,FFFFFF",
"caption": "Activity by Card",
"useroundedges": "1",
"tooltipbgcolor": "E7EFF6",
"tooltipbordercolor": "114B78",
"basefontcolor": "114B78",
"alternatevgridcolor": "AFD8F8",
"subcaption": "(supp)"
},
"data": [
{
"color": "AFD8F8",
"label": "JS",
"value": "100.00"
},
{
"color": "F6BD0F",
"label": "AS",
"value": "405.00"
},
{
"color": "8BBA00",
"label": "KB",
"value": "210.00"
},
{
"color": "A66EDD",
"label": "All Others",
"value": "75.00"
}
]
}
}
]
}
the main chart was displaying but when we click on the mainchart the child chart was not displaying.i am attaching the screen shot of it.can anyoone plz help me how to make child chart display.thanks in advance.
