Visualforce Analytics API Highcharts Sample

AnalyticsAPISample.page

<apex:page showHeader="false">

<!-- 必要なライブラリを読み込む -->
<apex:includeScript value="//code.jquery.com/jquery-1.10.1.min.js" />
<apex:includeScript value="{!$Resource.highcharts}" />
<apex:includeScript value="{!$Resource.forcetk}" />

<script type="text/javascript">
  $j = jQuery.noConflict();
  var repot = null;

  $j(document).ready(function(){
    var reportId = '00OA00000058IIx'; //マトリックスレポート
    var client = new forcetk.Client();
    client.setSessionToken('{!$Api.Session_ID}');

    client.ajax("/v29.0/analytics/reports/"+reportId+"?includeDetails=true", function(response){
      report = response;


      // 集計値の選択リストを生成
      $j.each(report.reportMetadata.aggregates, function(index, agg) {
        $j("#selectAgg").append('<option value="'+index+'">' +
          report.reportExtendedMetadata.aggregateColumnInfo[agg].label +
          '</option>');
      });
      $j("#selectAgg").change(createReport);

      createReport();
    });
  });

  var createReport = function(){
      var series = [];
      var category =[];
      
      // X軸のカテゴリを生成
      $j.each(report.groupingsDown.groupings, function(index, grouping){
        category.push(grouping.label);
      });

      // 選択値から集計値情報を取得
      var aggIndex = $j('#selectAgg').val();
      var columnInfo = report.reportExtendedMetadata.aggregateColumnInfo[report.reportMetadata.aggregates[aggIndex]];

      // マトリックスの縦と横を回しながら集計値を取得
      $j.each(report.groupingsAcross.groupings, function(i1, g1){
  
        series.push(new Object());
        series[i1].name = g1.value;
        series[i1].data = [];

        $j.each(report.groupingsDown.groupings, function(i2, g2){
          series[i1].data.push(report.factMap[g2.key.toString()+"!"+g1.key.toString()].aggregates[aggIndex].value);
        });
      });

      //グラフ生成
      $j('#container').highcharts({
        chart: {
          type: 'column'
        },
        title: {
          text: columnInfo.label + 'のグラフ'
        },
        xAxis: {
          categories: category
        },
        yAxis: {
                min: 0,
                title: {
                  text: columnInfo.label
                },
                stackLabels: {
                  enabled: true,
                  style: {
                      fontWeight: 'bold',
                      color: (Highcharts.theme && Highcharts.theme.textColor) || 'gray'
                  }
              }
            },
            legend: {
              align: 'right',
              x: -70,
              verticalAlign: 'top',
              y: 20,
              floating: true,
              backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColorSolid) || 'white',
              borderColor: '#CCC',
              borderWidth: 1,
              shadow: false
            },
            tooltip: {
              formatter: function() {
                  return '<b>'+ this.x +'</b><br/>'+
                      this.series.name +': '+ this.y +'<br/>'+
                      'Total: '+ this.point.stackTotal;
              }
            },
            plotOptions: {
              column: {
                  stacking: 'normal',
                  dataLabels: {
                      enabled: true,
                      color: (Highcharts.theme && Highcharts.theme.dataLabelsColor) || 'white'
                  }
              }
            },
        series: series,
      });
  }

</script>
<select id="selectAgg"></select>
<!-- グラフ表示エリア -->
<div id="container" style="height: 300px"></div>

</apex:page>