Binding TreeMap through Javascript

[Karthick]

Hi,

I have bind the treemap initially using the controller. Now i have a requirement to redraw the treemap based on a value chosen in the UI dropdown. So, I call the below javascript function on changing the drop down. i get error .redraw is not available for Treemap, guess it's available for chart alone. I tried removing that line and run the application but the treemap is not updated. Can you please advise on how it can be achieved?

 <script type="text/javascript">

            function getfiltervalues(selectedbutton) {

                var param = selectedbutton;

                $.ajax({

                    url: '@Url.Action("FilterData", "TreeMap")',

          type: "Post",

          data: { 'filter': param },

          dataType: "json",

          success: function (data) {

              var treemap = $("#treemap").ejTreeMap("instance");

              treemap.model.dataSource = data;

              treemap.model.colorValuePath = "AppScore";

              treemap.model.weightValuePath = "WValue";

              treemap.redraw();

          },

      });

            }

    </script>

[Saravana Kumar Kanagavel]

Hi Karthick, 

 

Thanks for contacting Syncfusion Support. 

 

We have analyzed your query and prepared a sample based on your requirement. In the sample, we have filter the data based on selecting the drop down box. 

Please find the code snippet below 

 

[JS] 

function getFilterValues(sender){ 

        var param = sender.value; 

        $.ajax({ 

            url: '@Url.Action("Filter","Home")', 

            type: "Post", 

            data: { 'filter': param }, 

            dataType: "json", 

            success: function (data) { 

                var TreeMap = $("#treemap").ejTreeMap("instance"); 

                TreeMap.model.dataSource = data; 

                TreeMap.refresh(); 

            }, 

        }); 

    } 

 

In the above code, we are getting the data from server using ajax and binding this data to the tree map and redrawing tree map once. 

And you can find the sample from the below location. 

 

Sample Link : http://www.syncfusion.com/downloads/support/forum/133195/ze/Sample1667846126 

  

Please find the output of the sample below 

 

 

 

Please let us know if you have any concern. 

 

Regards, 

Saravana Kumar K. 

[Karthick]

Thanks a lot Saravana. It works for me. I couldn't find out Treemap.Refresh for binding it through javascript.

[Dharanidharan Dharmasivam]

Hi Karthick, 

Thanks for your revert. 

We have analyzed your query. In the previously provided sample, in the ajax request we have obtained the instance of treemap and here we can able to get the refresh method. Using this refresh method, we have refreshed the treemap in order to take effect of modified data source. Also we would like to let you know that, in the client side scripts, you will not get intellisense. 

For more information in method in treemap, kindly find the help document. 

If your query is misunderstood at our end, kindly provide more information on your query. 

Thanks, 

Dharani. 

[Karthick]

Thanks Saravana Kumar for your help. This issue is resolved for me.

[Saravana Kumar Kanagavel]

Hi Karthick, 

 

Thanks for your update. 

 

Please let us know if you need any other assistance on this. 

 

Regards, 

Saravana Kumar K.