knives

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

Recommended Posts

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

post-65125-0-36791700-1422437400_thumb.jpg

Share this post


Link to post
Share on other sites

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..............

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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

 

 

 

 

 

 

post-65125-0-04856300-1422609989_thumb.png

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now