Google Chart

Google Charts, ガイド＆リファレンス

▼グラフを表示するHTMLおよび、HTML内に記述したJavascript

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

    <div id="donutchart" style="width: 900px; height: 500px;"></div>


    <script type="text/javascript">
    google.charts.load("current", {packages:["corechart"]});
    google.charts.setOnLoadCallback(drawChart);
    function drawChart() {
      var data = google.visualization.arrayToDataTable([
        ['Type', 'Point'],
        ['Tokyo',    10],
        ['Osaka',     5],
        ['Sapporo',  30],
        ['Nagoya',    3],
        ['Okinawa',   2],
        ['Fukuoka',   1]
      ]);

      var options = {
        title: 'タイトルxxxxxxxxxxxxxxxxxx',
        pieHole: 0.4,
      };

      var chart = new google.visualization.PieChart(document.getElementById('donutchart'));
      chart.draw(data, options);

    }
    </script>

  

▼データを入れ替えて、グラフを描画する