SpaceX Launches

by web5me

HTML

<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="calendar_basic" style="width: 1000px; height: 350px;">
</div>

JavaScript

google.charts.load("current", {
    packages: ["calendar"]
});
google.charts.setOnLoadCallback(drawChart);

function drawChart() {
    var dataTable = new google.visualization.DataTable();
    dataTable.addColumn({
        type: 'date',
        id: 'Date'
    });
    dataTable.addColumn({
        type: 'number',
        id: 'Won/Loss'
    });
    dataTable.addColumn({
        type: 'string',
        role: 'tooltip'
    });
    dataTable.addRows([
        [new Date("9/29/2013"), 2, "Cassiope"],
        [new Date("12/3/2013"), 2, "SES-8"],
        [new Date("1/6/2014"), 2, "Thaicom 8"],
        [new Date("4/18/2014"), 1, "CRS-3"],
        [new Date("7/14/2014"), 2, "Orbcomm OG2 Launch 1"],
        [new Date("8/5/2014"), 2, "AsiaSat 8"],
        [new Date("9/7/2014"), 2, "AsiaSat 6"],
        [new Date("9/21/2014"), 2, "SpaceX CRS-4"],
        [new Date("1/10/2015"), 2, "SpaceX CRS-5"],
        [new Date("2/11/2015"), 2, "DSCOVR"],
        [new Date("3/2/2015"), 2, "Eutelsat 115 West B & ABS-3A"],
        [new Date("4/14/2015"), 2, "SpaceX CRS-6"],
        [new Date("4/27/2015"), 2, "TurkmenÄlem 52E"],
        [new Date("6/28/2015"), 0, "CRS-7"]
    ]);

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

    var options = {
        title: "SpaceX Launches",
        height: 800,
        calendar: {
            monthOutlineColor: {
                stroke: '#D7D7D7'
            },
            unusedMonthOutlineColor: {
                stroke: '#D7D7D7'
            },
			colorAxis: { // no worky!
				values: [0, 1, 2],
				colors: ["red", "blue", "green"]
			}
        }
    };

    chart.draw(dataTable, options);
}