Pie chart in bubble chart

[Santhosh]

Hi,

I would like to know whether the pie chart can be placed in place of bubble in bubble chart

[Dharanidharan Dharmasivam]

Hi Santhosh, 

Thanks for contacting Syncfusion support. 

We have analyzed your query. Your requirement can be achieved as work around using annotation feature. In this you need to render the pie chart in a div element and you need to use that div element as annotation. In the sample we have used same pie chart for all points and if you need different pie chart, you have to render multiple charts and then need to use those for annotation. Find the code snippet below. 

 

Also, you need to specify the range for x axis and in annotation, you need specify the coordinateUnit property as points and x, y points to render the annotation(pie chart) with specified point. 

JS: 

//Div to render pie chart 

<div id= "hightemp" style="display:none; height:80px;width:80px;"> 

</div> 

 

$("#hightemp").ejChart({ 

                series: 

                      [{ 

                          points: [{ x: 'X1', y: 2 }, 

                         { x: 'X2', y: 1 }, 

                         { x: 'X3', y: 3 }, 

                         { x: 'X4', y: 5 }], type: 'pie' 

                      }], 

                legend: { visible: false } 

            }); 

 

  $("#container").ejChart({ 

          //… 

          annotations: [ 

                     { visible: true, content: "hightemp", coordinateUnit: "points", x: 10, y: 45 }, 

                     { visible: true, content: "hightemp", coordinateUnit: "points", x: 20, y: 52 }, 

                      { visible: true, content: "hightemp", coordinateUnit: "points", x: 30, y: 59 }, 

                       { visible: true, content: "hightemp", coordinateUnit: "points", x: 40, y: 49 } ], 

}); 

 

Screenshot: 

 

Sample for reference can be find from below link. 

http://jsplayground.syncfusion.com/bogg1die  

 

Thanks, 

Dharani. 

[Santhosh]

Thanks for the support Dharanidharan Dharmasivam, I would like to get the clicks on the plot in above chart, and also to get the x and y points of the plot

[Dharanidharan Dharmasivam]

Hi Santhosh, 

 

Thanks for your update.  

Since the pie chart is rendered inside the chart by using the annotation feature. So we can’t directly use the pointRegionClick event in chart to get x and y points of the pie chart. We need to bind click event to the annotation element and then we can able to get the x and y values of the pie chart from the ID of that element. Now, we have shown alert box with series index, point index, x and y values. Find the code snippet below. 

[JS] 

$(document).ready(function(){ 

              $("#annotation_group_container").click(function(args){ 

                             var series = args.target.id.substring(args.target.id.indexOf("_Series"),args.target.id.indexOf("_Point")); 

                             var seriesIndex = parseInt(series.substring(7)); 

                             var point =args.target.id.substring(args.target.id.indexOf("_Point")); 

                             var pointIndex = parseInt(point.substring(6)); 

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

                                                           

                             alert("SeriesIndex : "+seriesIndex + "pointIndex : "+pointIndex +" xValue: "+               

                                         chart.model.series[seriesIndex].points[pointIndex].x 

                                         +" yValue: "+ chart.model.series[seriesIndex].points[pointIndex].y) 

              }); 

}); 

Screenshot: 

 

Sample for reference can be find from below link. 

http://jsplayground.syncfusion.com/01epy1vu  

Thanks, 

Dharani. 

[Santhosh]

Thanks for the quick reply.

I would like to know whether the annotations can be put in the center of the cell?

[Dharanidharan Dharmasivam]

Hi Santhosh, 

We have analyzed your query and prepared a sample with respect to your requirement. Depends upon the range specified for x and y axis, the intervals will be calculated and the points will be rendered. If you need to place the annotation in the center of the grid cell, then you need to specify the range, x and y values in the annotation property depends upon your requirement. Find the screenshot below. 

 

Find the modified sample from the below link. 

http://jsplayground.syncfusion.com/kicu5qi2  

Also you can use the left, right , top and bottom of margin properties to reposition the rendered annotations. Find the code snippet below. 

JS: 

$("#container").ejChart( 

                  { 

                   annotations: [{ 

                                           visible: true, content: "hightemp", coordinateUnit: "points", x: 10, y: 45, 

                                           margin: { 

                                                           bottom: 10, 

                                                           top: 10, 

                                                           left: 10, 

                                                           right: 10 

                                           } 

              }, 

], 

Kindly revert us, if you have any concern. 

Thanks, 

Dharani.