Google column chart with logarithmic rendering values below baseline

0
votes

Problem

I am rendering a column chart using the Google charts javascript API where some it is possible that some of the values can be under 1%. When I render these values the bar is being rendered below the baseline of the graph. If these values are >= 1 then they are rendered correctly. According the Google charts API reference on logScale: "If true, makes the vertical axis a logarithmic scale Note: All values must be positive." - they are positive.

Here is an image of what I am experiencing.

Chart in question

Question

How can I get all values which are 0 < v <1 above the x axis?

I have had some success with multiplying all percentages by 100 (so from decimal format it would be 10000), then specificly setting each columns label to be the correct percentage however the y axis (vertical axis) then has values for the gridlines that do not correctly represent the data set.

As you can see the very small value is being rendered below. Do note that this isnt just for a data set that has a very large value and a very small one. I experienced this with a data set of ~100 with all values < 4%.

To Reproduce

JSFiddle for your convience here

HTML:

<script type="text/javascript" src="https://www.google.com/jsapi?autoload={'modules':[{'name':'visualization','version':'1','packages':['corechart']}]}"></script>
<div id="chart_div" style="width: 900px; height: 500px;"></div>

Javascript:

google.setOnLoadCallback(drawChart);
function drawChart() {
    var data = google.visualization.arrayToDataTable([
        ['Year', 'Sales'],
        ['2004',  .23],
        ['2005',  1.23],
        ['2006',  88],
        ['2007',  1.12],
        ['2008',  9.65]
    ]);

    var options = {
        title: 'Company Performance',
        vAxis: {title: 'Year',  titleTextStyle: {color: 'red'}, logScale: true}
    };

    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div'));

    chart.draw(data, options);
}
1
javascriptgoogle-visualization

1 Answers

1
votes

Found answer in another question, but the solution is to use an undocumented feature in the options : scaleType:"mirrorLog"

var options = {
    title: 'Company Performance',
    vAxis: {title: 'Year',  titleTextStyle: {color: 'red'}, logScale: true, scaleType:"mirrorLog"}
};

Full details here: ScaleType Google question