Make small bars appear larger than their values would indicate
HTML
<script src="http://www.google.com/jsapi?fake=.js"></script>
<div id="chart_div1"></div>
<div id="chart_div2"></div>
<div id="chart_div3"></div>
<div id="panel">
<div id="chart_div4"></div>
<div id="chart_div5"></div>
</div>
CSS
/* move the lower panel chart up to align with the upper panel
* this will likely need some browser-specific tuning (tested in Chrome with these settings)
*/
#chart_div5 {
margin-top: -33px;
}
JavaScript
google.load('visualization', '1', {packages: ['corechart']});
google.setOnLoadCallback(drawVisualization);
function drawVisualization() {
var data = new google.visualization.DataTable();
data.addColumn('string', 'Name');
data.addColumn('number', 'Value');
data.addRows([
['Foo', 10000],
['Baz', 10]
]);
var chart1 = new google.visualization.ColumnChart(document.getElementById('chart_div1'));
chart1.draw(data, {
height: 400,
width: 500,
title: '"Baz" is too small to click on'
});
var chart2 = new google.visualization.ColumnChart(document.getElementById('chart_div2'));
chart2.draw(data, {
height: 400,
width: 500,
title: 'Use a logScale axis to make smaller values appear larger',
vAxis: {
logScale: true
}
});
var view = new google.visualization.DataView(data);
view.setColumns([0, {
type: 'number',
label: 'Value',
calc: function (dt, row) {
var value = dt.getValue(row, 1);
return (value < 100) ? {v: 100, f: dt.getFormattedValue(row, 1)} : value;
}
}]);
var chart3 = new google.visualization.ColumnChart(document.getElementById('chart_div3'));
chart3.draw(view, {
height: 400,
width: 500,
title: 'Change the value of small values to make them appear relatively larger, but keep the formatted value the same, so the tooltips will appear correct'
});
// chart 4 and 5 make up the "panel" chart
var chart4 = new google.visualization.ColumnChart(document.getElementById('chart_div4'));
chart4.draw(data, {
height: 300,
width: 500,
chartArea: {
height: '85%'
},
hAxis: {
textPosition: 'none'
},
vAxis: {
viewWindow: {
min: 100
}
},
title: 'Make a "panel" chart that emphasizes smaller...