Q&A
ローカルでやってみたところ動作したので、タイミングによって変わるかもしれませんね。'success' は2回表示されてましたか？ 現段階で怪しいと思っているのは、$(function(){})です。
2016/2/2追記
グラフが表示されない原因の一つが、データがない時だと分かりました。
グラフによっては、存在しないデータだけ非表示となるのですが、折れ線だとうまくいきませんでした。
JavaScriptで、データをPHPの変数で与えているときに、
変数の配列が空の場合は、対象データから外すことは可能でしょうか？
例えば、以下のコードで、$var_6が空の場合は、[●●●],までを非表示にするとか・・・
var data = google.visualization.arrayToDataTable([ ['Year', '新規ユーザー', 'リピーター'], ['<?php echo $var_6[access]; ?>', <?php echo $var_6[newer]; ?>, <?php echo $var_6[repeater_count]; ?>], ['<?php echo $var_5[access]; ?>', <?php echo $var_5[newer]; ?>, <?php echo $var_5[repeater_count]; ?>], ['<?php echo $var_4[access]; ?>', <?php echo $var_4[newer]; ?>, <?php echo $var_4[repeater_count]; ?>], ['<?php echo $var_3[access]; ?>', <?php echo $var_3[newer]; ?>, <?php echo $var_3[repeater_count]; ?>], ['<?php echo $var_2[access]; ?>', <?php echo $var_2[newer]; ?>, <?php echo $var_2[repeater_count]; ?>], ['<?php echo $var[access]; ?>', <?php echo $var[newer]; ?>, <?php echo $var[repeater_count]; ?>], ]); ``` ※もともとの質問内容 JSONデータ取得済みの２つのファイル、array.jsonとarray2.jsonがあるのですが、 これらの２つのファイルを読み込む形でグラフを表示させたいと思っています。 しかし、それぞれ、１ページ内に表示させようとすると、どちらか一方しか表示されません。 最初は、関数名がぶつかっているのかと思い、drawChart2などに変更したのですが、 効果なし。可能な変数は名前を変えてみたのですがダメでした。 consoleログなどをところどころ、いじると、たまに、もう１方のグラフだけが出たりするので、 ひょっとすると、$.Deferred()が関係しているのかと推測している状況です。 他のサイトを見ても、GoogleChartsを使って複数のグラフを並べて表示させているので、 できるはずだと思うのですが… 何か考えられる原因があれば教えてください。 ```ここに言語を入力 <script type="text/javascript"> google.load("visualization", "1.1", {packages:["line"]}); google.setOnLoadCallback(drawChart); //JSONデータ加工処理 var result = []; //console.log(typeof result); function drawChart() { var df = $.Deferred(); $(function(){ $.ajax({ url:'array.json', dataType:'json', }).done(function(data_j){ console.log("success"); console.log(typeof result); //document.write(data); var keys = Object.keys(data_j[0]); for (var i = 0; i < data_j.length; i++) { for (var j = 0; j < keys.length; j++) { var key = keys[j]; //if(key == 'this'){key = '今月'}; if (typeof result[j] == 'undefined') { result[j] = [ key == 'access_type' ? 'Month' : key ]; } result[j].push(data_j[i][key]); } //document.write(result); } for(var k = 0; k < result.length; k++) { switch(result[k][0]){ case 'this': result[k][0] = '今月'; break; case 'one': result[k][0] = '1ヶ月前'; break; case 'two': result[k][0] = '2ヶ月前'; break; case 'three': result[k][0] = '3ヶ月前'; break; case 'four': result[k][0] = '4ヶ月前'; break; case 'five': result[k][0] = '5ヶ月前'; break; case 'six': result[k][0] = '半年前'; break; case 'seven': result[k][0] = '7ヶ月前'; break; case 'eight': result[k][0] = '8ヶ月前'; break; case 'nine': result[k][0] = '9ヶ月前'; break; case 'ten': result[k][0] = '10ヶ月前'; break; case 'eleven': result[k][0] = '11ヶ月前'; break; case 'year': result[k][0] = '1年前'; break; } } console.log(result); df.resolve(); }).fail(function(){ console.log("error"); }); }); df.done(function(){ var data = google.visualization.arrayToDataTable(result); var chart = new google.charts.Line(document.getElementById('chart_div')); chart.draw(data); }); } </script> <div style="padding-top:20pt"> <h2>【グラフ】</h2> <div id="chart_div" style="width: 1200px; height: 500px;"></div> </div><!--padding 20pt --> <script type="text/javascript"> google.load("visualization", "1.1", {packages:["line"]}); google.setOnLoadCallback(drawChart); //JSONデータ加工処理 var result3 = []; function drawChart() { var df = $.Deferred(); $(function(){ $.ajax({ url:'array2.json', dataType:'json', }).done(function(data_j){ console.log("success"); //console.log(typeof result); var keys = Object.keys(data_j[0]); //document.write(keys2); for (var i = 0; i < data_j.length; i++) { for (var j = 0; j < keys.length; j++) { var key = keys[j]; if (typeof result3[j] == 'undefined') { result3[j] = [ key == 'prefectures_name' ? 'Month' : key ]; } result3[j].push(data_j[i][key]); } //document.write(result); //console.log(result3); } for(var k = 0; k < result3.length; k++) { switch(result3[k][0]){ case 'this': result3[k][0] = '今月'; break; case 'one': result3[k][0] = '1ヶ月前'; break; case 'two': result3[k][0] = '2ヶ月前'; break; case 'three': result3[k][0] = '3ヶ月前'; break; case 'four': result3[k][0] = '4ヶ月前'; break; case 'five': result3[k][0] = '5ヶ月前'; break; case 'six': result3[k][0] = '半年前'; break; case 'seven': result3[k][0] = '7ヶ月前'; break; case 'eight': result3[k][0] = '8ヶ月前'; break; case 'nine': result3[k][0] = '9ヶ月前'; break; case 'ten': result3[k][0] = '10ヶ月前'; break; case 'eleven': result3[k][0] = '11ヶ月前'; break; case 'year': result3[k][0] = '1年前'; break; } } console.log(result3); df.resolve(); }).fail(function(){ console.log("error"); }); }); df.done(function(){ var data = google.visualization.arrayToDataTable(result3); //document.write(data); var chart = new google.charts.Line(document.getElementById('chart_div2')); chart.draw(data); }); } </script> <div style="padding-top:20pt"> <h2>【グラフ2】</h2> <div id="chart_div2" style="width: 1200px; height: 500px;"></div> </div><!--padding 20pt --> ```
回答5件
0
自己解決
いろいろ回答有難うございました。
結局、不要な行をうまくJavaScriptで消せなかったので、
配列のカウント数で場合分けし、それぞれのデータをPHPの変数を直接指定して、力技で記述しました。
こんな感じです。
また、グラフが複数表示できない原因も、外部ファイル経由だとサーバの制限によって起こる可能性がある可能性があるようです。変数から直接、グラフ用のデータを作ってやれば大抵は表示されるようです。
if(<?php print $count; ?> == 1){ var house_data = [ ['Year-Month', '<?php print $var_1['house_name'] . $var_1['house_name_sub']; ?>'], ['<?php print "今月"; ?>',<?php print $var_1[this]; ?>], ['<?php print "1ヶ月前"; ?>',<?php print $var_1[one]; ?>], ['<?php print "2ヶ月前"; ?>',<?php print $var_1[two]; ?>], ['<?php print "3ヶ月前"; ?>',<?php print $var_1[three]; ?>], ['<?php print "4ヶ月前"; ?>',<?php print $var_1[four]; ?>], ['<?php print "5ヶ月前"; ?>',<?php print $var_1[five]; ?>], ['<?php print "半年前"; ?>',<?php print $var_1[six]; ?>], ['<?php print "7ヶ月前"; ?>',<?php print $var_1[seven]; ?>], ['<?php print "8ヶ月前"; ?>',<?php print $var_1[eight]; ?>], ['<?php print "9ヶ月前"; ?>',<?php print $var_1[nine]; ?>], ['<?php print "10ヶ月前"; ?>',<?php print $var_1[ten]; ?>], ['<?php print "11ヶ月前"; ?>',<?php print $var_1[eleven]; ?>], ['<?php print "１年前"; ?>',<?php print $var_1[year]; ?>], ] } else if
投稿2016/02/05 06:36
総合スコア113
0
いろいろ回答有難うございました。
結局、データの回数で場合分けして、力技で処理しました。
投稿2016/02/05 06:42
総合スコア113
0
いろいろ回答有難うございました。結局、データの回数で場合分けして、力技で解決させました。
こんな感じです。
if(<?php print $count; ?> == 1){ var house_data = [ ['Year-Month', '<?php print $var_1['house_name'] . $var_1['house_name_sub']; ?>'], ['<?php print "今月"; ?>',<?php print $var_1[this]; ?>], ['<?php print "1ヶ月前"; ?>',<?php print $var_1[one]; ?>], ['<?php print "2ヶ月前"; ?>',<?php print $var_1[two]; ?>], ['<?php print "3ヶ月前"; ?>',<?php print $var_1[three]; ?>], ['<?php print "4ヶ月前"; ?>',<?php print $var_1[four]; ?>], ['<?php print "5ヶ月前"; ?>',<?php print $var_1[five]; ?>], ['<?php print "半年前"; ?>',<?php print $var_1[six]; ?>], ['<?php print "7ヶ月前"; ?>',<?php print $var_1[seven]; ?>], ['<?php print "8ヶ月前"; ?>',<?php print $var_1[eight]; ?>], ['<?php print "9ヶ月前"; ?>',<?php print $var_1[nine]; ?>], ['<?php print "10ヶ月前"; ?>',<?php print $var_1[ten]; ?>], ['<?php print "11ヶ月前"; ?>',<?php print $var_1[eleven]; ?>], ['<?php print "１年前"; ?>',<?php print $var_1[year]; ?>], ] } else if
投稿2016/02/05 06:39
総合スコア113
0
html
1<!DOCTYPE HTML> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="robots" content="NOINDEX,NOFOLLOW" /> 6 <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport' /> 7 <link rel="icon" href="favicon.ico" /> 8 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 9 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /> 10 <title>サンプル</title> 11 <style type="text/css"> 12 .graph { 13 min-height: 300px; 14 border: 1px solid #333; 15 } 16 </style> 17 </head> 18 <body> 19 <div class="container"> 20 <div class="row"> 21 <div class="col-md-6 graph" data-type="bar" id="bar"> 22 23 </div> 24 <div class="col-md-6 graph" data-type="line" id="line"> 25 26 </div> 27 </div> 28 </div> 29 <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 30 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script> 31 <script src="https://www.google.com/jsapi"></script> 32 <script type="text/javascript"> 33 var callback = function () { 34 var data = google.visualization.arrayToDataTable([ 35 ['', '小学生', '中1生', '中2生', '中3生', '高校生'], 36 ['2015/04', 0, 6, 10, 18, 3], 37 ['2015/05', 0, 6, 10, 18, 3], 38 ['2015/06', 0, 6, 12, 20, 3], 39 ['2015/07', 0, 7, 12, 20, 3], 40 ['2015/08', 0, 7, 16, 20, 3], 41 ['2015/09', 0, 10, 16, 24, 5], 42 ['2015/10', 0, 10, 16, 24, 5], 43 ['2015/11', 0, 10, 16, 24, 5], 44 ['2015/12', 0, 10, 16, 24, 5], 45 ['2016/01', 3, 12, 18, 24, 5], 46 ['2016/02', 3, 12, 18, 24, 5], 47 ['2016/03', 3, 12, 18, 24, 5] 48 ]); 49 var options = { 50 title: '受講者内訳', 51 height: 300, 52 bar: { 53 groupWidth: '90%' 54 }, 55 isStacked: true 56 }; 57 var dom = document.getElementById('bar'); 58 var chart = new google.visualization.BarChart(dom); 59 chart.draw(data, options); 60 }; 61 62 var callback2 = function () { 63 var data = google.visualization.arrayToDataTable([ 64 ['', '小学生', '中1生', '中2生', '中3生', '高校生'], 65 ['2015/04', 0, 6, 10, 18, 3], 66 ['2015/05', 0, 6, 10, 18, 3], 67 ['2015/06', 0, 6, 12, 20, 3], 68 ['2015/07', 0, 7, 12, 20, 3], 69 ['2015/08', 0, 7, 16, 20, 3], 70 ['2015/09', 0, 10, 16, 24, 5], 71 ['2015/10', 0, 10, 16, 24, 5], 72 ['2015/11', 0, 10, 16, 24, 5], 73 ['2015/12', 0, 10, 16, 24, 5], 74 ['2016/01', 3, 12, 18, 24, 5], 75 ['2016/02', 3, 12, 18, 24, 5], 76 ['2016/03', 3, 12, 18, 24, 5] 77 ]); 78 var options = { 79 title: '受講者内訳', 80 height: 300, 81 isStacked: true 82 }; 83 var dom = document.getElementById('line'); 84 var chart = new google.visualization.LineChart(dom); 85 chart.draw(data, options); 86 }; 87 88 google.load("visualization", "1", { 89 packages: ["corechart", "linechart"] 90 }); 91 google.setOnLoadCallback(callback); 92 google.setOnLoadCallback(callback2); 93 </script> 94 </body> 95</html>
Chrome での実行結果↓
https://developers.google.com/chart/interactive/docs/gallery/linechart
html
1<!DOCTYPE HTML> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="robots" content="NOINDEX,NOFOLLOW" /> 6 <meta content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no' name='viewport' /> 7 <link rel="icon" href="favicon.ico" /> 8 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /> 9 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css" rel="stylesheet" /> 10 <title>サンプル</title> 11 <style type="text/css"> 12 .graph { 13 min-height: 300px; 14 border: 1px solid #333; 15 } 16 </style> 17 </head> 18 <body> 19 <div class="container"> 20 <div class="row"> 21 <div class="col-md-6 graph" data-type="bar" id="bar"> 22 23 </div> 24 <div class="col-md-6 graph" data-type="line" id="line"> 25 26 </div> 27 </div> 28 </div> 29 <script src="https://code.jquery.com/jquery-2.1.4.min.js"></script> 30 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" type="text/javascript"></script> 31 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 32 <script type="text/javascript"> 33 function drawChart() { 34 $.getJSON('data.php', {type: 0}, function (json) { 35 var data = new google.visualization.arrayToDataTable(json); 36 var options = { 37 chart: { 38 title: 'Box Office Earnings in First Two Weeks of Opening', 39 subtitle: 'in millions of dollars (USD)' 40 }, 41 axes: { 42 x: { 43 0: {side: 'bottom'} 44 } 45 } 46 }; 47 var chart = new google.charts.Line(document.getElementById('bar')); 48 chart.draw(data, options); 49 }); 50 } 51 function drawChart2() { 52 $.getJSON('data.php', {type: 1}, function (json) { 53 var data = new google.visualization.arrayToDataTable(json); 54 var options = { 55 chart: { 56 title: 'Box Office Earnings in First Two Weeks of Opening' 57 }, 58 axes: { 59 x: { 60 0: {side: 'top'} 61 } 62 } 63 }; 64 var chart = new google.charts.Line(document.getElementById('line')); 65 chart.draw(data, options); 66 }); 67 } 68 google.charts.load('current', {'packages': ['line']}); 69 google.charts.setOnLoadCallback(drawChart); 70 google.charts.setOnLoadCallback(drawChart2); 71 </script> 72 </body> 73</html>
投稿2016/01/09 09:33
編集2016/01/20 12:52
退会済みユーザー
総合スコア0
回答有難うございます。
まだ、上記コードをためしていないんですが、
JSON形式のファイルを読み込む形でも、問題なく複数のグラフが表示できるように
なりますでしょうか？
可能です。
回答有難うございました。
実際に、JSONファイルを読み込むやり方で、Deferredを使って試してみました。
すると、google.visualization.LineChartだと、FireFoxでは両方とも表示されましたが、
InternetExplorerでは、片方しか表示されませんでした。
また、LineChartsを改良したような図だと思われる、
google.charts.Lineの形式
google.load("visualization", "1.1", {packages:["line"]});
では、FireFoxでも片方しか表示されませんでした。
ブラウザでも動作が違うし、LineChartの形式でも変わるようです。
可能でしたら、もう一つのLineChart形式あるいは、ブラウザでも確認して頂けますでしょうか？
当方、Macなので、IEは検証できません。ただ、他のシステムではJSONでも問題起きていないので、スクリプトが悪いんだろうとしか想像つきませんねー。
Charts.Lineの形式はどうですか？
こちらの図の方が見やすい印象だったので、選んでみたのですが…
質問の意味が読み取れません…「Charts.Lineの形式」って？？？
折れ線グラフには2種類あって、
google.visualization.LineChart()
google.load("visualization", "1", {
packages: ["corechart", "linechart"]
});
と記述するやり方と、
google.charts.Line()
google.load("visualization", "1.1", {packages:["line"]});
と記述する方法があるのですが、
回答して頂いたのが、前者で、
私が両方確認したところ、後者だと、片方しか表示されませんでした。
実際、先ほど、頂いたサンプルで、一番目のグラフも折れ線に変えて
前者と後者を試してみたら、後者のcharts.Lineだと、最初しか表示されませんでした。
それなら、前者の方法で実装すればいいじゃないでしょうか？
そうですね。見やすさが、後者の方が良かったのでこちらを選んでいたのですが、
グラフだけ別ファイルに分けて、１つずつ表示させるとかにしようかと思っています。
有難うございました！
見やすさというけど、どう違います？オプション設定で変更できるというのに、何について行っているのでしょう？？
> google.load("visualization", "1.1", {packages:["line"]});
どうも、line の時の記述にしたがってないだけですね。
こちらの手元では、問題なく表示できました。
回答有難うございます。
そうなんですね！
1.1の形式でも表示できるんですね。
オプション設定は確かにありますが、なかなか調整しづらいために
デフォルトで見栄えのいい、1.1を選んでいました。
まだまだJavaScriptが未熟の自分にとっては、完全解決できない状況ですが、
ある程度妥協して、この質問終わらせる予定です。
グラフ表示、だいたい完了しました。複数表示に失敗してたのは、Defferedを使った外部JSONファイルを使用したことが原因のようです。普通に同じPHPファイル内で変数から読み込んだ時は殆ど問題ありませんでした。
0
drawChartという関数名が重複しているのが原因だと思います。
追記：
すみません、ご質問をよく読んでいませんでした。
それだとだめなんですよね・・・
しかし、最低でも関数名は重複しないようにする必要はあると思います。
追記2：
参考コード（コピペしてhtmlファイルに貼り付けるだけで確認できるはずです。）
HTML
1<html> 2 <head> 3 <script type="text/javascript" src="https://www.gstatic.com/charts/loader.js"></script> 4 <script type="text/javascript"> 5 google.charts.load('current', {'packages':['corechart']}); 6 google.charts.setOnLoadCallback(drawChart); 7 8 <!-- 追記1 ここから--> 9 google.charts.setOnLoadCallback(drawChart2); 10 <!-- 追記1 ここまで--> 11 12 13 function drawChart() { 14 var data = google.visualization.arrayToDataTable([ 15 ['Year', 'Sales', 'Expenses'], 16 ['2004', 1000, 400], 17 ['2005', 1170, 460], 18 ['2006', 660, 1120], 19 ['2007', 1030, 540] 20 ]); 21 22 var options = { 23 title: 'Company Performance', 24 curveType: 'function', 25 legend: { position: 'bottom' } 26 }; 27 28 var chart = new google.visualization.LineChart(document.getElementById('curve_chart')); 29 30 chart.draw(data, options); 31 } 32 33 <!-- 追記2 ここから--> 34 function drawChart2() { 35 var data = google.visualization.arrayToDataTable([ 36 ['Year', 'Sales', 'Expenses'], 37 ['2004', 1000, 400], 38 ['2005', 1170, 460], 39 ['2006', 660, 1120], 40 ['2007', 1030, 540] 41 ]); 42 43 var options = { 44 title: 'Company Performance', 45 curveType: 'function', 46 legend: { position: 'bottom' } 47 }; 48 49 <!-- 編集1 ここから--> 50 var chart = new google.visualization.LineChart(document.getElementById('curve_chart2')); 51 <!-- 編集2 ここまで--> 52 53 chart.draw(data, options); 54 } 55 <!-- 追記2 ここまで--> 56 57 </script> 58 59 </head> 60 <body> 61 <div id="curve_chart" style="width: 900px; height: 500px"></div> 62 63 <!-- 追記3 ここから--> 64 <div id="curve_chart2" style="width: 900px; height: 500px"></div> 65 <!-- 追記3 ここまで--> 66 67 68 </body> 69</html> 70
投稿2016/01/08 13:36
編集2016/01/09 08:54
総合スコア1409
回答有難うございます。
一度、関数名を全く別な名前に変えたら、一度だけ両方のグラフが表示されましたが、その後また、どちらか一方になってしまいました。
キャシュの影響でしょうか？
また、Defferd?の影響はないですしょうか？
ご提示頂いたコードを精査する前に、私もちょっと試してみました。
Google Developersのコードのうち、drawChart()をコピーしてdrawChart2()を増やしてみたところ、表示されました。
https://developers.google.com/chart/interactive/docs/gallery/linechart
上記回答欄を編集という形でコードを載せますので、htmlファイルにそのままコピペして試してみてください。
もしかしたら、このコードを基に改良していった方が早いかもしれません。
きちんとした回答になっていなくてすみません。
コメント遅くなりました。
試すのはいいのですが、Defferedを使わないとファイルから読み込んだJSONデータを格納した変数の取得でうまくいかないのではないかと思っていましたが…
ファイルから読み込む形でも試されましたでしょうか？
あなたの回答
tips
プレビュー
