Помогите разобраться с кодом (Google Chart)

343
14 апреля 2017, 22:59

Здравствуйте! Нашел подходящий для себя график на Google Chart, не могу понять как задавать значения даты, нужно выводить число.месяц.год, помогите пожалуйста!

google.charts.load('current', {packages: ['corechart', 'bar']}); 
google.charts.setOnLoadCallback(drawStacked); 
 
function drawStacked() { 
      var data = new google.visualization.DataTable(); 
 
      data.addColumn('timeofday', 'Time of Day'); 
      data.addColumn('number', 'Дождь'); 
      data.addColumn('number', 'Сухо'); 
 
      data.addRows([ 
        [{v: [8, 0, 0], f: '8 заказов'}, 3, 5], 
        [{v: [9, 0, 0], f: '9 заказов'}, 2, 7], 
        [{v: [10, 0, 0], f:'4 заказов'}, 2, 2], 
        [{v: [11, 0, 0], f: '11 заказов'}, 4, 7], 
        [{v: [12, 0, 0], f: '12 заказов'}, 2, 10], 
        [{v: [13, 0, 0], f: '1 заказов'}, 1, 0], 
        [{v: [14, 0, 0], f: '2 заказов'}, 2, 0], 
        [{v: [15, 0, 0], f: '5 заказов'}, 1, 4], 
        [{v: [16, 0, 0], f: '4 заказов'}, 2, 2], 
        [{v: [17, 0, 0], f: '15 заказов'}, 5, 10], 
      ]); 
 
      var options = { 
        title: '', 
        isStacked: true, 
        hAxis: { 
          title: '', 
          format: 'd.M.y', 
          viewWindow: { 
            min: [7, 30, 0], 
            max: [17, 30, 0] 
          } 
        }, 
        vAxis: { 
          title: 'Кол-во заказов' 
        } 
      }; 
 
      var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
      chart.draw(data, options); 
    }
  <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
  <div id="chart_div"></div>

Answer 1

https://developers.google.com/chart/interactive/docs/datesandtimes

https://jsfiddle.net/api/post/library/pure/

  google.charts.load('current', {'packages':['corechart']});
  google.charts.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('date', 'Time of Day');
    data.addColumn('number', 'Rating');
    data.addRows([
      [new Date(2015, 0, 1), 5],  [new Date(2015, 0, 2), 7],  [new Date(2015, 0, 3), 3],
      [new Date(2015, 0, 4), 1],  [new Date(2015, 0, 5), 3],  [new Date(2015, 0, 6), 4],
      [new Date(2015, 0, 7), 3],  [new Date(2015, 0, 8), 4],  [new Date(2015, 0, 9), 2],
      [new Date(2015, 0, 10), 5], [new Date(2015, 0, 11), 8], [new Date(2015, 0, 12), 6],
      [new Date(2015, 0, 13), 3], [new Date(2015, 0, 14), 3], [new Date(2015, 0, 15), 5],
      [new Date(2015, 0, 16), 7], [new Date(2015, 0, 17), 6], [new Date(2015, 0, 18), 6],
      [new Date(2015, 0, 19), 3], [new Date(2015, 0, 20), 1], [new Date(2015, 0, 21), 2],
      [new Date(2015, 0, 22), 4], [new Date(2015, 0, 23), 6], [new Date(2015, 0, 24), 5],
      [new Date(2015, 0, 25), 9], [new Date(2015, 0, 26), 4], [new Date(2015, 0, 27), 9],
      [new Date(2015, 0, 28), 8], [new Date(2015, 0, 29), 6], [new Date(2015, 0, 30), 4],
      [new Date(2015, 0, 31), 6], [new Date(2015, 1, 1), 7],  [new Date(2015, 1, 2), 9]
    ]);

    var options = {
      title: 'Rate the Day on a Scale of 1 to 10',
      width: 900,
      height: 500,
      hAxis: {
        format: 'M/d/yy',
        gridlines: {count: 15}
      },
      vAxis: {
        gridlines: {color: 'none'},
        minValue: 0
      }
    };
    var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
    chart.draw(data, options);
    var button = document.getElementById('change');
    button.onclick = function () {
      // If the format option matches, change it to the new option,
      // if not, reset it to the original format.
      options.hAxis.format === 'M/d/yy' ?
      options.hAxis.format = 'MMM dd, yyyy' :
      options.hAxis.format = 'M/d/yy';
      chart.draw(data, options);
    };
  }
Answer 2

Вроде разобрался, осталься только вопрос, как сделать в вертикальной шкале шаг 1, вместо 0.5...

 google.charts.load('current', {packages: ['corechart', 'bar']}); 
  google.charts.setOnLoadCallback(drawChart); 
 
  function drawChart() { 
 
    var data = new google.visualization.DataTable(); 
    data.addColumn('date', 'Date'); 
    data.addColumn('number', 'Дождь'); 
		data.addColumn('number', 'Сухо'); 
 
    data.addRows([ 
      [{v: new Date(2015, 0, 1), f: 'Всего заявок __'}, 5, 11],   
      [{v: new Date(2015, 1, 1), f: 'Всего заявок __'}, 15, 1],   
      [{v: new Date(2015, 2, 1), f: 'Всего заявок __'}, 5, 21],   
      [{v: new Date(2015, 3, 1), f: 'Всего заявок __'}, 15, 2],   
      [{v: new Date(2015, 4, 1), f: 'Всего заявок __'}, 5, 5],   
      [{v: new Date(2015, 5, 1), f: 'Всего заявок __'}, 5, 11],   
      [{v: new Date(2015, 6, 1), f: 'Всего заявок __'}, 15, 1],   
      [{v: new Date(2015, 7, 1), f: 'Всего заявок __'}, 5, 1],   
    ]); 
 
 
    var options = { 
			isStacked: true, 
      width: 900, 
      height: 500, 
      hAxis: { 
        format: 'dd/MM/y', 
        gridlines: {count: 12} 
      }, 
      vAxis: { 
        gridlines: {color: 'none'}, 
        minValue: 0 
 
      } 
    }; 
 
    var chart = new google.visualization.ColumnChart(document.getElementById('chart_div')); 
 
    chart.draw(data, options); 
 
  }
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 
    <div id="chart_div"></div>

READ ALSO
Пустая страница после document.write
javascript

Пустая страница после document.write

Использую documentwrite, чтобы дописать html в страницу по нажатию на кнопку, но все существующие элементы куда-то исчезают

 197
Как добиться копирования одним кликом — Clipboard?
javascript

Как добиться копирования одним кликом — Clipboard?

Никак не могу добиться копирования в буфер обмена данных из атрибута кнопки одним кликомКопирование происходит только на втором клике

 223
Остаток от деления
javascript

Остаток от деления

Каким образом можно сокращать все числа например:(1220043, 12, 34325) в диапазон чисел от 1 до 4Пол дня ломаю голову и через циклы делил на 2, и через...

 213
AjaxUpload, передать параметр динамически
javascript

AjaxUpload, передать параметр динамически

Модуль для импорта файла в опенкартеТаким способом загружается файл и посылает его в контроллер

 200