月別: 2014年3月

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]
]

とする

グラフのカスタマイズ

グラフの色を変更するには
seriesColorsオプションを使う

opts= [

seriesColors :[
 "#FF0000",
 "#00FF00",
],

]

複数グラフを作成するならかなり使える

次に、日付
グラフの軸に日付を付けることができる
株価チャートとか、経済指標とかのグラフを作るなら有効な手法

軸に日付を使うなら
jqplot.dateAxisReadererプラグインを使う
これを使うには、まずHTMLで

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

で必要なライブラリーを読み込む

次に、Javascriptで日付データを配列で作成し
オプションのX軸を描画するxaxisで
設定する

日付のデータは
月/日/年
のフォーマットで記述する

data = [
["2014/03/20",17.5],
["2014/03/21",16.5],
....
],
opts={
axes:{
xaxis:{
renderer:$.jqplot.DateAxisReaderer,
tickReaderer:$.jqplot.CanvasTickReaderer,tickOptions:{
formatString:"'%Y/%#m/%#d'",
angle:-30
}
},

}
}

となる

日付を利用したいのなら
renderer:
へ
$.jqplot.DateAxisReaderer
を指定し

formatString:
でフォーマットを指定する

指定できるフォーマットは
%Y
2014 みたいな4桁の西暦

%y
14 みたいな2桁の西暦

%m
03 みたいな2桁の月

%#m
月

%B
September みたいな英語での月の名前

%b
Sep みたいな英語のニュースででる省略された月の名前

%d
03 みたいな2桁の日付

%#d
日付

%A
曜日

%a
省略型の曜日
日曜日ならSun

%H
03 など24時間表記の時間

%#H
3などの24時間表記の時間

%I
03などの12時間表記の時間

%#I
3などの12時間表記の時間

%M
2桁表記で分を表示

%#M
分を表示

%S
2桁で秒を表示

%#S
秒を表示

基本的に#を付けないなら2桁表記になる

マップ操作のイベント処理

まずは構文

void setOnMapClickListener(GoogleMap.OnMapClickLister listener)
マップ上のクリックを検知するリスナーを設定

void setOnMapLongClickListener(GoogleMap.OnMapLongClickListener listener)
マップ上の長押しを見地するリスナーを設定

void setOnCameraChangeListener(GoogleMap.OnCameraChangeListener listener)
マップ上でのカメラの返歌を検知するリスナーを設定

oid setOnInfoWindowClickListener(GoogleMap.OnInfoWindowClickListenr lister)
ピン上の情報がクリックされたことを検知するリスナーを設定
これは他のAPIとの組み合わせに使えそう

void onMapClick(LatLng point)
マップ上でクリックされたときに呼び出される

void onMapLongClick(LatLng point)
マップ上で長押しされたときに呼び出される

void onCameraChange(CameraPosition position)
マップ上でカメラが変更されたとき呼び出される

onInfoWindowClick(Marker marker)
ピン上の情報がクリックされたときのイベント処理

次に引数のメモ
listener
各イベントを検知するためのリスナー

point
マップ上で操作を行った位置情報

marker
クリックされたMarker インスタンス

マップ上のイベントは各リスナーを登録することで検知可能になる

では実践

クリック時
長押し時
マップを移動したとき
それぞれの状態のときに
Toast で座標を表示する

変更するのは MainActivity のみ

まずはクリックから

		//click event処理
		map.setOnMapClickListener(new GoogleMap.OnMapClickListener() {
			
			@Override
			public void onMapClick(LatLng point) {
				// TODO Auto-generated method stub
				
			}
		});

の中に処理を書いていく

Ubuntu の場合 Eclipse で Alt + / で
コードの補完が使えるため
すべて打ち込まなくても簡単に記述できる

中の処理は

Toast.makeText(getApplicationContext(), "クリックされた座標は "+point.latitude+", "+point.longitude, Toast.LENGTH_SHORT).show();

としてトーストで座標を表示する

		//click event処理
		map.setOnMapClickListener(new GoogleMap.OnMapClickListener() {
			
			@Override
			public void onMapClick(LatLng point) {
				// TODO Auto-generated method stub
				Toast.makeText(getApplicationContext(), "クリックされた座標は "+point.latitude+", "+point.longitude, Toast.LENGTH_SHORT).show();
			}
		});

次に長押しイベント
これもコード補完をつかって

		//長押しイベント
		map.setOnMapLongClickListener(new GoogleMap.OnMapLongClickListener() {
			
			@Override
			public void onMapLongClick(LatLng point) {
				// TODO Auto-generated method stub
				//長押しで行う処理
			}
		});

として処理内容を追加するだけ

今回もトーストで表示なので

Toast.makeText(getApplicationContext(), "長押しされた座標は "+point.latitude+", "+point.longitude, Toast.LENGTH_SHORT).show();

全体としては

		//長押しイベント
		map.setOnMapLongClickListener(new GoogleMap.OnMapLongClickListener() {
			
			@Override
			public void onMapLongClick(LatLng point) {
				// TODO Auto-generated method stub
				Toast.makeText(getApplicationContext(), "長押しされた座標は "+point.latitude+", "+point.longitude, Toast.LENGTH_SHORT).show();
			}
		});

そしてカメラの状態変化イベント処理
つまりマップを移動の処理

		//カメラ状態変化処理
		map.setOnCameraChangeListener(new GoogleMap.OnCameraChangeListener() {
			
			@Override
			public void onCameraChange(CameraPosition position) {
				// TODO Auto-generated method stub
				//カメラの状態変化のときの処理
			}
		});

これも座標をtoast で表示

LatLng point = position.target;
				Toast.makeText(getApplicationContext(), "カメラの状態が変化した座標は"+point.latitude+", "+point.longitude, Toast.LENGTH_SHORT).show();

一度座標を変数に格納してから使っている

全体としては

		//カメラ状態変化処理
		map.setOnCameraChangeListener(new GoogleMap.OnCameraChangeListener() {
			
			@Override
			public void onCameraChange(CameraPosition position) {
				// TODO Auto-generated method stub
				LatLng point = position.target;
				Toast.makeText(getApplicationContext(), "カメラの状態が変化した座標は"+point.latitude+", "+point.longitude, Toast.LENGTH_SHORT).show();
			}
		});

このように
それぞれの動作の中に処理を書けばいろいろな動作をマップでさせることができる

google map にピンマーカー表示

やり方は
GoogleMap インスタンスを取得
マーカーの表示位置などを格納したMarkerOptions インスタンスを生成

addMarker() でマーカー追加

続いて構文メモ

GoogleMap getMap()
GoogleMap インスタンスを取得

LatLng(double latitude,double longitude)
マーカーの表示位置用インスタンス

MarkerOptions position(LatLng position)
マーカーの表示位置を設定

MarkerOptions title(String title)
マーカーのタイトルを設定

MarkerOptions snippet(String snippet)
マーカーのスニペット設定

MarkerOptions icon(BitmapDescriptar icon)
マーカー上に表示するアイコンを設定

Marker addMarker(MarkerOptions options)
マーカーを追加

そして引数のメモ

latitude
緯度

longitude
経度

position
マーカーの表J位置を示すLatLngインスタンス

title
マーカーのタイトル用文字列

options
マーカー表示用オプション

あと
画面上にピン状マーカーを表示したいのなら
getMap() で
GoogleMap メソッドを取得し
addMarker() でピンの追加をする

マーカーのパラメータは
MarkerOptionsインスタンスを生成して設定する

では実験
サンプルを元にカスタマイズしていく

レイアウトファイルはそのまま使う
使うのは zoom.xml

MainActivity を書き換えるけど
前回作成した東京駅を表示するマップを改造する

		setContentView(R.layout.zoom);

		FragmentManager fragmentManager = getSupportFragmentManager();
		SupportMapFragment fragment =(SupportMapFragment)fragmentManager.findFragmentById(R.id.fragmentMap);
		
		//google map instance 取得
		GoogleMap map = fragment.getMap();
		
		//表示位置の生成（東京駅）
		LatLng posTokyoStation = new LatLng(35.681382, 139.766084);
		
		//東京駅の表示
		CameraPosition.Builder builder=new CameraPosition.Builder();
		//カメラの表示位置の指定
		builder.target(posTokyoStation);
		//ズームレベル
		builder.zoom(13.0f);
		//カメラの向きの指定(北向きなので０）
		builder.bearing(0);
		//カメラの傾き設定
		builder.tilt(25.0f);
		//マップの表示位置変更
		map.moveCamera(CameraUpdateFactory.newCameraPosition(builder.build()));

はそのまま使い

ピンの追加コードを書いていく

		//ピン設定
		MarkerOptions options=new MarkerOptions();
		//ピンの場所を東京駅にする
		options.position(posTokyoStation);
		//マーカーの吹き出しの名前
		options.title("東京駅");
		
		//ピンの追加
		map.addMarker(options);

基本的にはこれでOK

これでピンをタップすると
東京駅
と表示される

これを応用すればAPIとかと合わせてお店とかできそう

様々なグラフの作成　その2

次に、バブルチャート

これは、2次元グラフに各ポイントの数値の大きさを円の大きさで表すグラフ

シェアの割合とか、規模の大きさをわかりやすくするときに使うグラフ

これを使うには
まずHTMLファイルで

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

でライブラリーの読みこみ

表示するjQueryMobileのページIDはbubble

<div data-role="page" id="bubble">
</div>

そして、divで表示領域の設定

<div id="bubblechart"></div>

後は、Javascriptで表示

$(document).on("pageshow","#bubble",function(e){

//バブルチャートのデータの用意
//横軸、縦軸、円の大きさ、ラベル
var bubbledata = [
[4224273,835338, 22954,"Mac"],
[3004640,520414,21858,"Windows"],
[3434543,440676,18418,"Linux"]
];

var opts={
title:'自分的OS普及状態'
seriesDefaults:{
renderer:$.jqplot.BubbleReaderer,
rendererOptions:{
//バブルの透明度
bubbleAlpha:0.6,
//バブルを選択した時の透明度
highlightAlpha:0.8
},
shadow:true,
//バブルの影の透明度
shadowAlpha:0.05
},

//ラベル関連設定
axes:{
xaxis:{
label:'販売されたマシンの数'
},
labelReaderer:$.jqplot.CanvasAxisLabelReaderer,
tickReaderer:$.jqplot.CanvasTickReaderer,
tickOptions:{angle:-60}
},
yaxis:{
label:'搭載OS',
labelReaderer:$.jqplot.CanvasAxisLabelReaderer,
tickReaderer:$.jqplot.CanvasAxisTickReaderer
}
},
};

//バブルチャートの表示
$.jqplot.config.enablePlugins = true;
bubbleplot = $.jqplot('bubblechart',[bubbledata],opts);

});

バブルチャートを使うなら
レンダラは
$.jqplot.BubbleReaderer
を使う

そして、データは
[横軸、縦軸、円の大きさ、ラベル]
の順番で記述

rendererOptions:{

}
では、見た目の設定をしている

bubbleAlpha
バブルの透明度

highlightAlpha
バブルを選択した時の透明度

shadowAlpha
バブルの影の透明度

となる

様々なグラフの作成

水平棒グラフの作成の場合、

まずはデータ定義で

var bardata =[

[[30,1],[10,2],[40,3],[20,4]], //売上データ
[[5,1],[1,2],[7,3],[4,4]] //利益データ
];

このように、[値、カテゴリID]
というように指定する

カテゴリIDを設定したら
axesの中の yaxisでカテゴリ軸を利用する

axes:{

yaxis:{
renderer:$.jqplot.CategoryAxisReaderer,
ticks:['iPhoneアプリ開発','Androidアプリ開発','アフィリエイトサイト制作','電子書籍制作'];

}
}

次に、レンダラのオプションの
barDirectionへ
horizontalを設定する

seriesDefaults:{
renderer:$.jqplot.BarReaderer,
shadowAngle:135,
rendererOptions:{
barDirection:'horizontal'
}
},

今回は、
shadowAngle:135
で、影の角度を135度にしている

これは、デフォルトの状態だと
バーの影が
バーの延びているほうにかかり
終端が見えにくい為
shadowAngleで角度を変更しておく

次に、円グラフ

HTMLファイルで

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

で必要なファイルの読みこみ

<div id="piechart"></div>

で表示領域の設定

そして、Javascriptファイルで制御

piedata = [
['etc',2.1],
['Nexus7',9.6],
['HTC J ONE', 35.3],
['ubuntu 12.04',50.6],
['ipod touch',2.4]
];

opts={
title:'使用頻度',
seriesDefaults:{
renderer:jQuery.jqplot.PieReaderer,
rendererOptions:{
showDataLabels:true,
padding:8
}
},

legend:{
show:true,
location:'ne',
rendererOptions:{
numberRows:2
},
}

}
pieplot = $.jqplot('piechart',[pieplot],opts);

データについては
[‘etc’,2.1],
[‘Nexus7’,9.6],
[‘HTC J ONE’, 35.3],
[‘ubuntu 12.04’,50.6],
[‘ipod touch’,2.4]
というように、配列で
[ラベル, 値]で定義する

そして、円グラフを使うには
レンダラで
$.jqplot.PieReaderer
を使う

ソースは

seriesDefaults:{
renderer:jQuery.jqplot.PieReaderer,
rendererOptions:{
showDataLabels:true,
padding:8
}
},

showDataLabels:
は
円グラフの要素の値を表示する設定
trueなら数字を表示しなくなる

ドットインストールの less が完了したので grunt に挑戦
まずは環境の構築

node.js を使ったタスク自動化ツールが grunt

主にCSS　JSのフロントエンドまわりのファイル圧縮
結合、最適化などの手順をスクリプト化するツール

スクリプト化すれば面倒な作業を一瞬で実行したり
自動化の手順を他の人と共有できる

公式サイトは
http://grunts.com/

必要な知識は
node.js
js
html
css
less

less のプリプロセッサーを題材にタスク自動化をする
あと linux コマンド
作業はvagrant の centos

localdev ディレクトリに移動して

vagrant up

で起動し

vagrant ssh

でログイン

mkdir grunt_lessons

でディレクトリをつくり

cd grunt_lessons

で移動してここで作業する

ipアドレスに関しては ifconfig で確認

node -v 

でヴァージョン確認
v0.10.24

npm -v

でこっちも確認
1.3.6

less の確認のため
lessc -v を実行したけど
lessc: コマンドが見つかりません
となるので
less をインストール

http://lesscss.org/#using-less
を参考にインストール

sudo npm install -g less

でインストール

途中、

npm WARN unmet dependency /usr/lib/node_modules/block-stream requires inherits@'~2.0.0' but will load
npm WARN unmet dependency undefined,
npm WARN unmet dependency which is version undefined
npm WARN unmet dependency /usr/lib/node_modules/fstream requires inherits@'~2.0.0' but will load
npm WARN unmet dependency undefined,
npm WARN unmet dependency which is version undefined
npm WARN unmet dependency /usr/lib/node_modules/fstream-ignore requires inherits@'2' but will load
npm WARN unmet dependency undefined,
npm WARN unmet dependency which is version undefined
npm WARN unmet dependency /usr/lib/node_modules/fstream-npm requires inherits@'2' but will load
npm WARN unmet dependency undefined,
npm WARN unmet dependency which is version undefined
npm WARN unmet dependency /usr/lib/node_modules/glob requires inherits@'2' but will load
npm WARN unmet dependency undefined,
npm WARN unmet dependency which is version undefined
npm WARN unmet dependency /usr/lib/node_modules/npmconf requires inherits@'~2.0.0' but will load
npm WARN unmet dependency undefined,
npm WARN unmet dependency which is version undefined
npm WARN unmet dependency /usr/lib/node_modules/tar requires inherits@'2' but will load
npm WARN unmet dependency undefined,
npm WARN unmet dependency which is version undefined

となっていたいたので、問題がおきたらその時対処の予定

lessc -v 

でバージョン確認したら
lessc 1.7.0 (LESS Compiler) [JavaScript]
となった

次に grunt コマンドのインストール

sudo npm install -g grunt-cli

結果としては

grunt-cli@0.1.13 /usr/lib/node_modules/grunt-cli
├── resolve@0.3.1
├── nopt@1.0.10 (abbrev@1.0.4)
└── findup-sync@0.1.3 (lodash@2.4.1, glob@3.2.9)

となっているので起動はできそう

jqPlotのチャート

まずは、棒グラフ

HTMLファイルで

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

で必要なライブラリーの読みこみ

jqplot.barReaderer.min.js
は、棒グラフの表示

jqplot.categoryAxisReaderer.js
は、横軸にカテゴリ表示

次に
HTMLファイルで

<div id="barchart"></div>

でグラフの表示領域を指定

例えば、利益と売上を棒グラフにするなら、Javascriptは

//棒グラフのデータ
var bardata = [
[10,20,50,30],   //売上
[2,4,5,6]  //利益
];

var opts = {
title:'業績',

//オプションの定義で、グラフのレンダラを棒グラフを描画する $.jqplot.BarReadererに指定
seriesDefaults:{
renderer:$.jqplot.BarReaderer,
},

//グラフの凡例の設定
series:{
{label:'売上'},
{label:'利益'},
},

legend:{
show:true,
location:'ne',
},

//横軸になるxaxisのレンダラ
//$.jqplot.CategoryAxisReadererを指定して、カテゴリ表示
axes:{
xaxis:{
renderer: $.jqplot.CategoryAxisReaderer,

//カテゴリ名表示
ticks:['2010','2011','2012','2013'],
}
}
};

$(document).on("pageshow","#barchart",function(e){
barplot = $,jqplot("barchart",data,opts);
});

となる

Google Chart Toolsみたいに積み上げ表示も可能で

stackSeriesオプションを使えば
グラフを積み上げて表示できる
積み上げグラフにするなら

棒グラフの設定へ
stackSeries:true
を追加する

場所は
title:’業績’,
の下あたり

ソースにすると

var opts = {
title:'業績',
stackSeries:true,
seriesDefaults:{

}
}

というようになる

jqPlotのチャート

まずは、棒グラフ

HTMLファイルで

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

で必要なライブラリーの読みこみ

jqplot.barReaderer.min.js
は、棒グラフの表示

jqplot.categoryAxisReaderer.js
は、横軸にカテゴリ表示

今回は、棒グラフのレンダラだけど
他にも
バブルチャートなら
jqplot.bubbleReaderer

ろくそくなら
jqplot.onlcReaderer

円グラフなら
jqplot.pieReaderer

メーターなら
jqplot.meterGaugeReaderer

ピラミッドなら
jqplot.pyramidReaderer

ブロックグラフなら
jqplot.blockReaderer

ペジェ曲線なら
jqplot.BezierCurveReaderer

ドーナツグラフなら
jqplot.donutsReaderer

となる
これらは、カテゴリ軸を利用するときのレンダラで

その他の軸のレンダラとしては

カテゴリ軸なら
jqplot.categoryAxisReaderer

日付軸なら
jqplot.dataAxisReaderer

対数軸なら
jqplot.logAxisReaderer

目盛りカスタマイズなら
jqplot.canvasAxisTrickReaderer

軸ラベルカスタマイズなら
jqplot.canvasAxisLabelReaderer

ピラミッド軸なら
jqplot.pyramidAxisReaderer

になる

軸のレンダラは、棒グラフ以外でも使えるけど
ピラミッド軸は、人口ピラミッドなどに使う pyramidReadererと組み合わせる

円グラフなどの場合
軸はないため、軸関係のレンダラは使えない

jqPlotのデータとオプションについて

オプションは

var opts={


};

まずは、タイトルの表示

title:'グラフタイトル',

この部分でタイトルを設定
これを省くとタイトルがなくなる

次に、データのラベル情報
これは、seriesで定義する


series:{
{
label:'データ1',
showMarker:false
},
{
label:'データ2',
showMarker:trueand
};

},

最初のハッシユの
{
label:’データ1′,
showMarker:false
},
は、1つめのデータに対する情報

2つめのハッシユの
{
label:’データ2′,
showMarker:true
};
は、2つめのデータに対する情報

showMarkerは、trueにすると
データのところにマーカーが表示される
falseなら、マーカーは非表示になる

マーカーは、折れ線グラフなら点がでる

次に、凡例の表示について
凡例は使い方とかを箇条書きにしたもの

凡例の表示は、legendでコントロールする

legend:{
show:true,
location:'ne',
}

show:falseにすると非表示になる
locationは、表示位置で、方角で書く
nなら Northなので北
neなら North Eastで北東
nwなら North West で北西
e なら East で東
se なら South East で南東
s なら Southで南
sw なら South West で南西
w なら West で西
となる

スマートフォンだと画面が小さいため
複数のグラフを並べると表示領域が小さくなり
スクロールしないとグラフが見れなくなってしまう

このため、凡例をグラフの上側に表示して確認しやすくする

見た目を考えれば、ne か nwあたり

次に、軸と目盛りの制限

軸は axesで設定
xaxisで X軸、yaxisでY軸を設定する

また、
labelReadererへ
$.jqplot.CanvasAxisLabelReaderer
を設定するとラベルの設定ができるようになる

グラフの目盛りの設定ができるようにするには
tickReadererへ
$.jqplot.CanvasAxisTickReaderer
を設定する

これにより
min:
で目盛りの最小値

max:
で目盛りの最大値

tickInterval:
で目盛りの幅を設定する

min:0,
max:100,
tickInterval:10
なら
0~100の目盛りで
目盛りは10,20,30 … というようになる

あと、目盛りのテキストを斜めに傾けたりするデザインにするなら
tickOptions:{angle:角度}
で設定できる

例えば
tickOptions:{angle:-30}

これらを使い、経済指標とかだしたいのなら

axes:{

xaxis:{
label:'雇用統計',
labelReaderer:$.jqplot.CanvasAxisLabelReaderer,
tickReaderer:$.jqplot.CanvasAxisTickReaderer,
tickOptions:{angle:-30}
},

yaxis:{
label:'2013年',
labelReaderer:$.jqplot.CanvasAxisLabelReaderer,
tickReaderer:$.jqplot.CanvasAxisTickReaderer,

}

}