Sign in to follow this  
retheesh.r

Advanced Bubble chart

Recommended Posts

Hi Team,

 

I have a requirement to render a bubble chart based on multiple axis values.  I have attached the sample look of the chart. Please let me know whether it is possible with fusion charts. I am looking for a solution with Javascript/Jquery.

 

Let me know if we can achieve something similar also.

 

Please advice.

 

Thanks

Retheesh R

post-62445-0-64537700-1391491713_thumb.png

Share this post


Link to post
Share on other sites

Hi,

 

Welcome to FusionCharts Forum  :)

 

FusionCharts XT Bubble chart is used for plotting data, which is defined in terms of three numeric parameters X,Y and Z.  The parameters X and Y represent the co-ordinate positions for placing the bubble. The third parameter Z is used to indicate the diameter of the bubble.

 

For more information on Bubble chart, refer : http://docs.fusioncharts.com/charts/contents/index.html?AttDesc/BubbleScatter.html

 

Please check our demo gallery of Bubble charts at http://www.fusioncharts.com/explore/bubble-xy-charts

 

From your screenshot, it is seen that you have two axes - X axis and Y axis.  Could you please confirm if you want to plot the Bubble chart with three numeric parameters? If yes, please let us know what the third parameter represents.

 

Awaiting your response.

Share this post


Link to post
Share on other sites

Hi

 

Thanks for a quick response. I have already read through the examples you pointed out. My requirement is a bit different. If you go through the image which I attached...

 

The chart is controlled through multiple values.

 

You can see -X and X axes. One measure will decide the bubble to be on the -ve side or positive side. x axis has only one measure. Then the size of the bubble is from another measure and the color from another measure.

 

I think you have got a hook on my requirement. 

 

Thanks

Share this post


Link to post
Share on other sites

Hi,

 

If your requirement is to divide the chart to show negative and positive sides and depending on the values of x-axis you want to place the bubbles on either positive or negative side, then this can be achieved using FusionCharts.

 

It is possible to have categories specifying the number of categories you want the chart to show, and then place have the bubble placed in its respective category depending on its value.

 

Please find the attached sample XML and a screenshot of chart obtained using the XML. In the chart, the x-axis is divided into two categories - negative (-100 to 0) and positive (0 to 100). If the value of x is negative, the bubble is placed in the negative side and if it is positive it falls on the positive side.

 

The size of the bubble is determined by the parameter z.  You may use the attribute "color" to specify the color of the bubble.

 

Hope this helps.

Data1.xml

post-37797-0-06201300-1391600688_thumb.png

Share this post


Link to post
Share on other sites

Thanks you Haritha.

 

Two more questions,

 

1. Is it Possible to show the Y Axis on the center with the labels as shown in my attachment? Instead of on the left side. I mean I need the Y axis line with labels on the center where you are showing a vertical line(0,0).

 

2. Is it possible to zoom this bubbles ?

3. Is it possible to show some information on click of each bubble specific to that point?

 

 

Thanks

Share this post


Link to post
Share on other sites

Hi,

 

Please find the answers below:

 

1. Is it Possible to show the Y Axis on the center with the labels as shown in my attachment? Instead of on the left side. I mean I need the Y axis line with labels on the center where you are showing a vertical line(0,0).

Ans: It is not possible to show the y-axis of the chart on the center of the chart, as of now. But as a workaround, you may use two Bubble charts one beside the other (as though they are clubbed) and then show the y-axis of the second chart by not showing it for the first chart. By doing this, you will be able to achieve your requirement.

 

2. Is it possible to zoom this bubbles ?

Ans: Do you want to have the feature of zooming the bubbles by dragging the mouse cursor across the chart canvas? If yes, this feature is not supported by Bubble chart, as of now.

 

You may increase the size of the bubble by increasing its diameter, as already said above.

 

3. Is it possible to show some information on click of each bubble specific to that point?

Ans: The information about the bubble is shown as a tool tip when you hover over the bubble. If you want to show the information by clicking on the bubble, then you may use "link" attribute of set element and call a JavaScript function. In this function, you may use some dialog (eg jQuery Dialog) and show the information as desired.

 

For information about "link" attribute, you may refer : http://docs.fusioncharts.com/charts/contents/DrillDown/Simple.html

 

Hope this helps.

Share this post


Link to post
Share on other sites

Thanks for the information.. I have achieved something similar using two charts side by side... But one more question. If yo see my chart sample the same data on the +X axis is getting plotted on -X axis also.. It is actually not negative values. 

 

As you can see on the negative side the order is to be reversed... Is there any way I can do that without tweaking the data to -ve for that axis.

 

Thanks

Share this post


Link to post
Share on other sites

Thanks for the information.. I have achieved something similar using two charts side by side... But one more question. If yo see my chart sample the same data on the +X axis is getting plotted on -X axis also.. It is actually not negative values. 

 

As you can see on the negative side the order is to be reversed... Is there any way I can do that without tweaking the data to -ve for that axis.

 

Thanks

Hi,

 

It seems you have placed 2 charts side by side to show it as a clubbed single Bubble chart. Hence, you can display the positive values on both the charts.

 

The clubbing joint can act as the centre Y-axis and the right and left side of the chart can display the data accordingly.

 

Hope this helps. :)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this