chart.jsを1ページ内に複数設置する方法

前提・実現したいこと

chart.jsについてです。

chart.jsを使用してレーダーチャートを作り、運営中のWordPressサイトで公開したいのですが、複数のレーダーチャートを作ったところ2つ目が表示されません。

ショートタグを使用して実装する方法です。
コードはネットの記事を参考にしました。

function.php内

php
1function canvas_tag($atts){
2extract(shortcode_atts(array(
3'id' => null
4),$atts));
5
6$html = <<<eof
7<canvas id="{$id}"></canvas>
8eof
9;
10return $html;
11}
12add_shortcode('canvas','canvas_tag');

header.php内

php
1<body <?php body_class(); ?> onload="displayPieChart();">

投稿ページのheader内

javascript
1<script language = "JavaScript" > 
2function displayPieChart() {
3  var data = {
4    labels: ["ああ", "いい", "うう", "ええ", "おお"],
5    datasets: [{
6      label: "商品名02",
7      fillColor: "rgba(200,0,0,0.2)",
8      strokeColor: "red",
9      pointColor: "red",
10      pointStrokeColor: "red",
11      pointHighlightFill: "red",
12      pointHighlightStroke: "red",
13      data: [5, 5, 5, 5, 5]
14    }]
15  };
16  var ctx = document.getElementById("radarChart").getContext("2d");
17  var options = {
18    legendTemplate: "<% for (var i=0; i<datasets.length; i++){%><span style=\"background-color:<%=datasets[i].strokeColor%>\">&nbsp;&nbsp;&nbsp;</span>&nbsp;<%if(datasets[i].label){%><%=datasets[i].label%><%}%><br><%}%>",
19    responsive: true,
20  };
21  var radarChart = new Chart(ctx).Radar(data, options);
22  document.getElementById("info").innerHTML = radarChart.generateLegend();
23} 
24</script>
25<script language = "JavaScript" > 
26function displayPieChart() {
27  var data2 = {
28    labels: ["かか", "きき", "くく", "けけ", "ここ"],
29    datasets: [{
30      label: "商品名02",
31      fillColor: "rgba(200,0,0,0.2)",
32      strokeColor: "red",
33      pointColor: "red",
34      pointStrokeColor: "red",
35      pointHighlightFill: "red",
36      pointHighlightStroke: "red",
37      data: [5, 5, 5, 5, 5]
38    }]
39  };
40  var ctx2 = document.getElementById("radarChart2").getContext("2d");
41  var options2 = {
42    legendTemplate: "<% for (var i=0; i<datasets.length; i++){%><span style=\"background-color:<%=datasets[i].strokeColor%>\">&nbsp;&nbsp;&nbsp;</span>&nbsp;<%if(datasets[i].label){%><%=datasets[i].label%><%}%><br><%}%>",
43    responsive: true,
44  };
45  var radarChart2 = new Chart(ctx2).Radar(data2, options2);
46  document.getElementById("info").innerHTML = radarChart2.generateLegend();
47} </script>

投稿ページのheader内

html
1[canvas id="radarChart"]
2[canvas id="radarChart2"]

上記のようにしたのですが2個目のチャートのみが表示されています。
理由がわからないので教えていただきたいです。

コードはネットの記事を参考にしました。
https://www.m-design.site/blog/wordpress/wordpress%E3%81%A7chart-js%E3%82%92%E3%81%A4%E3%81%8B%E3%81%A3%E3%81%A6%E3%81%BF%E3%82%8B/

まだjavaScript勉強し始めたばかりなので、単純なことかもしれませんがご回答頂けると嬉しいです。

m.ts10806

2018/05/15 02:39

IDは合ってるんですよね？radarChart,radarChart2 念のため参考にした記事のURLを質問本文に追記してください。また、コードは適切にインデントをつけてください。コードブロックの冒頭 ``` の直後に ```php ```js などと入れると言語にあわせて適切にハイライトされるのでご活用ください。