javascript - How to show small values with large values in google charts?

You can see in this fiddle

In the year 2004 I have values of 1000, and in the other years I have large values, for that reason in the scale the chart doesn't seems able to rendered, what can I do to show those values. I was reading this. Is there a way to do something like that in google chart?

Here is the code

<html>
  <head>
    <script type="text/javascript" src=""></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {

  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses'],
    ['2004',  1000,      1000],
    ['2005',  1170000,      460000],
    ['2006',  660000,       1120000],
    ['2007',  1030000,      540000]
  ]);

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

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

  chart.draw(data, options);

}
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

The chart

You can see in this fiddle

Here is the code

<html>
  <head>
    <script type="text/javascript" src="https://www.google./jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
google.setOnLoadCallback(drawChart);
function drawChart() {

  var data = google.visualization.arrayToDataTable([
    ['Year', 'Sales', 'Expenses'],
    ['2004',  1000,      1000],
    ['2005',  1170000,      460000],
    ['2006',  660000,       1120000],
    ['2007',  1030000,      540000]
  ]);

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

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

  chart.draw(data, options);

}
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
  </body>
</html>

The chart

Share Improve this question edited Oct 10, 2014 at 12:40 asked Oct 9, 2014 at 15:23 Emilio Gort 3,4703 gold badges31 silver badges44 bronze badges

There is a logScale option, but still wouldn´t work for the value 1 – juvian Commented Oct 9, 2014 at 18:01
@juvian I change the values to 1000 and added 3 zeros to the other numbers, could ment your idea on what you were trying – Emilio Gort Commented Oct 10, 2014 at 12:41
2 vAxis: {title: 'Year', titleTextStyle: {color: 'red'}, logScale:true} – juvian Commented Oct 10, 2014 at 15:30
1 No problem, good luck with proyect – juvian Commented Oct 10, 2014 at 15:35
@juvian you should post as an answer, I search in all stackoverflow and I didn't find. – Emilio Gort Commented Oct 10, 2014 at 15:43

Add a ment |

1 Answer 1

Sorted by: Reset to default 7

Google Chart´s axis have an option to set scale to logarithm, which fits better for big differences between lowest and highest values. Note that all values must be positive and if the data value is 1, it won´t show as logharithm scale starts at 1 or higher. To change it, use:

vAxis: {title: 'Year', titleTextStyle: {color: 'red'}, logScale:true}

You can find the documentation in configuration options section:

Google Chart Configuration Options

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745092801a4610793.html

javascript - How to show small values with large values in google charts? - Stack Overflow

1 Answer 1

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - How to show small values with large values in google charts? - Stack Overflow

1 Answer 1

相关推荐