Google LineChart легенда и линии сетки

Question

Хотелось бы получить this Google LineChart, чтобы немного походить на this chart from GitHub. Я воссоздаю диаграмму GitHub, потому что я хочу, чтобы ее версия была в высоком качестве (вектор), а не сильно сжатый JPEG (кто в своем уме сохраняет диаграммы как JPEG в любом случае!).

Я хотел бы переместить легенду в график и добавить вертикальные линии сетки (по горизонтальной оси «Год»). Кто-нибудь знает, как это сделать?

Вот код, но, пожалуйста, не стесняйтесь редактировать my JSFiddle: тип данных

google.load('visualization', '1', {packages: ['corechart', 'line']}); 
google.setOnLoadCallback(function() { 
    var data = google.visualization.arrayToDataTable([ 
     ['Year', 'JavaScript', 'Java', 'Ruby', 'PHP', 'Python', 'CSS', 'C++', 'Objective C', 'C', 'C#', 'Perl', 'Emacs Lisp', 'VimL', 'Shell','HTML'], 
     ['2008', 2,    7,  1,  4,  3,   null, 8,  9,    5,  null, 6,  null,   null,  null, null], 
     ['2009', 2,    7,  1,  4,  3,   null, 8,  9,    6,  null, 5,  10,    null,  null, null], 
     ['2010', 2,    5,  1,  4,  3,   null, 8,  9,    6,  null, 7,  null,   10,   null, null], 
     ['2011', 2,    5,  1,  4,  3,   null, 7,  8,    6,  10,  9,  null,   null,  null, null], 
     ['2012', 2,    3,  1,  4,  5,   null, 7,  8,    6,  9,  null, null,   null,  10,  null], 
     ['2013', 1,    3,  2,  4,  5,   10,  7,  8,    6,  9,  null, null,   null,  null, null], 
     ['2014', 1,    2,  3,  4,  5,   6,  7,  9,    8,  10,  null, null,   null,  null, null], 
     ['2015', 1,    2,  3,  4,  5,   6,  7,  null,   9,  8,  null, null,   null,  null, 10] 
    ]); 

    var options = { 
     title: 'Rank of top languages on GitHub over time', 
     width: '100%', 
     height: 600, 
     hAxis: { 
      title: 'Time', 
     }, 
     vAxis: { 
      title: 'Rank', 
      viewWindow: { 
       min: 1 
      }, 
      direction: -1, 
      gridlines: { 
       count: 11 
      } 
     } 
    }; 

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

    chart.draw(data, options); 
}); 

Answer 1

Изменить -> Тип: 'дата'

google.load('visualization', '1.1', {packages: ['corechart', 'line']}); 
google.setOnLoadCallback(function() { 
    var data = google.visualization.arrayToDataTable([ 
    [{label: 'Year', type: 'date'}, 'JavaScript', 'Java', 'Ruby', 'PHP', 'Python', 'CSS', 'C++', 'Objective C', 'C', 'C#', 'Perl', 'Emacs Lisp', 'VimL', 'Shell','HTML'], 
    [new Date(2008, 0, 0), 2, 7,  1,  4,  3,   null, 8,  9, 5,  null, 6,  null,   null,  null, null], 
    [new Date(2009, 0, 0), 2, 7,  1,  4,  3,   null, 8,  9,    6,  null, 5,  10,    null,  null, null], 
    [new Date(2010, 0, 0), 2, 5,  1,  4,  3,   null, 8,  9,    6,  null, 7,  null,   10,   null, null], 
    [new Date(2011, 0, 0), 2, 5,  1,  4,  3,   null, 7,  8,    6,  10,  9,  null,   null,  null, null], 
    [new Date(2012, 0, 0), 2, 3,  1,  4,  5,   null, 7,  8,    6, 9,  null, null,   null,  10,  null], 
    [new Date(2013, 0, 0), 1, 3,  2,  4,  5,   10,  7,  8,    6,  9,  null, null,   null,  null, null], 
    [new Date(2014, 0, 0), 1, 2,  3,  4,  5,   6,  7,  9,    8,  10,  null, null,   null,  null, null], 
    [new Date(2015, 0, 0), 1, 2,  3,  4,  5,   6,  7,  null,   9,  8,  null, null,   null,  null, 10] 
]); 

var options = { 
    title: 'Rank of top languages on GitHub over time', 
    width: '100%', 
    height: 800, 
    hAxis: { 
     title: 'Time', 
     gridlines: { 
      count: -1 
     }, 
    }, 
    vAxis: { 
     title: 'Rank', 
     viewWindow: { 
      min: 1 
     }, 
     direction: -1, 
     gridlines: { 
      count: -1 
     } 
    } 
}; 

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

chart.draw(data, options); 
}); 

https://jsfiddle.net/mblenton/x00omtxL/15/