Google Chart APIを使用して株価Chartを作成する方法と問題点
- Google Chart APIを使用して株価Chartを作成する方法とは？
- Javascriptの変数の中に変数を代入する方法とは？
- Google Chart APIを使用した株価Chart作成での問題点とは？
- ベストアンサー
Javascriptの変数の中に変数を代入するには
Google chart というAPIがあります。これを利用して株価Chartを作ります。 https://google-developers.appspot.com/chart/interactive/docs/gallery/candlestickchart 末尾にGoogle Chartのソースを記載していますが このvar data内の ['Mon', 20, 28, 38, 45], ['Tue', 31, 38, 55, 66], ['Wed', 50, 55, 77, 80], ['Thu', 77, 77, 66, 50], ['Fri', 68, 66, 22, 15] の部分を変更することによりローソクチャートが引けます。 一方、 <script type="text/javascript"> var chart; chart = "<div id='chart'></div>"; document.write("" + chart + ""); </script> と記載すると ['Mon', 20, 28, 38, 45], ['Tue', 31, 38, 55, 66], ['Wed', 50, 55, 77, 80], ['Thu', 77, 77, 66, 50], ['Fri', 68, 66, 22, 15] のような株価変数が取得できるjavascriptを作成しました。 この2つを組み合わせると、株価チャートが引けることとなります。 ************************ 現在の苦境状況 ************************ Google chart APIに、下記のように「document.write("" + chart + ""); または "" + chart + "";または + chart + ;」を代入してみたのですが、チャートは表示されません。 変数の中に変数を入れたことが原因と思いますが、どのようにすればいいかアドバイス願います。 <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> var chart; chart = "<div id='chart'></div>"; google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ document.write("" + chart + ""); ], true); var options = { legend:'none' }; var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> ************************ GoogleChart ************************ <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { var data = google.visualization.arrayToDataTable([ ['Mon', 20, 28, 38, 45], ['Tue', 31, 38, 55, 66], ['Wed', 50, 55, 77, 80], ['Thu', 77, 77, 66, 50], ['Fri', 68, 66, 22, 15] ], true); var options = { legend:'none' }; var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div')); chart.draw(data, options); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div>
- tajix14
- お礼率72% (175/242)
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
よくわかりませんが、こういうことでしょうか <!DOCTYPE html> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript"> function 株価変数が取得できる関数() { var form = document.forms['rohsoku']; var inputData = [], V = function(n){return parseInt(n)}; for (var i = 0; i < 256; i++) { var g = form.elements[ i + 't' ]; if (!g) break; var d = form.elements[ i + 'a' ].value.split(/,/); inputData.push([g.value, V(d[0]), V(d[1]), V(d[2]), V(d[3])]); } return inputData; } google.load("visualization", "1", {packages:["corechart"]}); google.setOnLoadCallback(drawChart); function drawChart() { function 株価チャートを引く関数() { var data = google.visualization.arrayToDataTable(株価変数が取得できる関数(), true); var options = { legend:'none' }; var chart = new google.visualization.CandlestickChart(document.getElementById('chart_div')); chart.draw(data, options); } 株価チャートを引く関数(); document.forms['rohsoku'].addEventListener('submit',function(ev){ev.preventDefault(); 株価チャートを引く関数()}, false); } </script> </head> <body> <div id="chart_div" style="width: 900px; height: 500px;"></div> <form name=rohsoku> <table> <tr><td><input name=0t value=Mon><td><input name=0a value=20,28,38,45> <tr><td><input name=1t value=Tue><td><input name=1a value=31,38,55,66> <tr><td><input name=2t value=Wed><td><input name=2a value=50,55,77,80> <tr><td><input name=3t value=Thu><td><input name=3a value=50,77,66,77> <tr><td><input name=4t value=Fri><td><input name=4a value=15,66,22,68> </table> <button type=submit>株価を変化させて再描画</button> </form>
関連するQ&A
- plorogプログラミング
たとえば /*ミラノ：ロンドン*/ timetable(mil,lon,[0735,0845,az226,[sun,mon,tue,wed,thu,fri,sat]]). timetable(mil,lon,[0755,0900,ba571,[sun,mon,tue,wed,thu,fri,sat]]). timetable(mil,lon,[0815,0925,ba561,[sun,mon,tue,wed,thu,fri,sat]]). timetable(mil,lon,[1020,1125,az228,[sun,mon,tue,wed,thu,fri,sat]]). timetable(mil,lon,[1130,1230,ba565,[sun,mon,tue,wed,thu,fri,sat]]). というフライトデータがあるとして、ここからフライト時間を割り出すにはどうしたらいいんでしょうか？ 述語が分かる方お願いします。
- ベストアンサー
- その他（プログラミング・開発）
- javascriptでカレンダーを作る方法
下に書いてあるjavascriptを書き換えて、一番上のマスごとにはsun・mon・tue・wed・thu・fri・satと書かれ、その下の水曜日(wed)のマスから順に1～30まで一マスごとに数字を入れられ、sun・5・12・19・26は赤文字で書かれ、1より前のマスや30以降のマスは空欄のカレンダーを作るにはどうすればいいでしょうか？ <!DOCTYPE html> <html lang="java"> <head> <meta charset="utf-8"> <title>sample</title> </head> <body> <script> var table=document.createElement("table"); table.setAttribute("border",1); var tbody=document.createElement("tbody"); for(var i=0;i<4;i++){ var tr=document.createElement("tr"); for(var j=0;j<7;j++){ var td=document.createElement("td"); var txt=i*7+j+1; td.appendChild(document.createTextNode(txt)); tr.appendChild(td); } tbody.appendChild(tr); } table.appendChild(tbody); document.getElementsByTagName("body")[0].appendChild(table); </script> </body> </html>
- ベストアンサー
- その他（学問・教育）
- perl qw(aaa bbb ccc)[$hoge]のような記述
my($sec, $min, $hour, $mday, $mon, $year, $wday, $yday, $isdst) = localtime(time); $wday = sprintf("%s", qw(Sun Mon Tue Wed Thu Fri Sat)[$wday]); ２行目のsprintfですが、qw(Sun Mon Tue Wed Thu Fri Sat)[$wday]はどのようなことが行われているのでしょうか？ sprintf("%s", "hello world!");みたいな基本的なものならsprintfの使い方はわかります。ですが、qw(aaa bbb ccc)[$hoge]のような記述についてがわかりません。 上記の例でいえば、どういう結果になるのかはわかるのですが、どういう過程で代入されているのかがわかりません。 qw(Sun Mon Tue Wed Thu Fri Sat)[$wday]という書式はどういうことが行われているのか教えてください。よろしくお願いします。
- ベストアンサー
- Perl
- javaScriptのエラー
サイトにjavaScriptを使って自動日付表示があったのでアップしたところ年代が2004では無く104と表示してしまいます。ちなみにスクリプトは下記の通りですよろしく御願します。 <略> myWeek = new Array("Sun.", "Mon.", "Tue.", "Wed.", "Thu.", "Fri.", "Sat."); myD = new Date(); myYear = (myD.getYear() <= 99) ? 1900+myD.getYear() : myD.getYear(); myMonth = myD.getMonth() + 1; myDate = myYear + "/" + myMonth + "/" + myD.getDate(); myDay = myWeek[myD.getDay()]; document.write(myDate, " ", myDay); <略>
- ベストアンサー
- Mac
- javascriptで質問
javascript初心者です。 日付で自動的に変わるようなメニューが作りたいのですが もっとシンプルに簡潔にできますか？ また、開いているページのタブの色を他と変えたいのですができますか？ 以下ソース↓ <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=shift_jis"> <title>スクリプトテスト</title> <style type="text/css"> .menu li{ list-style-type:none; float:left; border:solid 1px #666666; } .menu li a{ padding:5px; background:#eeeeee; display:block; } .menu li a:hover{ background:#ffffff; } </style> <script type="text/javascript"> <!-- var day01 = new Date(); var year01 = day01.getFullYear(); //年 var mon01 = day01.getMonth() + 1; //月 var date01 = day01.getDate(); //日 var day02 = new Date(); day02.setDate( day02.getDate()+1 ); var year02 = day02.getFullYear(); //年 var mon02 = day02.getMonth() + 1; //月 var date02 = day02.getDate(); //日 var day03 = new Date(); day03.setDate( day03.getDate()+2 ); var year03 = day03.getFullYear(); //年 var mon03 = day03.getMonth() + 1; //月 var date03 = day03.getDate(); //日 var day04 = new Date(); day04.setDate( day04.getDate()+3 ); var year04 = day04.getFullYear(); //年 var mon04 = day04.getMonth() + 1; //月 var date04 = day04.getDate(); //日 var day05 = new Date(); day05.setDate( day05.getDate()+4 ); var year05 = day05.getFullYear(); //年 var mon05 = day05.getMonth() + 1; //月 var date05 = day05.getDate(); //日 var day06 = new Date(); day06.setDate( day06.getDate()+5 ); var year06 = day06.getFullYear(); //年 var mon06 = day06.getMonth() + 1; //月 var date06 = day06.getDate(); //日 var day07 = new Date(); day07.setDate( day07.getDate()+6 ); var year07 = day07.getFullYear(); //年 var mon07 = day07.getMonth() + 1; //月 var date07 = day07.getDate(); //日 // --> </script> </head> <body> <ul class="menu"> <script type="text/javascript"> <!-- document.write('<li><a href="'+year01+mon01+date01+'.html">'+mon01+'月'+date01+'日'+'</a></li>'); //--> </script> <script type="text/javascript"> <!-- document.write('<li><a href="'+year02+mon02+date02+'.html">'+mon02+'月'+date02+'日'+'</a></li>'); //--> </script> <script type="text/javascript"> <!-- document.write('<li><a href="'+year03+mon03+date03+'.html">'+mon03+'月'+date03+'日'+'</a></li>'); //--> </script> <script type="text/javascript"> <!-- document.write('<li><a href="'+year04+mon04+date04+'.html">'+mon04+'月'+date04+'日'+'</a></li>'); //--> </script> <script type="text/javascript"> <!-- document.write('<li><a href="'+year05+mon05+date05+'.html">'+mon05+'月'+date05+'日'+'</a></li>'); //--> </script> <script type="text/javascript"> <!-- document.write('<li><a href="'+year06+mon06+date06+'.html">'+mon06+'月'+date06+'日'+'</a></li>'); //--> </script> <script type="text/javascript"> <!-- document.write('<li><a href="'+year07+mon07+date07+'.html">'+mon07+'月'+date07+'日'+'</a></li>'); //--> </script> </ul> </body> </html>
- 締切済み
- JavaScript
- javascript 初心者です 変数について
javascript 初心者です 変数について html内のbodyに次のように記述しています。 <script type="text/javascript"> <!-- var hensu1=7; var hensu2=2; var hensu3=5; var hensu4=4; for(i=1;i<=4;i++){ document.write("<div>"); for(j=1;j<="hensu"+i;j++){ document.write("<img src='sample.png'/>"); } document.write("</div>"); } --> </script> for(i=1;i<=4;i++)でdivを4つ並べ、 その中にそれぞれsample.pngをhensu分だけ並べ対のですが、 for(j=1;j<="hensu"+i;j++)の部分で "hensu"+i の記述の仕方が分からず、 上記の書き方だと表示されません。 正しい書き方を教えていただけないでしょうか？
- ベストアンサー
- JavaScript
- Smarty変数の値をJavascript変数代入
よろしくお願いします。 SmartyのテンプレートにPHPファイルからassignされた変数を、 Javascriptの変数に割り当てたいと思います。 Smartyのテンプレート内では、デフォルトの設定だと、 ｛$hoge｝ として、値をHTMLとして書き出す仕様ですが、 色々な諸事情から、このデフォルト設定を、 ｛｛$hoge｝｝ として、｛ を二度重ねないと機能しないように設定変更しています。 そこで、下記のようなJavascriptを実行しても上手くいかず、かなりはまってしまってます。 お助けください。 ※ダメな例 <script type="text/javascript"> var balloonA = {{$hoge}}; document.writeln (balloonA); </script> ※↓これだと当然出力されます。 ※aaaaa と表示される。 <script type="text/javascript"> var balloonA = "aaaaa"; document.writeln (balloonA); </script> なぜ、上の書き方だと変数内の値を取得できないのでしょうか？ "{{$hoge}}"や'{{$hoge}}' として試しました。でもだめです。 色々ネットで探しましたが、 {literal} を使って・・・・というのもやりましたが、ダメでした。 そもそも、Smartyのデフォルト設定を {{ に変更しているので関係ないと思います。 ん～～何卒お力をおかしください。
- 締切済み
- PHP
- カウント結果をカレンダー表示するプログラムを教えてください
カウント結果をカレンダー表示するプログラムを教えてください サイトのアクセス数をカウントして、カレンダーデザインで表示したファイル出力できるperlプログラムを教えてください。 カウント済みファイル１（格納形式：カウント数 日付）があります。 10 2010-10-01 11 2010-10-02 8 2010-10-03 4 2010-10-08 6 2010-10-09 … 3 2010-11-01 … これを 下記のような形式で表示したいです。 2010-10 Sun, Mon, Tue, Wed, Thu, Fri, Sat , , , , , 10, 11 8, 0, 0, 0, 0, 4, 6 … 2010-11 Sun, Mon, Tue, Wed, Thu, Fri, Sat , 3 ,… どのようにすると上記のようなカレンダー上に カウント数を表示できるのか 教えてください。よろしくお願いいたします。
- ベストアンサー
- Perl
- JavaScriptのinnerHTMLの挙動について
下で"JavaScript内からJavaScriptを書き出したいのですが"で質問したものですが，ソースコードを簡単にして再質問したいと思います． ソースは以下のようにし，divタグのところにinnerHTMLで文字"test"とJavaScriptでアラートを表示させるものです．表示してみたところ，"test"は表示されるのですが，アラートは出てきません． これはinnerHTMLではHTMLのタグは評価されるが，JavaScriptは評価されない，ということなんでしょうか．JavaScriptのこのような仕様は調べにくいので困っています．回答宜しくお願いします． <html><head><title></title> <SCRIPT type="text/javascript"> <!-- var str='<font color="blue">test</font><script type="text/javascript">alert(123);</script>'; function gogo(){ document.all("here").innerHTML = str; } //--> </SCRIPT> </head><body> <div id="here" style="position:absolute;width:600px;left:0px;top:0px;"></div> <SCRIPT type="text/javascript"> <!-- gogo(); //--> </SCRIPT></body></html>
- ベストアンサー
- JavaScript
- このjavascriptは何をしているのでしょうか
<script type="text/javascript"> var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); </script> <script type="text/javascript"> try { var pageTracker = _gat._getTracker("UA-7994748-1"); pageTracker._trackPageview(); } catch(err) {} </script> 今の知識ではこのスクリプトがどんな処理をしているのか読めません。 （出典はcanvasとprocessing.jsのデモページのソースです） ご回答よろしくお願いします。
- ベストアンサー
- JavaScript
お礼
有難うございます。 ここまで手の込んだものをわざわざ作っていただき本当に感謝です。 自分ではとても届かない領域です。 本当に助かりました。 心より御礼申し上げます。