Как настроить график Google для перехода от строки к столбцу

Question

У меня есть диаграмма, которая отображается на html-странице, которая представляет диаграмму.

диаграмма выглядит так:

код, который у меня есть для этого:

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

      function drawChart() {
        var data = google.visualization.arrayToDataTable([
          ['Data', 'Valor de Compra'],
          <?php echo $dados;?>




        var options = {

'backgroundColor': 'transparent',

hAxis: {
            format: 'y M/dd',
            gridlines: {count: 15},
            direction:1, slantedText:true, slantedTextAngle:90,

          },
vAxis: {
gridlines: {color: 'none'},
minValue: 0
}


};

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

        chart.draw(data, options);
      }

Переменная $ dados получает эти данные:

[new Date(2018, 11, 04), 3.00],[new Date(2018, 11, 03), 3.20],[new Date(2018, 10, 29), 2.95],[new Date(2018, 10, 29), 3.50],[new Date(2018, 10, 23), 3.20],[new Date(2018, 9, 18), 2.95],[new Date(2018, 9, 18), 2.95],[new Date(2018, 9, 18), 2.95],[new Date(2018, 9, 17), 2.95],[new Date(2018, 9, 17), 2.90],[new Date(2018, 9, 12), 2.95],[new Date(2018, 9, 11), 2.95],[new Date(2018, 9, 11), 2.95],[new Date(2018, 9, 08), 2.20],[new Date(2018, 8, 13), 2.10],[new Date(2018, 8, 13), 2.10],[new Date(2018, 8, 12), 2.00],[new Date(2018, 8, 12), 2.95],[new Date(2018, 8, 08), 2.00],[new Date(2018, 8, 07), 2.10],
        ]);

И моя цель - изменить этот макет на что-то болеепривлекательный и красивый.

Я пытался изменить его на столбчатую диаграмму, но пока все не удалось ... Я уверен, что это должно быть что-то действительно простое ...

есть ли способ иметь только год и месяц, когда начинается новый год и когда начинается новый месяц?

Заранее спасибо!

Answer 1

google.charts.load('current', {'packages':['bar']});
  google.charts.setOnLoadCallback(drawChart);
 function drawChart() {
    var data = google.visualization.arrayToDataTable([
   ['Data', 'Valor de Compra'],
    ]);
var chart = new google.charts.Bar(document.getElementById('columnchart_material'));

затем

 <div id="columnchart_material" style="width: 800px; height: 500px;"></div>