CODEWITHSUNDEEP
google-visualization
eskimo
eskimo

Reputation: 101

vAxis weird number order

Anyone know why my google chart is displaying the numbers on the left in such a strange order?

Here is an image of the problem:

enter image description here

And here is the code I'm using:

<script type="text/javascript">
      google.charts.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Ad', 'Views', 'Conversions', 'Appointments'],
          ["green", "9", "2", "2"],["logo", "18", "8", "1"],["maps", "8", "2", "0"],["resign", "14", "9", "1"],["scanimage", "1", "0", "0"],            ]);

        var options = {
          chart: {
            title: ''
          }
        };

        var chart = new google.charts.Bar(document.getElementById('ad_chart'));

        chart.draw(data, options);
      }
</script>

Upvotes: 1

Views: 43

Answers (1)

WhiteHat
WhiteHat

Reputation: 61230

The axis type is determined by the values in the data.

String values result in a Discrete axis, Numbers Continuous... 

google.charts.load('44', {'packages': ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    // Number data (Continuous)
    var data0 = google.visualization.arrayToDataTable([
      ['Ad', 'Views', 'Conversions', 'Appointments'],
      ["green", 9, 2, 2],
      ["logo", 18, 8, 1],
      ["maps", 8, 2, 0],
      ["resign", 14, 9, 1],
      ["scanimage", 1, 0, 0]
    ]);

    // String data (Discrete)
    var data1 = google.visualization.arrayToDataTable([
      ['Ad', 'Views', 'Conversions', 'Appointments'],
      ["green", "9", "2", "2"],
      ["logo", "18", "8", "1"],
      ["maps", "8", "2", "0"],
      ["resign", "14", "9", "1"],
      ["scanimage", "1", "0", "0"]
    ]);

    var options = {
      chart: {
        title: ''
      }
    };

    var chart0 = new google.charts.Bar(document.getElementById('ad_chart0'));
    chart0.draw(data0, options);

    var chart1 = new google.charts.Bar(document.getElementById('ad_chart1'));
    chart1.draw(data1, options);
}
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="ad_chart0"></div>
<div id="ad_chart1"></div>

Upvotes: 1

Related Questions