メモ > 技術 > サービス: Google > Google Charts API
■Google Charts API
Webページ上にグラフを掲載できる
Charts | Google Developers
https://developers.google.com/chart/
公式からコードを取得できる
以下は最近の紹介記事
WordPressの記事ページ (それ以外でも多分OK) に、Google Charts を使って生成したグラフを表示する方法 | ラボラジアン
https://laboradian.com/display-google-charts-graph-in-wp-article/
以下のようにすると、Webページ内に円グラフを表示できる
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
<div id="chart_div_sample"></div>
<script>
document.addEventListener("DOMContentLoaded", (event) => {
// Load the Visualization API and the corechart package.
google.charts.load('current', {'packages':['corechart']});
// Set a callback to run when the Google Visualization API is loaded.
google.charts.setOnLoadCallback(() => {
// Create the data table.
const data = new google.visualization.DataTable();
data.addColumn('string', 'Topping');
data.addColumn('number', 'Slices');
data.addRows([
['便利と感じる', 0.107],
['便利と感じるが、不快に感じることもある', 0.355],
['便利と感じないし、不快に感じることが多い', 0.259],
['不快なのでやめてほしい', 0.256],
['その他', 0.023]
]);
// Set chart options
const options = {
'title':'Web閲覧履歴などをもとにカスタマイズされた広告が配信されていると認識している人の感想',
'width': '100%',
'height':300
};
// Instantiate and draw our chart, passing in some options.
const chart = new google.visualization.PieChart(document.getElementById('chart_div_sample'));
chart.draw(data, options);
});
});
</script>
以下は色々なグラフを表示する例
<html>
<head>
<meta charset="utf-8">
<title>Google Charts</title>
<script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script>
</head>
<body>
<h1>Google Charts</h1>
<p>Google Charts のテスト。</p>
<article>
<h2>Pie Chart</h2>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
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',
colors:[
'#4E79A7',
'#E15759',
'#F28E2B',
'#59A14F',
'#B07AA1',
'#EDC948',
'#76B7B2',
'#FF9DA7',
]
};
var chart = new google.visualization.PieChart(document.getElementById('pie_chart'));
chart.draw(data, options);
}
</script>
<div id="pie_chart" style="width: 500px; height: 300px;"></div>
</article>
<article>
<h2>Line Chart</h2>
<script type="text/javascript">
google.charts.load('current', {'packages':['line']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = new google.visualization.DataTable();
data.addColumn('number', 'Day');
data.addColumn('number', 'Guardians of the Galaxy');
data.addColumn('number', 'The Avengers');
data.addColumn('number', 'Transformers: Age of Extinction');
data.addRows([
[1, 37.8, 80.8, 41.8],
[2, 30.9, 69.5, 32.4],
[3, 25.4, 57, 25.7],
[4, 11.7, 18.8, 10.5],
[5, 11.9, 17.6, 10.4],
[6, 8.8, 13.6, 7.7],
[7, 7.6, 12.3, 9.6],
[8, 12.3, 29.2, 10.6],
[9, 16.9, 42.9, 14.8],
[10, 12.8, 30.9, 11.6],
[11, 5.3, 7.9, 4.7],
[12, 6.6, 8.4, 5.2],
[13, 4.8, 6.3, 3.6],
[14, 4.2, 6.2, 3.4]
]);
var options = {
chart: {
title: 'Box Office Earnings in First Two Weeks of Opening',
subtitle: 'in millions of dollars (USD)'
},
colors:[
'#4E79A7',
'#E15759',
'#F28E2B',
'#59A14F',
'#B07AA1',
'#EDC948',
'#76B7B2',
'#FF9DA7',
]
};
var chart = new google.charts.Line(document.getElementById('line_chart'));
chart.draw(data, google.charts.Line.convertOptions(options));
}
</script>
<div id="line_chart" style="width: 500px; height: 300px;"></div>
</article>
<article>
<h2>Column Chart</h2>
<script type="text/javascript">
google.charts.load('current', {packages: ['corechart', 'bar']});
google.charts.setOnLoadCallback(drawDualY);
function drawDualY() {
var data = new google.visualization.DataTable();
data.addColumn('timeofday', 'Time of Day');
data.addColumn('number', 'Motivation Level');
data.addColumn('number', 'Energy Level');
data.addRows([
[{v: [8, 0, 0], f: '8 am'}, 1, .25],
[{v: [9, 0, 0], f: '9 am'}, 2, .5],
[{v: [10, 0, 0], f:'10 am'}, 3, 1],
[{v: [11, 0, 0], f: '11 am'}, 4, 2.25],
[{v: [12, 0, 0], f: '12 pm'}, 5, 2.25],
[{v: [13, 0, 0], f: '1 pm'}, 6, 3],
[{v: [14, 0, 0], f: '2 pm'}, 7, 4],
[{v: [15, 0, 0], f: '3 pm'}, 8, 5.25],
[{v: [16, 0, 0], f: '4 pm'}, 9, 7.5],
[{v: [17, 0, 0], f: '5 pm'}, 10, 10],
]);
var options = {
chart: {
title: 'Motivation and Energy Level Throughout the Day',
subtitle: 'Based on a scale of 1 to 10'
},
series: {
0: {axis: 'MotivationLevel'},
1: {axis: 'EnergyLevel'}
},
axes: {
y: {
MotivationLevel: {label: 'Motivation Level (1-10)'},
EnergyLevel: {label: 'Energy Level (1-100)'}
}
},
hAxis: {
title: 'Time of Day',
format: 'h:mm a',
viewWindow: {
min: [7, 30, 0],
max: [17, 30, 0]
}
},
vAxis: {
title: 'Rating (scale of 1-10)'
},
colors:[
'#4E79A7',
'#E15759',
'#F28E2B',
'#59A14F',
'#B07AA1',
'#EDC948',
'#76B7B2',
'#FF9DA7',
]
};
var materialChart = new google.charts.Bar(document.getElementById('column_chart'));
materialChart.draw(data, options);
}
</script>
<div id="column_chart" style="width: 500px; height: 300px;"></div>
</article>
<article>
<h2>Area Chart</h2>
<script type="text/javascript">
google.charts.load('current', {'packages':['corechart']});
google.charts.setOnLoadCallback(drawChart);
function drawChart() {
var data = google.visualization.arrayToDataTable([
['Year', 'Sales', 'Expenses'],
['2013', 1000, 400],
['2014', 1170, 460],
['2015', 660, 1120],
['2016', 1030, 540]
]);
var options = {
title: 'Company Performance',
hAxis: {title: 'Year', titleTextStyle: {color: '#333'}},
vAxis: {minValue: 0},
colors:[
'#4E79A7',
'#E15759',
'#F28E2B',
'#59A14F',
'#B07AA1',
'#EDC948',
'#76B7B2',
'#FF9DA7',
]
};
var chart = new google.visualization.AreaChart(document.getElementById('area_chart'));
chart.draw(data, options);
}
</script>
<div id="area_chart" style="width: 500px; height: 300px;"></div>
</article>
</body>
</html>