jqplotによる変動グラフについて

質問

jqplotによる変動グラフを作成したいと思い、試行錯誤をしているのですが、うまくいかないので、教えていただけましたらとても嬉しく思います。
よろしくお願いします。

セレクトボックスの値を変更するたびに、その値に基づいたグラフを作成したいです。

セレクトボックスの値をJqueryからCGIに渡し、その値に基づき、WEB上のDBから値を持ってきて、グラフプロット用のデータに加工して、Jqueryに戻し、その値をグラフのプロットデータとして、組み込みます。
CGIからの結果をそのまま変数としてグラフのプロットデータ部分に入れてもグラフが表示されません。
CGIから戻ってくるプロットデータをコピーして生のデータとして、そのままグラフのプロットデータ部分に入れるとグラフが表示されます。

そのため、グラフのプロットデータとしてはコードは合っていると思うのですが、JSファイル上ではCGIからの変数ではなく、生データから直接入力しないとグラフデータとして反映されないのでしょうか。
CGIからの変数データをそのままプロットデータとして組み込むことができたらたいへん助かるのですが、ご存じの方がいらっしゃいましたら教えて下さい。

ご不明な点はお聞きください。

よろしくお願いします。

回答No.13

superside0 · ベストアンサー

JSONデータは
・シングルクォートは使えません
・objectオブジェクトのプロパティも文字列として設定します（ダブルクォートで囲む）。
・文字コードは「UTF-8」
というルールです。

こちらの実験として、
CGIでの、Content-Type: application/json; charset=utf-8　を出力しないように　して

JavaScriptのsuccess: function()内を
alert("path=1:"+result);
var gdata = $.parseJSON(result);
alert("path=2:" + gdata);
var plot = $.jqplot('Graph', gdata, options).replot();
alert("path=3");

としてから

１）CGI側の出力をキーをダブルクォートのままだと
alertのボックスにはそれぞれ
path=1:[[["a",1],["b",4],["c",7],["d",11]],[["a",45],["b",33],["c",14],["d",37]],[["a",45],["b",24],["c",17],["d",45]]]
path=2:a,1,b,4,c,7,d,11,a,45,b,33,c,14,d,37,a,45,b,24,c,17,d,45
path=3
とどれも表示されて、
"path=2:～"のアラートの後にグラフ描画（縦積の棒グラフで実験）もできました。

２）CGI側の出力をシングルクォートに修正してみると
alertボックスでは、
path=1:[[['a',1],['b',4],['c',7],['d',11]],[['a',45],['b',33],['c',14],['d',37]],[['a',45],['b',24],['c',17],['d',45]]]
のみで、次の$.parseJSON(result)で止まりました。

このとき、ブラウザのデバッグツール（私は FireFoxのブラウザコンソールのJSで確認）では
SyntaxError: JSON.parse: unexpected character at line 1 column 4 of the JSON data
とエラー表示されていました（４文字目が違反文字）

なので、

>キーの部分を、’　’　で囲んで、全体を”　”で囲んで、Perlから送ると、グラフ描画のところで止まって、グラフは表示しないのですが、

>キーの部分を、”　”で囲って、全体を’　’で囲んで、Perlから送ると、$.parseJSON(result);　のところで止まって、その先に進みません。

という現象は、反対ではないですか？（キーを' 'で囲むと$parseJSON()で止まるということでは？）

お礼

superside0さん

できました！！！！！（泣）（泣）（泣）

ご丁寧にAlertの値を出してくださってありがとうございます！！！

それと同じように、Alertを出すようにして、値をチェックして修正したら、、、

出てきました～！！！！！（泣）

わー！！
もうほんとに数週間悩んでいたのですが、今日は素敵な夢を見ることができそうです！！！！

ここまでお付き合いくださって、本当に本当にありがとうございました。

うまくできなかった原因は、CGIから送るときに、配列全体を　’　’　または、”　”　で囲って送ってテストをしていました。。。
print ' "[ [['a',1],['b',4],['c',7],['d',11]],[['a',45],['b',33],['c',14],['d',37]],[['a',45],['b',24],['c',17],['d',45]]]" ';

先ほど書いた件も、間違い（反対）ではなく、その現象が出ていたのですが、このせいでおかしくなっていたみたいです。(それと、今まで、キーを ' ' で囲っていました。。　”　”　に変えたりしてテストをしていたのですが、上記のせいで、先述の現象が出て、うまくできていませんでした。)

print ' [ [['a',1],['b',4],['c',7],['d',11]],[['a',45],['b',33],['c',14],['d',37]],[['a',45],['b',24],['c',17],['d',45]]] ';

これにして、個々の配列データのキーの値を、”　”　で囲ったら、、、出てきました！！

print ' [ [["a",1],["b",4],["c",7],["d",11]],[["a",45],["b",33],["c",14],["d",37]],[["a",45],["b",24],["c",17],["d",45]]] ';

↑これで出てきました！！

JSONデータの仕様もわかりました！

本当に本当に本当にありがとうございました。

これで、もう少し使いやすいように修正して、提出できます！！！

ほんとにsuperside0さんに見放されたら、一人ではできませんでした！

ありがとうございました。
また困ったことがありましたら教えて下さい♪

回答No.2

superside0

if (result != ''){
　gdata=result;
}
と
gdata=CGIから帰ってきた値;

の２つが、同じ形式になっているかは確認されているでしょうか？
（JavaScriptデバッガ等）

たとえば、$.ajax内は
　gdata=result;
でなく
　gdata=[result];
としないと　型が一致しないということは　ないでしょうか？

お礼

superside0さん

コメントありがとうございます。

はい、確認しています。
CGIから帰ってきた値を書き出し、それをそのまま、
var plot = $.jqplot('Graph',[ gdata], {
↑これのgdata部分に生データとして入れたらグラフが表示されます。

ほんとに、CGIからの変数か、生データかの違いだけだと思うんですが、なぜかCGIからの変数をそのまま入れると表示されません。。

なんででしょう。。(泣)

var plot = $.jqplot('Graph',[ gdata], {
↑このgdataの左右の[]もとったり外したりして色んなパターンを試してみましたがうまくいかないんです。
CGIからのデータもいろんな形式で送って試してみましたが、考えられることはダメでした。
複数系列なので、まとめて送ったり、一系列ずつ分けて送って、gdataのところに複数系列分の変数を入れても表示されませんでした。。

でも変数でグラフのプロットデータは入れたいんです。
セレクトボックスを変更するたびにグラフを切り替えたいので、もし他のやり方でもできるなら構わないです。

よろしくお願いします。

superside0さんは、変動グラフで変数をプロットデータとして入れて表示できるようなプログラムを作成されていらっしゃいますでしょうか。
もしそうでしたら参考までにどのようなコードか教えていただけましたら嬉しいです。

回答No.1

superside0

>CGIからの結果をそのまま変数としてグラフのプロットデータ部分に入れてもグラフが表示されません。

ここを実際にどうやって実装しているかが問題でしょう。
CGIからのデータをグラフが実際に使っているデータに上書きできていないという
疑いはないでしょうか？

たとえば、グラフが使っているローカル変数と同じ名前でグローバル変数を宣言して
これに上書きしただけなので、スコープの関係で、グラフの実データは変更されていないとか、
グラフのデータを変更するメソッドを正しく使えていないとか。

お礼

superside0さん

コメントありがとうございます。

実際にはこのような感じです。
グローバル変数は使用していないです。

$.ajax({
type: 'POST',
cache: false,
url: CGI.cgi',
data: 'graphdata=' +セレクトボックスの値,
success: function(result){
if (result != ''){
gdata=result;
}

var plot = $.jqplot('Graph',[ gdata], {
series: [ ....... 続く

このような感じです。
gdataを書出して、そのまま生のデータをgdataの部分に入れ込めばグラフが表示され、直前にgdata=　で、CGIから帰ってきた生データをコード上で予め変数設定をしておいて、gdataとして入れると表示されます。

gdata=CGIから帰ってきた値;
var plot = $.jqplot('Graph',[ gdata], {
series: [ ....... 続く

↑これは表示される。

gdata部分は、複数系列なので、[[a,1],[b,4],[c,7],[d,11]],[[a,45],[b,33],[c,14],[d,37]],[[a,45],[b,24],[c,17],[d,45]],,,,,,,

このようなものを設定しています。

よろしくお願いします。