Skip to content Skip to sidebar Skip to footer

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

Solution 1:

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']
});
<scriptsrc="https://www.gstatic.com/charts/loader.js"></script><divid="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']
});
<scriptsrc="https://www.gstatic.com/charts/loader.js"></script><divid="chart_div"></div>

Post a Comment for "Google Charts Log Scale"