Set the chart property of the "linkedchart" dynamically

[SantoshNavle]

Hi,

I have been able to load a India Map using Fusincharts Map. Also on every click of state I have been able to render the respective state map dynamically using the below code 

On each EntityClick I have configure the link to drill down the respective state using the below method.

"entityClick": function (evt, data) {
	// Method call
  configureLink(evt, data);
}

// Method defined
 var configureLink = function (evt, data) {
   switch (data.id) 
   {
       
     case "001": evt.sender.configureLink({ "type": "maps/andamanandnicobar" }, 0);break;
     case "002": evt.sender.configureLink({ "type": "maps/andhrapradesh", }, 0);break;
     case "003": evt.sender.configureLink({ "type": "maps/arunachalpradesh" }, 0); break;
     
     //like wise i have loaded for each state.
   }
 }

The above method works well and the respective district are loaded on every click of State.

What i need is to configure the linkedchart dynamically 

"linkeddata": [{
  "id": "001",
  "linkedchart": {
    "chart": {
      "caption": "State",
      "subcaption": "State",
      "entityFillHoverColor": "#E5E5E9",
      "showLabels": "1",
      "entityFillColor": "#A8A8A8",
      "theme": "fusion",
      "showBorder": "1",
      "bordercolor": "#FFFFFF",
      "entityborderThickness": "3"
    },
    "colorrange": {
      "startlabel": "Low",
      "endlabel": "High",
      "code": "#e44a00",
      "minvalue": "0",
      "gradient": "1",
      "color": [{
        "maxvalue": "150",
        "displayvalue": "Average",
        "code": "#f8bd19"
      }, {
        "maxvalue": "600",
        "code": "#6baa01"
      }]
    },
    "data": [{
      "id": "HI",
      "value": "99"
    },
    
    //like wise load every district dynamically.....
             
    ],
  }
}],

How can i dynamically set all the above attributes for a chart within "linkedchart". ?

Which event of a chart can help me to dynamically add the attributes whenever an entity is clicked on parent map (india map). 

Also every district i need to assign different color like for Maharashtra > Pune district i need an yellow color.. likewise for every district.

For the attached image. I have loaded the India Map with custom color for every state.

With the above methods i have dynamically configured the link for every click on the state. As you can see i have loaded the respective district also.

How can i set the data  and color on each data of the a particular district dynamically ?

Please help ! Let me know if you need any more information

I have been using FusionCharts Suite XT  v3.15.1-sr.1

 

[Ayan Bhadury]

Hi Santosh,

I hope you are doing good.

For drill-down chart you need to load the parent and child data at the beginning i.e. while rendering the parent chat the child chart data (linked chart data) also needs to be loaded, as of now, it is not possible to load child chart data asynchronously.

[SantoshNavle]

Thanks Ayan for your feedback !

Well I managed to figure it out. I done this on an event named "linkedChartInvoked"

 "events": {
"linkedChartInvoked": function (evt, data) {
	var mapname = data.clickedEntity.config.label.toString().toLowerCase();
  	var chartObj = FusionCharts("map-" + mapname.replace(/ /g, ''));
  	
  	chartObj.setJSONData(getLinkedChartData(mapname); //Populate the data for the linked chart.
                         
  	var chartData = chartObj.getJSONData()['data']; // Just to check if the data is being populated.
  },
}

var getLinkedChartData = function (state) {
	var chartdata;
	var districts = [];
	// got the requird data from the database and 
	//--
	// -- 

    $.each(result.detail, function (key, value) {
    districts.push({
    "id": "id of the linked chart",
    "value": "yourvalue",
    "color": "yourcolor",
    "fontColor": "fontcolor",
    });

    chartdata = {
    "data": districts,
    "chart": {
    "caption": "Caption",
    "subcaption": "Sub caption",
    "showLabels": "1",
    "entityFillColor": "#FFFFFF",
    "theme": "fusion",
    "showBorder": "1",
    "bordercolor": "#5c5c5c",
    "entityborderThickness": "1",
    "nullEntityColor": "#FFFFFF",
    "entityFillColor": "#E82727",
    "entityFillHoverColor": "#FFFFFF",
    "baseFontSize": "10",
    "showLegend": "0",
    "dataLoadStartMessage": "Please wait, chart is loading the data....",
    "dataLoadStartMessageFontSize": "14",
    }
}

Hope this helps someone.

Thank you 

[Ayan Bhadury]

Good to know that the problem is solved.

[vjj]

@SantoshNavle Can you please explain how you have placed the dynamic content within parent data? I able to get the data dynamically on click in parent level but not sure how to place this data in parent data

[SantoshNavle]

@vjj You need to define this on an attribute named linkedChartInvoked, call method within this attribute to set various chart properties.

[vjj]

@SantoshNavle Thanks for the response. I tried this but it replaces the parent data but not the child data. How to set linkedchart array within parent json. If you have any fiddle it could be helpful..

Sample example below.

FusionCharts.ready(function () {
      var fusioncharts = new FusionCharts({
        type: 'column2d',
        renderAt: 'chart-1,
        dataFormat: 'json',
        dataSource: {
          // Chart Configuration
          chart:{
           //chart configs
          },
          "data": data.data,
          "linkeddata": [], // how to set this array in dynamic way.?
          "dataset": data.dataset,
          "categories": data.categories,
          "lineset": data.lineset,
        },
        events: {
          beforeLinkedItemOpen: function(ev:any, props1:any) {
             console.log('beforeLinkedItemOpen ev--',ev);
             console.log('beforeLinkedItemOpen props--',props1);
          },
          dataPlotClick: function(ev:any, props1:any) {
             console.log('data click--',props1.categoryLabel);
             
			 //fetch dynamic content on click of any plot
             let fetch = fetchDrillDownData(props).then(x=>{
               
              let categories = x.fields.categories
              let dataset = x.fields.dataset;
  
              console.log(categories);
             
              let linkeddata = [] as any;
              let linkedchart = {} as any;
              linkedchart["chart"]= {
               //dynamic chart config
              };
              linkedchart["categories"] = categories;
              linkedchart["dataset"] =dataset;
              linkeddata.push({"id":"level-0-"+props.categoryLabel,"linkedchart":linkedchart});
              console.log('linked----',linkeddata);
               //tried all below variants which is not working
              fusioncharts.setJSONData(linkeddata);
              fusioncharts.setChartData({'linkedchart':linkeddata});
            });
          }
        }
      });