Skip to content

Instantly share code, notes, and snippets.

@pkhamre

pkhamre/graph.html

Created March 12, 2014 09:20
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save pkhamre/9503533 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save pkhamre/9503533 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. pkhamre created this gist Mar 12, 2014.
    44 changes: 44 additions & 0 deletions graph.html
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,44 @@
    <html>
    <head>
    <script type="text/javascript" src="https://www.google.com/jsapi"></script>
    <script type="text/javascript">
    google.load("visualization", "1", {packages:["corechart"]});
    google.setOnLoadCallback(drawChart);
    function drawChart() {
    var data = google.visualization.arrayToDataTable([
    ['Day', 'Number of 502s'],
    ['2013-01-20', 372],
    ['2013-01-21', 451],
    ['2013-01-22', 134],
    ['2013-01-23', 70],
    ['2013-01-24', 27],
    ['2013-01-25', 48],
    ['2013-01-26', 0],
    ['2013-01-27', 8],
    ['2013-01-28', 75],
    ['2013-01-29', 433],
    ['2013-01-30', 561],
    ['2013-01-31', 351],
    ['2013-02-01', 1338],
    ['2013-02-02', 4],
    ['2013-02-03', 1746],
    ['2013-02-04', 1743],
    ['2013-02-05', 567],
    ['2013-02-06', 455],
    ['2013-02-07', 687]
    ]);

    var options = {
    title: 'Total number of 502s in the access logs',
    hAxis: {title: 'Day', titleTextStyle: {color: 'red'}}
    };

    var chart = new google.visualization.AreaChart(document.getElementById('chart_div'));
    chart.draw(data, options);
    }
    </script>
    </head>
    <body>
    <div id="chart_div" style="width: 900px; height: 500px;"></div>
    </body>
    </html>