Adjust the chart width with JS

[bradley]

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.

[Guest Madhumita]

Hello,

Could you please refer to the following forum link and see if this helps?

http://www.fusioncharts.com/forum/Topic22375-35-1.aspx

In case of further queries do revert.

[bradley]

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

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

[bradley]

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?

[bradley]

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?

[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

[bradley]

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.

[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

[bradley]

cool thanks, I'll take a look.

 

 

 

Sorry for that previous post, i was at the end of a very frustrating day

[bradley]

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 January 27, 2010 by Guest

[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);

}

 }