前にも記事に書いたとおりgoogle chart でmysqlにためたデータをjsonで処理するためのデータを作成してみました。
google chartでjsonデータを書くには
{
"cols":[
{"label": "Date","type":"string"},{"label": "温度","type":"number"},{"label": "湿度","type":"number"}
],
"rows":[
{"c": [{ "v": "20-01-13"},{"v":35},{"v":45} ]},
{"c": [{ "v": "21-01-14"},{"v":30} ,{"v":20}]}
]
}
となります。colsの方ではどのとうなデータを意味するものなのか説明を行います。一方rowsの方ではcolsで指定されたものに対する値を入れておきます。
jsonフォーマットで書くには
jsonのフォーマットは書きたいグラフによって異なります。基本的にはjavascriptで書くフォーマットを調べてみると書けるようになります。
例えばここでバブルチャートのときを例にして説明してみます。
この例ではグラフを書くためのデータは以下のようにに書かれています。
function drawChart() {
var data = google.visualization.arrayToDataTable([
['ID', 'Life Expectancy', 'Fertility Rate', 'Region', 'Population'],
['CAN', 80.66, 1.67, 'North America', 33739900],
['DEU', 79.84, 1.36, 'Europe', 81902307],
['DNK', 78.6, 1.84, 'Europe', 5523095],
['EGY', 72.73, 2.78, 'Middle East', 79716203],
['GBR', 80.05, 2, 'Europe', 61801570],
['IRN', 72.49, 1.7, 'Middle East', 73137148],
['IRQ', 68.09, 4.77, 'Middle East', 31090763],
['ISR', 81.55, 2.96, 'Middle East', 7485600],
['RUS', 68.6, 1.54, 'Europe', 141850000],
['USA', 78.09, 2.05, 'North America', 307007000]
]);
ここで[‘ID’, ‘Life Expectancy’, ‘Fertility Rate’, ‘Region’, ‘Population’]という図表でいうところの凡例にあたる部分にはjsonふぉーまっとだと”cols”の部分に記載します。
"cols":[
{"label": "ID","type":"string"},{"label": "Life Expectancy","type":"number"},{"label": "Fertility Rate","type":"number"},{"label": "Region","type":"string"},{"label": "Population","type":"number"}
],
ここで”label”にあたる部分はその値の名前を表し、”type”はそのデーターの属性を表しています。いましらべた限りstringとnumberしか見当たりませんが、地図などであれば違う属性もあるかもしれません。
stringとnumberの並びは書くグラフによって異なります。この辺りについては各グラフごとに調べる必要があります。
各データーについては”cols”に対応した値を”rols”に書いていきます。
{“c”: [{ “v”: 値A}, { “v”: 各値B},,,,,]}といったフォーマットで入力していきます。
"rows":[
{"c": [{ "v": "CAN"},{"v":80.66},{"v":1.67},{"v":"North America"},{"v":33739900} ]},
{"c": [{ "v": "DEU"},{"v":79.84},{"v":1.36},{"v":"Europe"},{"v":81902307} ]},
{"c": [{ "v": "DNK"},{"v":78.6},{"v":1.84},{"v":"Europe"},{"v":5523095} ]},
{"c": [{ "v": "EGY"},{"v":72.73},{"v":2.78},{"v":"Middle East"},{"v":79716203} ]},
{"c": [{ "v": "GBR"},{"v":80.05},{"v":2},{"v":"Europe"},{"v":61801570} ]},
{"c": [{ "v": "IRN"},{"v":72.49},{"v":1.7},{"v":"Middle East"},{"v":73137148} ]},
{"c": [{ "v": "IRQ"},{"v":68.09},{"v":4.77},{"v":"Middle East"},{"v":31090763} ]},
{"c": [{ "v": "ISR"},{"v":81.55},{"v":2.96},{"v":"Middle East"},{"v":7485600} ]},
{"c": [{ "v": "RUS"},{"v":68.6},{"v":1.54},{"v":"Europe"},{"v":141850000} ]},
{"c": [{ "v": "USA"},{"v":78.09},{"v":2.05},{"v":"North America"},{"v":307007000} ]}
]
このように一つのデーターに一つごと書いていくといいでしょう。
まとめ
「Populating Data Using Server-Side Code」を参考にすればjsonデーターを適用させるか簡単にわかりますので参考にしてください。
この例で作ったものをおいたので参考にしてください。とりあえずPHPが動くサーバーと最近のブラウザーであれば動くはずです。
ただ直打ちだとべつにjsonを使う意味があまりないと思うのでphpでmysqlでアクセスしてjsonで出力する方法についても調べたので近いうちに公開するつもりです。