CODEWITHSUNDEEP
javascriptchartsgoogle-visualization
Asbjørn Ulsberg
Asbjørn Ulsberg

Reputation: 8820

Google LineChart legend and gridlines

I'd like to get this Google LineChart to look a little more like this chart from GitHub. I'm recreating GitHub's chart because I want a version of it in high quality (vector) and not a highly compressed JPEG (who in their right mind saves charts as JPEGs anyway!).

I'd like to move the legend into the graph and add vertical gridlines (on the horizontal axis "Year"). Does anyone know how to accomplish this?

Here's the code, but please feel free to edit 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);
});

Upvotes: 1

Views: 77

Answers (1)

Milan Rakos
Milan Rakos

Reputation: 1773

Change data type -> type: 'date'

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/

Upvotes: 1

Related Questions