Filtering Data in Bubble Chart

[Karthick]

Hi,

I am binding data to bubble chart from controller. ONce it is loaded, i need to display chart by filtering specific data either from a dropdown or checkbox. Filtering has to be done through javascript and the page should got get reloaded. Is it possible to do that? I have attached my code.

Thanks,

Karthick

Attachment: BubbleChartFilter_91535d7b.zip

[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 for bubble series using check box. 

Please refer the code example below 

 

[Client side] 

 

   function getfiltervalues(sender) { 

        var param = (sender.checked) ? "filterData" : "NormalData"; 

      $.ajax({ 

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

          type: "Post", 

          data: { 'filter': param }, 

          dataType: "json", 

          success: function (data) { 

              var chart = $("#container").ejChart("instance"); 

              chart.model.series[0].dataSource = data; 

              chart.model.series[0].xName = "XBusinessValue"; 

              chart.model.series[0].yName = "YTechnologyHealth"; 

              chart.model.series[0].size = "CostOfOwnership"; 

              chart.model.series[0].pointColorMappingName = "bubbleColor"; 

            chart.redraw(); 

          }, 

      }); 

    } 

[Server Side] 

 

        [HttpPost] 

        public ActionResult Filter(string filter) 

        { 

            List<BubbleChartPopulationData> oBubbleChartPopulationData = (filter.ToString() == "filterData") ? BubbleChartPopulationData.GetDataFiltered() : BubbleChartPopulationData.GetData(); 

            return Json(oBubbleChartPopulationData); 

        } 

 

In the above code, we are using check box to filter the bubble data . When we click on check box, to get the filter data from server and binding this filter data to the bubble chart and when we uncheck the checkbox, to get the normal data from controller and binding this data to the chart.  

 

Note : You can change this code with respect to your requirement. 

 

Kindly find the sample from the below location. 

Sample Link : https://www.syncfusion.com/downloads/support/forum/133101/ze/Sample-1822555672 

  

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 Kumar for your help. You made my work simple. My requirement is addressed and it looks very good. Thanks again. There is only one issue which i am facing on this, major/minor lines are not visible after the filtering. I tried adding it through javasacript using chart.model.primaryXAxis.range.min /max/interval but didnt work. any other thoughts?

[Saravana Kumar Kanagavel]

Hi Karthick,  

 

Thanks for your update. 

 

We have analyzed your query and currently you are using category axis to render the bubble series. In the case , if you have set the range while filter the data , then range will not consider for the category axis. Without changing any grid lines or axis label, we suggest to use the Numeric axis by setting the ValueType as Double and in the scenario , you can setting the min / max / interval. 

 

And we have modified the sample for your reference and attached in the below location. 

 

Sample Link : https://www.syncfusion.com/downloads/support/forum/133101/ze/DateTimeAxis-1474926698 

  

In addition , if you want to achieve this requirement in category axis, you need to pass the YValue as null for non-filter data. 

 

And also we have prepared the sample for this and attached in the below location. 

 

Sample Link : https://www.syncfusion.com/downloads/support/forum/133101/ze/CategoryAxis-576403250 

  

Please let us know if you have any concern. 

 

Regards, 

Saravana Kumar K. 

[Karthick]

Hi Saravana Kumar,

Sorry for the delay in responding to this. I tried the CatagoryAxis example in the code and it worked as expected. Thanks a lot for the help.

Thanks,

Karthick

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