ブログの運営報告を簡単にグラフ化する方法【プラグインなしコピペOK】

<!-- 複合グラフ -->
<script type="text/javascript">
google.charts.load('current', {
  packages: ['corechart', 'bar']
});
google.charts.setOnLoadCallback(drawMultSeries);

function drawMultSeries() {
  // グラフカラー
  var color = ['#D5D5D5', '#50B432', '#038EC7'];

  var data = new google.visualization.DataTable();
  data.addColumn('string', '月');
  data.addColumn('number', '前月累計記事数');
  data.addColumn({
    type: 'string',
    role: 'annotation'
  });
  data.addColumn('number', '新規記事数');
  data.addColumn({
    type: 'string',
    role: 'annotation'
  });
  data.addColumn('number', 'PV');
  data.addColumn({
    type: 'string',
    role: 'annotation'
  });

  // グラフデータ
  data.addRows([
    ['1月', 0, '', 5, '', 1894, ''],
    ['2月', 5, '', 10, '', 2029, ''],
    ['3月', 15, '', 10, '', 2496, ''],
    ['4月', 25, '', 10, '', 2507, ''],
    ['5月', 35, '', 15, '', 2999, ''],
    ['6月', 50, '', 10, '', 3290, ''],
    ['7月', 20, '30記事削除', 20, '', 2455, ''],
    ['8月', 40, '', 10, '', 2802, ''],
    ['9月', 50, '', 15, '', 3803, ''],
    ['10月', 65, '', 15, '', 5533, ''],
    ['11月', 80, '', 20, '', 6923, ''],
    ['12月', 100, '', 10, '記事数', 8755, 'PV'],
  ]);

  var options = {
    chartArea: {
      left: 40,
      right: 50,
      top: 20,
      bottom: 60,
      width: '100%',
      height: '100%',
    },
    annotations: {
      alwaysOutside: false,
      stem: {
        length: 0,
      },
    },
    legend: {
      position: "none"
    },
    height: 400,
    isStacked: 'true',
    seriesType: 'bars',
    series: {
      0: {
        color: color[0],
        annotations: {
          textStyle: {
            color: '#333',
            fontSize: 12,
            bold: true,
          }
        },
      },
      1: {
        color: color[1],
        annotations: {
          textStyle: {
            fontSize: 14,
            bold: true,
          }
        },
      },
      2: {
        annotations: {
          textStyle: {
            fontSize: 14,
            bold: true,
          }
        },
        color: color[2],
        type: 'line',
        targetAxisIndex: 1,
        lineDashStyle: [2, 2],
        lineWidth: 3,
        pointSize: 5,
      },
    },
    tooltip: {
      showColorCode: true,
      textStyle: {
        color: '#333',
        fontSize: 16,
      },
    },
    vAxes: {
      // 左側Y軸の設定
      0: {
        ticks: [100, 200],
        textPosition: 'out',
        textStyle: {
          color: color[1],
          bold: true,
        },
        titleTextStyle: {
          fontSize: 10,
          color: color[1],
        },
        gridlines: {
          color: '#ccc',
        },
      },
      // 右側Y軸の設定
      1: {
        ticks: [5000, 10000],
        textPosition: 'out',
        textStyle: {
          color: color[2],
          bold: true,
        },
        titleTextStyle: {
          fontSize: 10,
          color: color[2],
        },
      },
    }
  };
  var chart = new google.visualization.ComboChart(document.getElementById("chart_div"));
  chart.draw(data, options);
}

</script>