Ajaxによるデータ取得

Ajaxによるデータ取得

Javascriptファイルの中にデータを記述するのではなく
株価やFXのレートのようにリアルタイムで変化するデータを表示したり
他のサービスのデータを取得して表示したい場合
Ajaxを使ってサーバーからデータを取得し
グラフを描画することができる

Ajaxを利用したデータの読みこみをするなら
jqplot.json2プラグインを読み込む

<script src="js/jqplot/plugins/jqplot.json2.min.js"></script>

Ajaxでデータを読み込む関数を定義し
dataReadererオプションに設定する

var dataAjaxReaderer = function(url,plot,options){
var ret = null;

$.ajax({
async:false,
url:url,
dataType:”json”,
success:function(data){
ret = data;
},
error:function(XMLHttpRequest,textStatus,errorThrown){
alert(“読みこみ失敗:”+errorThrown);
}
});
return ret;
};

var opts = {
title:”グラフタイトル”,
dataReaderer:ajaxDataReaderer,
axes:{
xaxis:{

}
}
}
[/javascript]

このとき、グラフを描くには
データ配列ではなく、データのURLを指定する

今回は、ローカルのファイルなので
ファイルバスを指定する

plot = $.jqplot('chart','./data.json',opts);

chartは
div id=”chart”
で、表示する領域

./data.jsonはファイルパス

opts は設定したオプション

次に、data.jsonの中身

今回は、JSON形式のデータ

[
[[1,1],[2,2],[3,5],[4,2],[5,4]],
[[1,6],[2,4],[3,3],[4,4],[5,5]]
]

数字ならこれでいいけど、文字列なら
“”で囲む

[
["etc",2.1],
["Android 4.4",9.6],
["Android 4.3",35.9],
["Android 4.2",50.4],
["Android 4.0",2.5]
]

とする