CODEWITHSUNDEEP
javascripthtmlgoogle-visualization
ryu
ryu

Reputation: 312

Fake numbers for small values on Google charts

I'm using this kind of Google chart: https://google-developers.appspot.com/chart/interactive/docs/gallery/combochart

I have very high values for the line chart, and in comparison very low values for the bar chart. I would like to combine them in a way both types are nicely readable.

This is my script:

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
function drawVisualization() {
var chart = new google.visualization.ComboChart(document.getElementById('chart_incoming_actions'));
chart.draw(google.visualization.arrayToDataTable([
    ['Month', 'Votes', 'Views'],
    ['2012-12-03', 3, 9912],
    ['2012-12-02', 41, 85776],
    ['2012-12-01', 43, 85483],
    ['2012-11-30', 36, 77738],
    ['2012-11-29', 50, 84000],
    ['2012-11-28', 72, 102089],
    ['2012-11-27', 74, 89701]
]), {
    vAxis: {title: "Views / Votes"},
    hAxis: {title: "Month"},
    seriesType: "bars",
    series: {1: {type: "line"}}
});
}
google.setOnLoadCallback(drawVisualization);
</script>

As you can see, the numbers are very far apart. Is it possible to display the currect number, but to fake the height of the bars for example as it would be multiplied by 1000?

Thanks in advance, ryu

Upvotes: 1

Views: 523

Answers (1)

ryu
ryu

Reputation: 312

Never mind, I figured it out myself. :)

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('visualization', '1', {packages: ['corechart']});
function drawVisualization() {
var chart = new google.visualization.ComboChart(document.getElementById('chart_incoming_actions'));
chart.draw(google.visualization.arrayToDataTable([
        ['Month', 'Votes', 'Views'],
        ['2012-12-03', 7, 19393],
        ['2012-12-02', 41, 85776],
        ['2012-12-01', 43, 85483],
        ['2012-11-30', 36, 77738],
        ['2012-11-29', 50, 84000],
        ['2012-11-28', 72, 102089],
        ['2012-11-27', 74, 89701]
    ]), {
    vAxis: {
        0: {logScale: false, title: "Votes"},
        1: {logScale: false, title: "Views"}
    },
    hAxis: {title: "Month"},
    seriesType: "bars",
    series: {
        0:{type: 'bar', targetAxisIndex:0},
        1:{type: 'line', targetAxisIndex:1}
    }
});
}
google.setOnLoadCallback(drawVisualization);
</script>

Upvotes: 1

Related Questions