旋转整个Google图表

Question

I wanted to show my graph but in a vertical way not horizontal like show on the following image and also hide the legend if possible.

Thanks in advance for your help.

Charts horizontal to vertical

Symmetry of the rotation

 google.charts.load('current', {packages: ['corechart', 'line']}); google.charts.setOnLoadCallback(drawBasic);


function drawBasic() {

      var data = new google.visualization.DataTable();
      data.addColumn('number', 'X');
      data.addColumn('number', 'Dogs');

      data.addRows([
        [0, 0],   [1, 10],  [2, 23],  [3, 17],  [4, 18],  [5, 9],
        [6, 11],  [7, 27],  [8, 33],  [9, 40],  [10, 32], [11, 35],
        [12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48],
        [18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57],
        [24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53],
        [30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65],
        [36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65],
        [42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70],
        [48, 72], [49, 68], [50, 66],
      ]);

      var options = {
        hAxis: {
          textPosition:"none"
        },
        vAxis: {
          textPosition:"none"
        },

      };


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

      chart.draw(data, options);
    }

Answer 1

use chart options...

orientation: 'vertical'

and...

legend.position: 'none'

see the following working snippet...

it also demonstrates increasing the size of the chartArea to fill the container

which the chart will not do by default...

chartArea: {
  top: 6,
  right: 6,
  bottom: 6,
  left: 6,
  height: '100%',
  width: '100%'
},

---

 google.charts.load('current', { callback: drawBasic, packages:['corechart'] }); function drawBasic() { var data = new google.visualization.DataTable(); data.addColumn('number', 'X'); data.addColumn('number', 'Y'); data.addRows([ [0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9], [6, 11], [7, 27], [8, 33], [9, 40], [10, 32], [11, 35], [12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48], [18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57], [24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53], [30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65], [36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65], [42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70], [48, 72], [49, 68], [50, 66], ]); var options = { chartArea: { top: 6, right: 6, bottom: 6, left: 6, height: '100%', width: '100%' }, hAxis: { textPosition: 'none' }, height: 800, legend: { position: 'none' }, orientation: 'vertical', vAxis: { textPosition: 'none' }, width: 200 }; var chart0 = new google.visualization.LineChart(document.getElementById('chart_div0')); chart0.draw(data, options); var view = new google.visualization.DataView(data); view.setColumns([0, { calc: function (dt, row) { return { v: dt.getValue(row, 1) * -1, f: dt.getFormattedValue(row, 1), }; }, label: data.getColumnLabel(1), type: data.getColumnType(1) }]); var chart1 = new google.visualization.LineChart(document.getElementById('chart_div1')); chart1.draw(view, options); } 

 div { display: inline-block; } 

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

Answer 2

you can achieve this with css (and add legend: {position: 'none'} in the options to hide the legend)

 google.charts.load('current', {packages: ['corechart', 'line']}); google.charts.setOnLoadCallback(drawBasic); function drawBasic() { var data = new google.visualization.DataTable(); data.addColumn('number', 'X'); data.addColumn('number', 'Dogs'); data.addRows([ [0, 0], [1, 10], [2, 23], [3, 17], [4, 18], [5, 9], [6, 11], [7, 27], [8, 33], [9, 40], [10, 32], [11, 35], [12, 30], [13, 40], [14, 42], [15, 47], [16, 44], [17, 48], [18, 52], [19, 54], [20, 42], [21, 55], [22, 56], [23, 57], [24, 60], [25, 50], [26, 52], [27, 51], [28, 49], [29, 53], [30, 55], [31, 60], [32, 61], [33, 59], [34, 62], [35, 65], [36, 62], [37, 58], [38, 55], [39, 61], [40, 64], [41, 65], [42, 63], [43, 66], [44, 67], [45, 69], [46, 69], [47, 70], [48, 72], [49, 68], [50, 66], ]); var options = { hAxis: { textPosition:"none" }, vAxis: { textPosition:"none" }, legend: {position: 'none'} }; var chart = new google.visualization.LineChart(document.getElementById('chart_div')) chart.draw(data, options); } 

 #chart_div{ transform-origin: 80% 50%; transform:rotate(-90deg); } 

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