レポートやダッシュボードでやりたいことが実現できないときに役立つかも。
サイトでグラフ等を公開したいが、ライセンスがレポートダッシュボード使用不可のときなどにも
使用準備
<head>内でライブラリを読み込む
<apex:includeScript value="https://www.gstatic.com/charts/loader.js"/>
<script>
google.charts.load('current', {packages: ['corechart']});
google.charts.setOnLoadCallback(drawChart);
// 省略
</script>
グラフの描画
javascript部分に以下を追加
オプションでタイトル、凡例の表示場所や、色などを設定できる
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Task', 'Hours per Day'],
['Work', 11],
['Eat', 2],
['Commute', 2],
['Watch TV', 2],
['Sleep', 7]
]);
var options = {
title: 'My Daily Activities',
is3D: true,
};
var chart = new google.visualization.PieChart(document.getElementById('piechart_3d'));
chart.draw(data, options);
}
Visualforceの<body>にはグラフ描画用のタグを用意しておく
<body>
<div id="piechart_3d" style="width: 900px; height: 500px;"></div>
</body>
Apexから値を渡す方法
Apexからのデータを受け取ってグラフを描画することも可能
public String incomeJson {get;set;} // jsがアクセスする変数
public void init(){
Map<String, Integer> incomeMap = new Map<String, Integer>();
incomeMap.put('2023-01', 355000);
incomeMap.put('2023-02', 284000);
incomeMap.put('2023-03', 213000);
incomeMap.put('2023-04', 284000);
// JSONの形に変換
incomeJson = JSON.serialize(incomeMap);
}
javascriptでの受け取り
var dataMap = JSON.parse('{!incomeJson}');
var result = [['年月','数値']];
Object.keys(dataMap).forEach(function(data) {
result.push([data,contactMap[data]]);
})
javascriptで作成した配列のresultを描画個所のDatatableに渡す
まとめ
数年分のデータをグラフにすると横長になってしまうため、
1年ごとに表示したかったのがGoogle Chartsのガイドがわかりにくくjavascriptで実装。
よい方法があるなら知りたいところです
参考