Rookie
Reputation: 31
Add lines to Google Bubble Chart
I am learning to use Google Charts and I'm trying to add vertical and horizontal lines into my bubble chart (see the chart on fiddle).
<div id="series_bubble_div" style="width: 1300px; height: 600px;"></div>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<script type="text/javascript">
google.charts.load('current', { 'packages': ['corechart'] });
google.charts.setOnLoadCallback(drawSeriesChart);
function drawSeriesChart() {
var data = google.visualization.arrayToDataTable([
['May', 'Profit', 'Loss', 'Color', 'Amount'],
['One', -0.0200677317826359, 0.00783908666680255, "Blue", 2.90062193473149],
['Two', -0.000769939209045673, -0.000869129717442352, "Red", 0.393370989830078],
['Three', 0.231046771318721, -0.023, "Blue", 4.22746171],
['Four', -0.11516787308815, 0.0307, "Red", 1.58054636957],
['Five', -0.156171745810591, 0.002, "Blue", 4.478502636],
['Six', -0.0539915684061078, 0.0117, "Red", 1.396314864],
['Seven', -0.00718037723705341, -0.011, "Blue", 1.31638390999998],
['Eight', -0.0562574430733049, 0.0411, "Red", 8.39198070530399],
['Nine', 0.235522678055354, -0.005, "Blue", 8.70835673000001],
['Ten', 0.226171773714415, -0.0164, "Red", 5.66191157875001],
['Eleven', -0.0805926930562123, -0.00600000000000001, "Blue", 4.74257550999999],
['Twelve', 0.0642371105755089, 0.0675, "Red", 0.630424760336]
]);
var options = {
title: 'My graph, May 2017',
hAxis: {title: 'Profit',format: 'percent', minValue: -0.05, maxValue: 0.10 },
vAxis: {title: 'Loss',format: 'percent', minValue: -0.03, maxValue: 0.06 },
bubble: { textStyle: { fontSize: 11 } },
axisTitlesPosition: 'out'
};
var chart = new google.visualization.BubbleChart(document.getElementById('series_bubble_div'));
chart.draw(data, options);
}
</script>
In the picture below is the effect, that I want to achieve. Horizontal lines should be at +1.5% and -1.5%, vertical lines at +7% and -7%. The area between the lines should have another color than the rest of the chart area.
Do you have any idea, how to reach it?
Upvotes: 0
Views: 2086
Answers (1)
Kristaps
Reputation: 305
I don't think you can add lines / color segments into the bubble chart itself, but you could fake an effect like this by overlaying the bubble chart with line charts (you'd need two - one for the vertical lines and one for the horizontal lines), and an area chart to fill the middle. Once the charts have been created you would then have to line them up, so that they fall in the proper spot.
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawSeriesChart);
function drawSeriesChart() {
var data = google.visualization.arrayToDataTable([
['May', 'Profit', 'Loss', 'Color', 'Amount'],
['One', -0.0200677317826359, 0.00783908666680255, "Blue", 2.90062193473149],
['Two', -0.000769939209045673, -0.000869129717442352, "Red", 0.393370989830078],
['Three', 0.231046771318721, -0.023, "Blue", 4.22746171],
['Four', -0.11516787308815, 0.0307, "Red", 1.58054636957],
['Five', -0.156171745810591, 0.002, "Blue", 4.478502636],
['Six', -0.0539915684061078, 0.0117, "Red", 1.396314864],
['Seven', -0.00718037723705341, -0.011, "Blue", 1.31638390999998],
['Eight', -0.0562574430733049, 0.0411, "Red", 8.39198070530399],
['Nine', 0.235522678055354, -0.005, "Blue", 8.70835673000001],
['Ten', 0.226171773714415, -0.0164, "Red", 5.66191157875001],
['Eleven', -0.0805926930562123, -0.00600000000000001, "Blue", 4.74257550999999],
['Twelve', 0.0642371105755089, 0.0675, "Red", 0.630424760336]
]);
var options = {
title: 'My graph, May 2017',
hAxis: {
title: 'Profit',
format: 'percent',
minValue: -0.05,
maxValue: 0.10
},
vAxis: {
title: 'Loss',
format: 'percent',
minValue: -0.03,
maxValue: 0.06
},
bubble: {
textStyle: {
fontSize: 11
}
},
axisTitlesPosition: 'out'
};
var chart = new google.visualization.BubbleChart(document.getElementById('series_bubble_div'));
chart.draw(data, options);
var chartH = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'line_h_div',
dataTable: [
['x', '1', '2'],
[0, 20, 40],
[100, 20, 40]
],
options: {
hAxis: {
minValue: 0,
maxValue: 100,
textPosition: 'none',
gridlines: {
color: 'none'
},
baselineColor: 'none'
},
vAxis: {
minValue: 0,
maxValue: 100,
textPosition: 'none',
gridlines: {
color: 'none'
},
baselineColor: 'none'
},
colors: ['green'],
pointSize: 0,
lineWidth: 2,
enableInteractivity: false,
legend: {
position: 'none'
},
backgroundColor: 'transparent'
}
});
chartH.draw();
var chartV = new google.visualization.ChartWrapper({
chartType: 'LineChart',
containerId: 'line_v_div',
dataTable: [
['x', '1', '2'],
[0, 20, 40],
[100, 20, 40]
],
options: {
hAxis: {
minValue: 0,
maxValue: 100,
textPosition: 'none',
gridlines: {
color: 'none'
},
baselineColor: 'none'
},
vAxis: {
minValue: 0,
maxValue: 100,
textPosition: 'none',
gridlines: {
color: 'none'
},
baselineColor: 'none'
},
colors: ['green'],
pointSize: 0,
lineWidth: 2,
enableInteractivity: false,
legend: {
position: 'none'
},
backgroundColor: 'transparent',
orientation: 'vertical'
}
});
chartV.draw();
var chartArea = new google.visualization.ChartWrapper({
chartType: 'AreaChart',
containerId: 'area_div',
dataTable: [
['x', '1', '2'],
[0, 20, 0],
[20, 20, 0],
[20, 20, 20],
[40, 20, 20],
[40, 20, 0],
[100, 20, 0]
],
options: {
hAxis: {
minValue: 0,
maxValue: 100,
textPosition: 'none',
gridlines: {
color: 'none'
},
baselineColor: 'none'
},
vAxis: {
minValue: 0,
maxValue: 100,
textPosition: 'none',
gridlines: {
color: 'none'
},
baselineColor: 'none'
},
colors: ['none', 'green'],
pointSize: 0,
lineWidth: 1,
enableInteractivity: false,
legend: {
position: 'none'
},
backgroundColor: 'transparent',
isStacked: true
}
});
chartArea.draw();
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="series_bubble_div" style="width: 1300px; height: 600px;"></div>
<div id="line_v_div" style="width: 1300px; height: 600px; position: absolute; top:8px"></div>
<div id="line_h_div" style="width: 1300px; height: 600px; position: absolute; top:0"></div>
<div id="area_div" style="width: 1300px; height: 600px; position: absolute; top:0"></div>edit
As suggested by @dlaliberte - you can actually convert the whole thing to a scatter plot and display the desired result without having to overlay plots.
google.charts.load('current', {
'packages': ['corechart']
});
google.charts.setOnLoadCallback(drawSeriesChart);
function drawSeriesChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Profit');
data.addColumn('number', 'line');
data.addColumn('number', 'area');
data.addColumn('number', 'Loss');
data.addColumn({
type: 'string',
role: 'style'
});
data.addColumn({
type: 'string',
role: 'annotation'
});
data.addRows([
[-0.0200677317826359, null, null, 0.00783908666680255, "color: blue; stroke-width: " + 2.90062193473149 * 10, 'One'],
[-0.000769939209045673, null, null, -0.000869129717442352, "color: red; stroke-width: " + 0.393370989830078 * 10, 'Two'],
[0.231046771318721, null, null, -0.023, "color: blue; stroke-width: " + 4.22746171 * 10, 'Three'],
[-0.11516787308815, null, null, 0.0307, "color: red; stroke-width: " + 1.58054636957 * 10, 'Four'],
[-0.156171745810591, null, null, 0.002, "color: blue; stroke-width: " + 4.478502636 * 10, 'Five'],
[-0.0539915684061078, null, null, 0.0117, "color: red; stroke-width: " + 1.396314864 * 10, 'Six'],
[-0.00718037723705341, null, null, -0.011, "color: blue; stroke-width: " + 1.31638390999998 * 10, 'Seven'],
[-0.0562574430733049, null, null, 0.0411, "color: red; stroke-width: " + 8.39198070530399 * 10, 'Eight'],
[0.235522678055354, null, null, -0.005, "color: blue; stroke-width: " + 8.70835673000001 * 10, 'Nine'],
[0.226171773714415, null, null, -0.0164, "color: red; stroke-width: " + 5.66191157875001 * 10, 'Ten'],
[-0.0805926930562123, null, null, -0.00600000000000001, "color: blue; stroke-width: " + 4.74257550999999 * 10, 'Eleven'],
[0.0642371105755089, null, null, 0.0675, "color: red; stroke-width: " + 0.630424760336 * 10, 'Twelve'],
[-0.3, 0.015, null, null, null, null],
[0.3, 0.015, null, null, null, null],
[null, null, null, null, null, null],
[-0.3, -0.015, null, null, null, null],
[0.3, -0.015, null, null, null, null],
[null, null, null, null, null, null],
[-0.07, 0.09, null, null, null, null],
[-0.07, -0.03, null, null, null, null],
[null, null, null, null, null, null],
[0.07, 0.09, null, null, null, null],
[0.07, -0.03, null, null, null, null],
[null, null, null, null, null, null],
[-0.07, null, 0.015, null, null, null],
[0.07, null, 0.015, null, null, null],
[null, null, null, null, null, null],
[-0.07, null, -0.015, null, null, null],
[0.07, null, -0.015, null, null, null],
]);
var options = {
title: 'My graph, May 2017',
hAxis: {
title: 'Profit',
format: 'percent',
viewWindowMode: 'explicit',
viewWindow: {
max: -0.3,
min: 0.3
}
},
vAxis: {
title: 'Loss',
format: 'percent',
viewWindowMode: 'explicit',
viewWindow: {
max: 0.09,
min: -0.03
}
},
bubble: {
textStyle: {
fontSize: 11
}
},
series: {
0: {
lineWidth: 2,
pointSize: 0,
color: 'green'
},
1: {
type: 'area',
pointSize: 0,
color: 'green'
}
},
axisTitlesPosition: 'out',
legend: 'none'
};
var chart = new google.visualization.ScatterChart(document.getElementById('series_bubble_div'));
chart.draw(data, options);
}<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="series_bubble_div" style="width: 1300px; height: 600px;"></div>Upvotes: 1
Related Questions
- Drawing visual Lines in Google Charts
- How to Create Single line bubble Chartjs chart?
- How to change bubble color in google bubble chart
- How to put vertical lines on google chart scatter
- Google Visualisation Line Chart - Multiple Lines
- How add the straight line between bubbles in highchart
- Google Visualization - Dashboard with Bubble Chart
- Google Visualization - Dashboard w/ Combo Chart (Bubble & Line)
- Google Line Chart Customization
- how to combine bubble and line chart?