html5.jpを使ったレーダーチャートの作成方法とデータ取得
- 学校の課題でhtml5.jpを使ってレーダーチャートを作成したいです。ソースコードの一部を変数化し、gaeから値を取得する方法を知りたいです。
- html5.jpを使用してレーダーチャートを作成する際に、サンプルコードの一部を変更し、gaeから値を取得することが目標です。具体的な手順やデータの取得方法について教えてください。
- html5.jpを利用してレーダーチャートを作成する方法について教えてください。データはgaeから取得し、取得したデータをレーダーチャートに表示させたいです。
- ベストアンサー
教えてください！html5.jpを使ったレーダーチ
学校の課題でhtml5.jpを使ってレーダーチャートを作成したいです。 gaeに登録されている値をレーダーチャートに表示させることが目標です。 window.onload = function() { var rc = new html5jp.graph.radar("sample"); if( ! rc ) { return; } var items = [ ["商品A", 5, 2, 4, 5, 3], ["商品B", 3, 4, 3, 4, 5] ]; var params = { aCap: [ "A","B", "C", "D", "E"] } rc.draw(items, params); }; これはサンプルなのですが、ここの部分を変数に変えて、更にgaeから値を取ってこれる様にしたいです。 データの取得方法は、あるurlにアクセスするとjson形式で値がかえってくるようになっています。そのurlにアクセスする時のパラメータや、返ってくるjson形式の情報の内容はまだ分かっていないのですが、おおまかでもいいので上の変数からどう返ればいいのか教えていただければと思います。 締め切りが迫っているのですが何も分からず焦っています(><)お助けください～！
- JavaScript
- 回答数1
- ありがとう数1
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
御提示のサンプルで、レーダーチャートは表示されるはずと思います。 基本的にはデータを入替えてあげればよいだけなので、取得したjson形式のデータのうちの使いたいデータを、御提示のサンプルのitems、paramsにセットするようになさればよろしいのではないでしょうか。 ＞返ってくるjson形式の情報の内容はまだ分かっていないのですが、 とのことですので、これより具体的にはわかりかねます。
関連するQ&A
- html5.jpレーダーチャートの応用
学校の課題でhtml5.jpを使ってレーダーチャートを作成したいです。 gaeに登録されている値をレーダーチャートに表示させることが目標です。 window.onload = function() { var rc = new html5jp.graph.radar("sample"); if( ! rc ) { return; } var items = [ ["商品A", 5, 2, 4, 5, 3], ["商品B", 3, 4, 3, 4, 5] ]; var params = { aCap: [ "A","B", "C", "D", "E"] } rc.draw(items, params); }; これはサンプルなのですが、ここの部分を変数に変えて、更にgaeから値を取ってこれる様にしたいです。 データの取得方法は、あるurlにアクセスするとjson形式で値がかえってくるようになっています。そのurlにアクセスする時のパラメータや、返ってくるjson形式の情報の内容はまだ分かっていないのですが、おおまかでもいいので上の変数からどう返ればいいのか教えていただければと思います。 締め切りが迫っているのですが何も分からず焦っています(><)お助けください～！
- ベストアンサー
- HTML
- ひとつのHTMLファイル内にcanvasでグラフを2つ表示したいのです
ひとつのHTMLファイル内にcanvasでグラフを2つ表示したいのですが 表示できなくて困っています。 以下のサイトを参考に、それぞれ1つのファイルに1つのグラフを表示はできました。 http://www.html5.jp/library/index.html また、グラフを上下入れ替えると後に書いたほうが有効になるようです。 どうしたら表示できるようになるか、わかる方アドバイスをお願いします。 以下headタグ以降をそのまま引用です。 <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja"/> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>グラフ</title> <link href="sample_graph.css" type="text/css" rel="stylesheet" /> <script type="text/javascript" src="rendering-mode.js"></script> <!--[if IE]><script type="text/javascript" src="./html5jp/excanvas/excanvas.js"></script><![endif]--> <script type="text/javascript" src="./html5jp/graph/circle.js"></script> <script type="text/javascript" src="./html5jp/graph/radar.js"></script> <script type="text/javascript"> window.onload = function() { var rc = new html5jp.graph.radar("sample_radar"); if( ! rc ) { return; } var items_radar = [ ["商品A", 3, 3, 2, 3, 1] ]; var params_radar = { aCap: ["A", "B","C", "D", "E"], aMax: 3, aMin: 0, legend: false } ; rc.draw(items_radar, params_radar); }; </script> <script type="text/javascript"> window.onload = function(){ var cg = new html5jp.graph.circle("sample_circle"); if( ! cg ) { return; } var items1 = [ ["A", 9, ], ["B", 3, ], ["C", 0,] ]; cg.draw(items1); }; </script> </head> <body> <div><canvas width="300" height="200" id="sample_radar"></canvas></div> <div><canvas width="300" height="200" id="sample_circle"></canvas></div> </body> </html>
- 締切済み
- JavaScript
- html5 レーダーチャート
html5を利用し、レーダーチャートを描く勉強をしています。 以下のサイトを参考にしています。 http://www.html5.jp/library/graph_radar.html paramsの中の文字（安さ、性能、デザイン・・・）をURLを挿入して表示させたいと思っています。 （例えばレーダーチャートを描写し、安さをクリックすると安さのページへリンクする。） URLを挿入する方法はありますでしょうか？ 方法が分かる方がいらっしゃいましたら、教えて頂けますでしょうか？
- ベストアンサー
- JavaScript
- JavaScriptでレーダーチャート表示
JavaScriptでレーダーチャートを表示したくて html5jp様のライブラリを使用しているのですが 「"angle_num"が宣言されていません」とエラーが表示されてしまい 表示できません。 ちなみにクエリ文字列からデータを取得しています。 どなたか解決お願いします。 ソースは以下のようになってます。 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <title>title</title> <style type="text/css"> canvas {border:0px solid #4c4c4c;} </style> <!--[if IE]><script type="text/javascript" src="graph_radar_1_0_0/html5jp/excanvas/excanvas.js"></script><![endif]--> <script type="text/javascript" src="graph_radar_1_0_0/html5jp/graph/radar.js"></script> <script type="text/javascript"> function $q(){ var result = {}; var str = location.search.substring(1); var paramss = str.split('&'); for(var i = 0;i < paramss.length; i++){ var kv = paramss[i].split('='); result[kv[0]] = decodeURIComponent(kv[1]); } return result; } var q = $q(); for(var j = 1; j < 21; j++){ /* document.write(q['a'+j] + " "); */ q['a'+j]-=0; /* document.write(typeof q['a'+j]); */ } window.onload = function() { var rc = new html5jp.graph.radar("sample"); if( ! rc ) { return; } var items = [ [ q.a0, q.a1, q.a2, q.a3, q.a4, q.a5, q.a6, q.a7, q.a8, q.a9, q.a10], ["ave.", q.a11, q.a12, q.a13, q.a14, q.a15, q.a16, q.a17, q.a18, q.a19, q.a20] ]; var params = { aCap: ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j"], aMax: 5, aMin: 0 }; rc.draw(items, params); }; </script> </head> <body scroll="no"> <div><canvas width="300" height="200" id="sample"></canvas></div> </body> </html>
- 締切済み
- JavaScript
- javascriptに外部のJSONPを読み込む
外部のサーバーにあるJSON形式のファイルをjavascriptで読み込み値を取得したいのですが、どうすればいでしょうか？ JSONはWebAPIで呼び出します。 http://hoge.com/hoge/というURLのJSONファイルをコールバックして、それをjavascriptで読み込みJSONPデータの値を変数として使いうという感じです。 以下のサイトを参考にしたのですが、うまくできません。 http://techblog.yahoo.co.jp/javascript/jsonpjavascript/ 最近javascriptを勉強し始めた素人なので、用語の使い方が間違っているかもしれませんが、具体的なサンプルを書いていただけると幸いです。
- 締切済み
- JavaScript
- html5 レーダーチャート
現在、以下のURLのレーダーチャートについて勉強中です。 http://www.html5.jp/library/graph_radar.html そこで1件解決できるかどうかの助言を頂きたい箇所があるのですが、 やりたいことは、全ての軸に対して、目盛（sLabel） を付加させたいと思っています。 サンプルでは、縦軸のみに目盛を付加させています。 助言を頂けますと幸いです。
- ベストアンサー
- JavaScript
- JSONデータをフォームにセットしたい
JSONデータを「jQuery.val」でフォームにセットしたいのですが、うまくいきません。どうしたら良いでしょうか？ 具体的には、[",]が削除された状態でセットされます。元は配列ですが、JSONデータへ変換したので、フォームへセット出来ると思っていたのですが…。 JSONは、「ある形式に沿った文字列」という認識でいたのですが、違うのでしょうか？ ■コード $jsondata= json_encode($originalarray) <script type="text/javascript"> var result = <?php echo($jsondata) ?>; $("input#jsondata").val(result); </script> ■変数 ・$originalarray Array ( [0] => ./im/1a.j [1] => ./im/2.j [2] => ./im/9_1.j ) ・jsondata [".\/im\/1a.j",".\/im\/2.j",".\/im\/9_1.jp"] ・フォームにセットされる値 ./im/1a.j./im/2.j./im/9_1.jp →ここに「jsondata」をセットさせたい
- ベストアンサー
- JavaScript
- JSONのデータから商品名の取得の仕方
今現在下記の記述でJSONを取得しています。 ＝＝＝＝＝ <html> <head> <title>JSONのデータを使ってみる</title> </head> <script type="text/javascript" src="./prototype.js"></script> <script type="text/javascript"> function execute() { var url = './ItemSearch_json.php'; var paramList = "keyword=" + encodeURIComponent("ふくろう"); var a = new Ajax.Request( url, { method: 'get', parameters: paramList, onSuccess: function(request) { // alert('読み込み成功しました'); // jsonの値を処理する場合↓↓ var json; eval("json="+request.responseText); }, onComplete: function(request) { alert('読み込みが完了しました'); $('container').innerHTML = request.responseText; // jsonの値を処理する場合↓↓ var json; eval("json="+request.responseText); }, onFailure: function(request) { alert('読み込みに失敗しました'); }, onException: function (request) { alert('読み込み中にエラーが発生しました'); } } ); } </script> <body> <div id="container">content</div> <button onclick="execute()">サンプル実行</button> </body> </html> ＝＝＝＝＝ このままだと、プレーンテキストは表示されるのですが、商品名や価格の一覧などを選択して表示できません。 evalなどを使うのかなと思うのですが、はっきり分かりません。 ヒントを教えていただけないでしょうか。
- ベストアンサー
- AJAX
- actionscriptの記入の仕方で、わからないところがあります。
actionscriptの記入の仕方で、わからないところがあります。 どなたかご教授いただきたけないでしょうか？ 変数 n が数秒おきに1つずつ増えます。 4までいったら1にかわります。 1 2 3 4 1 2 3 4 ・・・ という感じです。 そこで配置されたbtnをpressすると nの値によってリンク先をを変更したく。 n = 1のときは url1を n = 2のときは url2を という感じです。 一つ一つ書いていけばいいのですが、 nの値はそのときによってかわるので、 下記のように一つにまとめたいです。 ●●●●● var url1 = http://aaaaaaa.com/ var url2 = http://bbbb.info/ var url3 = http://ccc.co.jp/ var url4 = http://ddddd.jp/ btn.onPress = function() { for (i=1; i<=4; i++) { if (n == i) { getURL(●●●●●); } } }; よろしくお願いします。
- ベストアンサー
- Flash
- 動的ＣＳＶファイルから値なしを削除したい
jqueryについて質問です。とある動的csvファイルからある特定の列を取り出し、grepを使って値のないものを取り除きたいと思っています。しかしunderfindとなってしまいます。どこを修正すればいいのでしょうか？ ちなみにgrepのところを削除すると、「90 247 312 149 360 NaN 110 yMin=90, yMax=360 」という値が返ってきます。 希望は「90 247 312 149 360 110 yMin=90, yMax=360 」という値が返ってきて、最終的には最終行から３つの値、「149 360 110」を取り出したいと考えております。 このcsvファイルは動的で、行数は変化します。 function loadcsv2(url) { if (window.ActiveXObject) { var httpObj = new ActiveXObject("Microsoft.XMLHTTP"); if (httpObj) { httpObj.open("GET","sample2.csv", false); httpObj.send(); } } else if (window.XMLHttpRequest) { httpObj = new XMLHttpRequest(); httpObj.open("GET", "sample2.csv", false); httpObj.send(null); } var rows = httpObj.responseText.split("\r\n"); var dates = new Array(); var items = new Array(); items[0] = new Array(); var result = ""; var n; for (n = 1; n < rows.length; n++) { var fields = rows[n].split(","); if (fields.length < 3) break;//３列目まで dates[n] = fields[0]; items[0][n] = n==0 ? fields[1] : parseInt(fields[1]); var datax = items[0][n] datax = $.grep(datax,function(e){ return e;}); result += datax + "\n" ; } } ===【sample.csv】=== day,sizeA,sizeB 11-19,90,254 11-20,247,261 11-21,312,258 11-24,149,250 11-25,360,215 11-26,,450 11-27,110,196
- ベストアンサー
- JavaScript
お礼
助かりました。ありがとうございます！