get the data of the chart and plot it again in another DIV

[knives]

hi i just created a Thumbnail rendering in Fusion Chart................  I just want to ask if this is possible in Fushion Chart............

What i want to do is when i click the stack bar that I mark in rectangle i want to get that data and plot it again in another div using any chart that is available........  I wish i can post the image here in text area but I cant find a way to paste it here so i will just attach the image in the attached file..........   I just wanna clear what i want to accomplish.  If I clicked the stacked bar in the Main Div the Biggest Chart I want to get the data in that 

specific stackedbar and the plot it again in an another chart...... Is this possible in Fusion Chart??????  if possible can anyone give me an working example or link to a working sample..........  i will attach an image of what i want to create.... Thank You very much in advance

[knives]

Hi can anyone give me a sample or link of Stackbar Chart that use a Drill-Down????????  also the Drill Down Chart will appear in another DIV 

Thank You Very much in advance..............

[Vishalika]

Hi,

 

The drill down feature can be done in Stacked Column chart and the linked chart can be made to render in another <div> container.

 

Check out the JSFiddle link for the same: http://jsfiddle.net/vishalika/ru3zdcr1/2/

 

Hope this helps.

[knives]

Hi,

 

Thank You so much Vishalika for your support!  Gotta study this...........

[knives]

Hi Vishalika,

            as of now i am studying drill down now i need a sample of drill down in pie chart i try to replicate the drill down in stackedbar but 

i did not succeed. Can you give me a sample of drill down in pie chart????? more or less does Fusion Chart have a documentation of drill down 

of all chart types??????  if any can you give me the link for that???  

 

Thank You very much Vishalika

[Vishalika]

Hi,

 

To understand drill down and its functionality refer the following links:

1.  http://www.fusioncharts.com/features/linkedcharts-for-drill-down/

2.  Documentation link: http://docs.fusioncharts.com/tutorial-getting-started-adding-interactivity-setting-up-drill-down.html

 

A sample JSFiddle created as per your requirement of Pie chart: http://jsfiddle.net/vishalika/pp7yzt8e/1/

 

Hope this helps.

[knives]

Hi Vishalika,

 

Thank You very much for your support  I am now able to render Drill Down................

I am now improving my skills in Fusion Charts as of now I am able to render Thumbnail and Drill Down.

Now I am facing another problem..........

As i said I am rendering a Thumbnail the problem is how can I used the configureLink()

if I am rendering a Thumbnail...........

 

This is the way I will used my project

1. first the charts will load 

2. i will click the thumbnails to render other chart to the big DIV

3. i will click the newly Render chart to see the Drill data of that chart

 

Again my question is how can I used the configureLink() especially i want to change the Chart Type

for example from StackBar to PieChar or from PieChart to ColumnChart

I will include my working codes with this i am able to render Drilldown but in only 1 chart..........

I wish i clearly explain my problem......... i am not really good at explaining things..........

 

Thank You Vishalika for the support...................

 

FusionCharts.ready(function(){

 

    

var createThumbNail = function(chartId, width, height, divId) {

        var chartRef = FusionCharts(chartId),

            clonedChart = chartRef.clone({

                "width": width,

                "height": height

 

            });

 

        clonedChart.setChartAttribute({

            "showValues": "0",

            "showLabels": "0",

            "animation": "0",

            "exportEnabled": "0",

            "showTooltip": "0",

            "showHoverEffect": "0",

            "showYAxisValues": "0",

            "caption": "",

            "subCaption": "",

            "xAxisName": "",

            "yAxisName": "",

            "showXAxisLine": "0",

            "showYAxisLine": "0",

            "numDivLines": "0",

            "enableSlicing": "0",

            "enableRotation": "0",

"showLegend" : "0"

        });

 

        clonedChart.addEventListener('chartClick', function() {

            FusionCharts(chartId).render('chart-container');

        });

 

        clonedChart.render(divId, 'append');

    };

 

$.ajax({

async: false,

type: "GET",

url : Drupal.settings.basePath + "fusion/json/daily",

data : {},

dataType: "json",

success:  function(data) {

jsonDaily = data;

}//end of success

});

 

$.ajax({

async: false,

type: "GET",

url : Drupal.settings.basePath + "fusion/json/weekly",

data : {},

dataType: "json",

success:  function(data) {

jsonWeekly = data;

}//end of success

});

 

$.ajax({

async: false,

type: "GET",

url : Drupal.settings.basePath + "fusion/json/pie",

data : {},

dataType: "json",

success:  function(data) {

jsonPie = data;

}//end of success

});

 

 

 

var weekly = new FusionCharts({

"type": "msstackedcolumn2d",

"renderAt": "chart-container",

"width": "700",

"height": "500",

"dataFormat": "json",

"id": "chart1",

//"dataSource": Drupal.settings.basePath + "/chartdata2.json"

  "dataSource": jsonDaily

});

 

var quarterly = new FusionCharts({

            "type": "msstackedcolumn2d",

"renderAt": "chart-container",

"width": "700",

"height": "500",

           "dataFormat": "json",

            "id": "chart2",

            //"dataSource": Drupal.settings.basePath + "/chartdata2.json"

           "dataSource": jsonWeekly

        });

 

var Pie = new FusionCharts({

        "type": "pie2d",

        "renderAt": "chart-container",

"width": "700",

"height": "500",

  "dataFormat": "json",

"id": "chart3",

//"dataSource": Drupal.settings.basePath + "/chartdata2.json"

  "dataSource": jsonPie

    });

 

// create thumbnails for all the three charts

createThumbNail('chart1', 150, 150, 'thumbnail1');

createThumbNail('chart2', 150, 150, 'thumbnail2');

createThumbNail('chart3', 150, 150, 'thumbnail3');

 

weekly.render();

 

weekly.configureLink({

type: 'column2d',

width: '300',

height: '250',

   renderAt: 'drill' ,

overlayButton: {

message: ' X ', // Set the button to show letter "X"

bgColor:'#999999',

borderColor: '#cccccc'

}

});

 

 

 

 

 

}); // end of code