We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date
close icon

Pie chart in bubble chart

Hi,

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

5 Replies

DD Dharanidharan Dharmasivam Syncfusion Team March 9, 2017 02:08 PM UTC

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. 
 
Thanks, 
Dharani. 



SA Santhosh March 10, 2017 04:53 AM UTC

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


DD Dharanidharan Dharmasivam Syncfusion Team March 10, 2017 07:30 AM UTC

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. 

Thanks, 
Dharani. 



SA Santhosh March 10, 2017 09:49 AM UTC

Thanks for the quick reply.

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


DD Dharanidharan Dharmasivam Syncfusion Team March 13, 2017 12:05 PM UTC

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. 

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. 


Loader.
Live Chat Icon For mobile
Up arrow icon