I'm trying to make a bubble chart and draw a line to seperate the bubbles into two areas one bellow the line and one above it. so can i combine google's visualisation bubble and line chart? if not are there any other alternatives to google visualisation?
Asked
Active
Viewed 4,113 times
2 Answers
1
The combochart chart type does not support bubble charts currently. That means you won't be able to combine them that way.
As the help documents state, the following chart types are supported in Combo Charts for seriesType:
The default line type for any series not specified in the series property. Available values are 'line', 'area', 'bars', 'candlesticks' and 'steppedArea'.
Since scatter (XY) charts aren't supported either, you can't do something funky like making a bunch of series and changing the size of bubbles manually. So you need to try something trickier.
Option 1: Funky CSS
Note: This will absolutely positively not work on many versions of IE.
Step 1: Create 2 overlapping <div> elements of the same size.
Step 2: Format two separate Google Visualization charts with the same chartArea options.
Step 3: Create a function to determine max/min values for both charts to make sure they are on the same scale.
Sample:
// Take the Max/Min of all data values in all graphs
var totalMax = 345;
var totalMin = -123;
// Figure out the largest number (positive or negative)
var biggestNumber = Math.max(Math.abs(totalMax),Math.abs(totalMin));
// Round to an exponent of 10 appropriate for the biggest number
var roundingExp = Math.floor(Math.log(biggestNumber) / Math.LN10);
var roundingDec = Math.pow(10,roundingExp);
// Round your max and min to the nearest exponent of 10
var newMax = Math.ceil(totalMax/roundingDec)*roundingDec;
var newMin = Math.floor(totalMin/roundingDec)*roundingDec;
// Determine the range of your values
var range = newMax - newMin;
// Define the number of gridlines (default 5)
var gridlines = 5;
// Determine an appropriate gap between gridlines
var interval = range / (gridlines - 1);
// Round that interval up to the exponent of 10
var newInterval = Math.ceil(interval/roundingDec)*roundingDec;
// Re-round your max and min to the new interval
var finalMax = Math.ceil(totalMax/newInterval)*newInterval;
var finalMin = Math.floor(totalMin/newInterval)*newInterval;
Step 4: Set the background color to transparent using backgroundColor: "transparent" for the <div> element on top. (This is the step that makes IE cry)
Step 5: Draw both charts using the same scaled axes, in the two overlapping <div> elements.
Step 6: See if it looks right. Interactivity may be a bit of a pain depending on browser because of the overlapping elements. You may need to write your own fancy code for the top chart to move the Z-index of that <div> to the back when one of the selectable chart elements isn't being hovered.
Option 2: Scatter Chart Fun
This will work in IE as well, and is less tricky, but will be a lot harder to set up data-wise.
Step 1: Create your line chart series and your bubble chart points in a DataTable. How you set this up will change dramatically depending on your data, and how you want the bubbles/lines to line-up.
Sample:
I want these bubbles:
X Y Size
1 2 3
2 3 4
3 4 5
4 5 1
5 1 2
But I want this line:
X Y
1.2 5
2.3 4
3.4 3
4.5 2
5.6 1
Then I would need to have all those different X values in the first column, and have a lot of null values for the various series, as follows:
X Line Bubble Size
1 null 2 3
2 null 3 4
3 null 4 5
4 null 5 1
5 null 1 2
1.2 5 null null
2.3 4 null null
3.4 3 null null
4.5 2 null null
5.6 1 null null
Step 2: Set the view to columns 1/2 so that it only plots XY values for the two series (column 3 is bubble sizes, which you don't want to display as an extra series).
Step 3: Set the options for each series. Series 1 (the line chart) would have lineWidth: 1 or whatever you want, and series 2 would have lineWidth: 0 (so that each item is a point).
Step 4: Set bubble sizes with pointSize for the bubble series. Unfortunately, the entire series would have the same pointSize. So in the above example, we would need to either reformat our DataTable to have each different bubble in a different series (many more columns) or write a function that creates a new series for each different bubble size. We could then use the bubble size series to set the pointSize for each different series.
Either solution should work, depending on your application, and the complexity of your data, you should pick which works best. And let us know what you end up doing, because I'm sure someone in the future will use it!
jmac
- 7,078
- 2
- 29
- 57
