CODEWITHSUNDEEP
htmlajaxgoogle-visualization
Abby E
Abby E

Reputation: 584

Google charts crowding

I'm trying to use Google charts and the example I provided below must remain its size to fit my layout.

http://jsfiddle.net/eSKzR/

<html>
  <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
      google.load("visualization", "1", {packages:["corechart"]});
      google.setOnLoadCallback(drawChart);
      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Year', 'Max'],
          ['00h',  1],
          ['01h',  1],
          ['02h',  1],
          ['03h',  1],
          ['04h',  0],
          ['05h',  20],
          ['06h',  40],
          ['07h',  3],
          ['08h',  1],
          ['09h',  1],
          ['10h',  1],
          ['12h',  1],
          ['13h',  1],
          ['14h',  1],
          ['15h',  1],
          ['16h',  1],
          ['17h',  1],
          ['18h',  1],
          ['19h',  0],
          ['20h',  0],
          ['21h',  0],
          ['22h',  1],
          ['now',  1],
        ]);

        var options = { };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div" style="width: 540px; height: 150px;"></div>
  </body>
</html>

The hour numbers at the bottom are overlapping and I was wondering if you could turn them sideways, where they're facing vertical?

Upvotes: 3

Views: 385

Answers (2)

Steve-o
Steve-o

Reputation: 12866

From the documentation:

var options = {
    hAxis: { slantedText: true, slantedTextAngle: 90 }
};

Updated fiddle: http://jsfiddle.net/eSKzR/15/

Upvotes: 1

Sednus
Sednus

Reputation: 2113

Set this in the options:

var options = {
    hAxis:
       {
         slantedText : true,
         slantedTextAngle: 90
        }
    };

Upvotes: 1

Related Questions