読者です 読者をやめる 読者になる 読者になる

Google Chartsで折れ線グラフ

developers.google.com www.petitmonte.com

<html>
<head>

<script src="https://www.gstatic.com/charts/loader.js" type="text/javascript"></script>

<script type="text/javascript">
    google.charts.load('current', {'packages':['corechart']});
    google.charts.setOnLoadCallback(drawChart);

    function drawChart() {
        var data = google.visualization.arrayToDataTable([
            ['年月日', '予定', '実施'],
            ['15年07月', 10.0, 11.1],
            ['15年08月', 20.0, 22.2],
            ['15年09月', 30.0, 33.3],
            ['15年10月', 40.0, 44.4],
            ['15年11月', 50.0, 55.5],
            ['15年12月', 60.0, 66.6],
            ['16年01月', 70.0, 77.7],
            ['16年02月', 80.0, 88.8],
            ['16年03月', 90.0, null]
        ]);

        var options = {
            title: '進捗状況',
            legend: { position: 'bottom' },      //凡例をグラフの下に配置
            hAxis: {title: '年月'},
            vAxis: {title: '%'}
        };

        var chart = new google.visualization.LineChart(document.getElementById('chart_div'));
        chart.draw(data, options);
    }
</script>

<title></title>
</head>

<body>
    <div id="chart_div" style="width: 500px; height: 300px"></div>
</body>
</html>