Sign in to follow this  
Guest Madhumita

Adjust the chart width with JS

Recommended Posts

I'm trying to set the width of a chart dynamically based on an ajax request (that also contains the new data to be loaded)

 

 

 

I run:

 

currentChart.setDataXML(data.chart);

currentChart.setAttribute("width",data.width);

currentChart.render("some_div");

Where:

 

data.chart is the chart XML

 

data.with is some pixel width as a string

 

 

 

And it works the first time. However the second time (ie. another ajax request) when I say

currentChart.render("some_div");

it resets the data to the data of the first request. Why is this so? Is there a way to change the chart width without re-rendering. What is the method that a person would change the data and width and regenerate the chart.

Share this post


Link to post
Share on other sites

So if I can just summarize the steps I should take to have my charts working with ajax and different widths:

 

 

 

First request:

 

- Initialize my chart

currentChart = new FusionCharts("/FusionCharts/MSColumn2D.swf", "chart_flash_id", chartWidth, chartHeight, "0", "1");

 

- set chart data from request

 currentChart.setDataXML(someXMLstring);

 

- set chart width from request data

 currentChart.setAttribute("width",someWidth);

 

- render chart

 currentChart.render("someDivId");

 

subsequent requests

 

- set chart data from request

 currentChart.setDataXML(someXMLstring);

 

- set chart width from request data

 currentChart.setAttribute("width",someWidth);

 

- set the inner html of flash DOM element to the Swf html

 document.getElementById("chart_flash_id").innerHTML( currentChart.getSWFHTML() );

 

 

 

And this should refresh my chart automatically with a new width and data ??? Just to confirm I'm only using render once...

Share this post


Link to post
Share on other sites
Guest Madhumita

Hello,

 

 

 

Yes this would do.

 

 

 

The code used below is equivalent to the render function.

 

 

 

document.getElementById("chart_flash_id").innerHTML( currentChart.getSWFHTML() );

 

 

 

Now, you can use the render function here also. But in case you require to specify the height and widht of the chart in percentage, you need to use this code in place of the render function, as a workaround. Otherwise the ajax chart will not render.

 

 

 

Hope this helps. :)

Share this post


Link to post
Share on other sites

hey sorry one more question. Why am I setting the innerHTML on the flash object? That "chart_flash_id" is the ID i used when instantiating the JS chart object, which is what is applied to the embed tag. When I call getSWFHTML() I get that embed tag back, so that would be setting the innerHTML of the embed to itself. Don't you really mean I want to set the innerHTML to the surrounding div, ie. the one that I rendered the flash in in the first place?

 

 

 

Here's an example:

 

<div id="chart_wrapper"></div>

 

currentChart = new FusionCharts("/FusionCharts/MSColumn2D.swf", "chart_flash_id", chartWidth, chartHeight, "0", "1");

 

now after setting the currentChart div and rendering it to "chart_wrapper", if I call currentChart.getSWFHTML() I get the embed object back, (which i can't seem to display here as the forum views it as an actual html tag)

 

 

 

Anyway, I'm pretty sure i want to do

 

document.getElementById("chart_wrapper").innerHTML( currentChart.getSWFHTML() )

 

No?

Share this post


Link to post
Share on other sites

Ok this doesn't work. WHen I make my ajax request and call currentChart.setDataXML(newXML) then call currentChart.getSWFHTML() it contains the old XML, so it never updates. What do I need to do to get that method to return with the new data?

Share this post


Link to post
Share on other sites
Guest Madhumita

Hello,

You can use something like this:

 var url = 'second2d.xml'

  var xmlDoc = requestXMLUsingAJAX(url);

  var chartHeight = 400;

  //var chartWidth = 400;

  var myChart2 = new FusionCharts("Bar2D.swf", "myChart2Id", "100%", chartHeight, 0, 0);

  myChart2.setTransparent(true);

  myChart2.setDataXML(xmlDoc);

  //myChart2.render("ajaxdiv");

 document.getElementById("chartdiv").innerHTML = myChart2.getSWFHTML();

I am also attaching the exmaple for your reference.

Hope this helps.

AjaxChart.zip

Share this post


Link to post
Share on other sites

seriously, the only way to do this is to instantiate a new FusionCharts object each time? That's pretty shoddy.

 

 

 

I feel like I'm being led on a wild goose chase here. This seems like a pretty obvious feature. Adjust the size and data of a current chart and reload. Do you guys really know what's going on over there?

 

 

 

Why for instance, if I'm forced to instantiate a new object, would I bother with the innerHTML when I can just call render on that object, since it obviously hasn't been rendered yet if I'm creating a new one each time.

 

 

 

Is there anyone there that can actually program?? I'm sorry this is pretty harsh but every solution I've been given thus far has been incorrect or sub-par.

Share this post


Link to post
Share on other sites
Guest Madhumita

Hello,

I am attaching a new FusionCharts.js, where we have modified the setDataXML method to fit your requirements.

Now, you do not have to instantiate a new FusionCharts object. You can directly do a setDataXML on the original FusionCharts object and then use the getSWFHTML() method to modify the innerHTML of the chart, as you were previously trying to do.

I hope this helps you. :)

FusionCharts.zip

Share this post


Link to post
Share on other sites

Hey just out of interest sake, can you tell me what was modified? I don't actually see anything different in the setDataXML method, setDataURL however is completely different. I haven't actually played around with this yet to test it, just thought I'd ask.

 

 

 

I don't really understand the two methods of adjusting the data, one using addVariable and the other with the "external" interface. What's the point?

Edited by Guest

Share this post


Link to post
Share on other sites
Guest Madhumita

Hi Bradley,

I made the following change in setDataURL methos in the FusionCharts.js file:

 

setDataURL: function(strDataURL){

 

 this.addVariable('dataURL',strDataURL);

 

 }

Previously it was,

setDataURL: function(strDataURL){

//This method sets the data URL for the chart.

//If being set initially

if (this.initialDataSet==false){

 this.addVariable('dataURL',strDataURL);

 //Update flag

 this.initialDataSet = true;

}else{

 //Else, we update the chart data using External Interface

 //Get reference to chart object

 var chartObj = infosoftglobal.FusionChartsUtil.getChartObject(this.getAttribute('id'));

 

 if (!chartObj.setDataURL)

 {

__flash__addCallback(chartObj, "setDataURL");

 }

 

 chartObj.setDataURL(strDataURL);

}

 }

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
Sign in to follow this