Search code examples
javascriptplotchartsgoogle-visualization

Google charts log scale

I'm trying to do a log scale plot in Google Charts(actually a semilogy plot, to be accurate) and have tried
vAxis: { scaleType: 'log' }
without success. I have seen also Google's example(https://jsfiddle.net/api/post/library/pure/), but haven't figured out where I am mistaken. In order to reproduce my problem I've taken the simple Line Chart where i modified some entry values to look similar like values from f(x) = 1/x, like my actual data is distributed.

<html>
<head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
        google.load("visualization", "1", {packages:["linechart"]});
        google.setOnLoadCallback(drawChart);
        function drawChart() {
            var data = google.visualization.arrayToDataTable([
                ['Index', 'Value'],
                ['1',  100000],
                ['2',  2170],
                ['3',  960],
                ['4',  560],
                ['5',  520],
                ['6',  500],
                ['7',  480],
                ['8',  460],
                ['9',  440],
                ['10',  430],
                ['11',  420],
                ['12',  410],
                ['13',  400],
                ['14',  395],
                ['15',  390],
                ['16',  388],
                ['17',  396],
                ['18',  387],
                ['19',  385],
                ['20',  384]
            ]);

            var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
            chart.draw(data, {width: 400, height: 240, legend: 'bottom', title: 'Company Performance', vAxis: {scaleType: 'log'}});
        }
    </script>
</head>

<body>
<div id="chart_div"></div>
</body>
</html>

My last option parameter vAxis: {scaleType: 'log'} is ignored. I ahve tried with both discrete and continuous data(1st column both as strings like above or numbers without the '') My plot looks like the one below

log chart test

Solution

  • using the updated library (loader.js) seems to make a difference

    <script src="https://www.gstatic.com/charts/loader.js"></script>

    instead of...

    <script src="https://www.google.com/jsapi"></script>

    plus, from the release notes...

    The version of Google Charts that remains available via the jsapi loader is no longer being updated consistently. Please use the new gstatic loader (loader.js) from now on.

    see following working snippet... 

    google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Index', 'Value'],
      ['1',  100000],
      ['2',  2170],
      ['3',  960],
      ['4',  560],
      ['5',  520],
      ['6',  500],
      ['7',  480],
      ['8',  460],
      ['9',  440],
      ['10',  430],
      ['11',  420],
      ['12',  410],
      ['13',  400],
      ['14',  395],
      ['15',  390],
      ['16',  388],
      ['17',  396],
      ['18',  387],
      ['19',  385],
      ['20',  384]
    ]);

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, {width: 400, height: 240, legend: 'bottom', title: 'Company Performance', vAxis: {scaleType: 'log'}});
  },
  packages: ['corechart']
});
    <script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>

    here is the same chart, without the option --> vAxis: {scaleType: 'log'} 

    google.charts.load('current', {
  callback: function () {
    var data = google.visualization.arrayToDataTable([
      ['Index', 'Value'],
      ['1',  100000],
      ['2',  2170],
      ['3',  960],
      ['4',  560],
      ['5',  520],
      ['6',  500],
      ['7',  480],
      ['8',  460],
      ['9',  440],
      ['10',  430],
      ['11',  420],
      ['12',  410],
      ['13',  400],
      ['14',  395],
      ['15',  390],
      ['16',  388],
      ['17',  396],
      ['18',  387],
      ['19',  385],
      ['20',  384]
    ]);

    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, {width: 400, height: 240, legend: 'bottom', title: 'Company Performance'});
  },
  packages: ['corechart']
});
    <script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div"></div>