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.
Unfortunately, activation email could not send to your email. Please try again.

Pie chart in bubble chart

Thread ID:

Created:

Updated:

Platform:

Replies:

129275 Mar 9,2017 02:43 AM Mar 13,2017 08:05 AM JavaScript 5
loading
Tags: ejChart
Santhosh
Asked On March 9, 2017 02:43 AM

Hi,

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

Dharanidharan Dharmasivam [Syncfusion]
Replied On March 9, 2017 09:08 AM

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. 


Santhosh
Replied On March 9, 2017 11:53 PM

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 [Syncfusion]
Replied On March 10, 2017 02:30 AM

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 + "\npointIndex : "+pointIndex +"\n xValue: "+               
                                         chart.model.series[seriesIndex].points[pointIndex].x 
                                         +"\n yValue: "+ chart.model.series[seriesIndex].points[pointIndex].y) 
              }); 
}); 


Screenshot: 
 

Sample for reference can be find from below link. 

Thanks, 
Dharani. 


Santhosh
Replied On March 10, 2017 04:49 AM

Thanks for the quick reply.

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

Dharanidharan Dharmasivam [Syncfusion]
Replied On March 13, 2017 08:05 AM

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. 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;