setChartAttribute does not work?

[Nicolas B.]

Hello,

 

So I am trying to change various properties of a map at runtime but obviously I'm not doing it right.

 

According to this page of the documentation (http://docs.fusioncharts.com/maps/Contents/javascript/js_change_chart_properties.html), all I should have to do is: 

this.FusionMap = new FusionCharts("World", "map_" + self.Model.Guid, self.Model.Width, self.Model.Height);
this.FusionMap.setXMLUrl("/Libraries/FusionMaps/Data.xml");
this.FusionMap.render(this.Content[0]);

this.FusionMap.setChartAttribute("fillColor", "A9C2CA");

The map renders, but the fillColor does not change. I tried other various properties, but nothing happens.

 

I also tried to call setChartAttribute much later after the map is rendered, still no luck.

 

What am I doing wrong?

 

Thanks

[Guest Rishab]

Hi,

The setChartAttribute() API can be called through a Button click or adding an Event listener to update the properties at runtime.

Please find the below code which will update the fill color once the chart is rendered through "Rendered" event listener.

Ref. Code:

      var myMap = new FusionCharts("World", "myMapId", "750", "400", "0");
      myMap.setXMLUrl("Data.xml");
      myMap.render("mapContainer");
      FusionCharts("myMapId").addEventListener("rendered", function (e, a) {
      FusionCharts("myMapId").setChartAttribute("fillColor", "FF90856");});

Hope this helps!

[Nicolas B.]

Hi Rishab,

 

Thank you for your reply. Indeed, calling setChartAttribute in the rendered event handler does work.

 

Thanks!

[Nicolas B.]

Ok it actually almost works. I now have a problem that is related.

 

My application allows users to change the map at runtime. When they do change the map, the map is cleared by calling the dispose method and is new (re)created. What happens is that when they load a map that has been loaded before, the properties are reset.

 

For example:

  - load France --> it will appear with default style but properties will be changed in a second (the time the rendered event kicks in I guess) --> good

  - load France Departments --> it will appear with default style but properties will be changed in a second --> good

  - reload France --> it will appear with modified style but default style will be applied back in a second --> why?

 

My code that updates the map:

var self = this;

if (this.FusionMap) {
    FusionCharts("map_" + self.Model.Guid).dispose();
    this.FusionMap = null;
}

this.FusionMap = new FusionCharts(self.Model.Properties.View, "map_" + self.Model.Guid, "100%", "100%");
this.FusionMap.setXMLUrl("/Libraries/FusionMaps/Data.xml");
this.FusionMap.addEventListener("rendered", function (e, a) {
    self.FusionMap.setChartAttribute({
        // Numerous properties changes that I'm not pasting 
    });
});
this.FusionMap.render(this.Content[0]);

Any help is appreciated - thanks!

 

edit - the properties changed are dynamic as well so it's not just a matter of updating the Data.xml

Edited August 13, 2013 by Nicolas B.

[Nicolas B.]

It seems like the "rendered" event is fired too early when loading a map that has been loaded before - is that possible?

[Guest Rishab]

Hi,

When reloading the France chart, Please first dispose FranceDepartments chart and then  re-create France chart.

 

Once the France chart is re-rendered through "Rendered" event listener update the properties at runtime.

 

Please refer the attached code-

Hope this helps!

Maps.zip

Edited August 14, 2013 by Rishab