Google Chart で Imp と Click のグラフとかをうまいこと書く

たとえば広告システムがあるとして、Impression 数と Click 数をそれぞれ数字としてもってたとして、普通に Google Chart でグラフを書くと以下のようになります。click 数が imp 数にくらべて非常にちいさいので、このグラフは役にたちません。

が、Google Chart では targetAxisIndex というのがあるので、これをもちいて以下のように指定すれば OK でした。

        options = {
            series: {
              1: {targetAxisIndex: 1}
            }
        };

あたらしいグラフは以下のようになります。2012-10-16 が Imp のわりにすげー click 数のびててなにこれ!! っていうのがわかります。

以上のグラフは以下のようなコードで描画することができます。

<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([
          ['Date', 'Imp', 'click'],
          ['2012-10-14',  10000000,      400],
          ['2012-10-15',  11700000,      460],
          ['2012-10-16',  6600000,       1120],
          ['2012-10-17',  10300000,      540]
        ]);

        var options = {
          title: 'Ads'
        };

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

        var chart2 = new google.visualization.LineChart(document.getElementById('chart_div2'));
        options.series = {
            1: {targetAxisIndex: 1}
        };
        chart2.draw(data, options);
      }
    </script>
  </head>
  <body>
    <div id="chart_div1" style="width: 900px; height: 500px;"></div>
    <div id="chart_div2" style="width: 900px; height: 500px;"></div>
  </body>
</html>

さて本題ですが、こういうタイプの複合グラフを描画する機能が hrforecast にあったら便利だとおもうんですがいかがでしょうか? > id:kazeburo さん

Created: 2012-10-17T22:19:40

Updated: 2012-10-17T22:19:40

tokuhirom's Blog

Google Chart で Imp と Click のグラフとかをうまいこと書く