[Excel Services ECMAScript]JSON形式で取得したデータを元にグラフを描画する。

ホーム
Office関連, Excel Services ECMAScript
[Excel Services ECMAScript]JSON形式で取得したデータを元にグラフを描画する。

2011.12.19

[Excel Services ECMAScript]JSON形式で取得したデータを元にグラフを描画する。

「[Excel Services ECMAScript]セルにデータを入力する。」でも書いているように、JavaScriptコードからページ内に埋め込んだExcelワークブックを編集することができます(保存はできません)。
事前にブックにグラフを挿入しておけば、グラフが参照しているセルの値を変更することで、動的にグラフを書き換えることができるわけです。

そこで今回は外部サイトからJSON形式でデータを取得して、取得した値をブックに書き込むことで、グラフを描画する方法を紹介します。
今回使用したのは「Livedoor Weather Web Service(LWWS)」の天気予報データですが、そのままだと使用できないので「XML 2 JSON service」を経由してJSON形式でデータを受け取るようにしています。

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

<script type="text/javascript" src="http://r.office.microsoft.com/r/rlidExcelWLJS?v=1&kip=1"></script>
<script type="text/javascript">
    var fileToken = "SD92A165759188B352!268/-7880906317294423214/";
 
    if (window.attachEvent) {
        window.attachEvent("onload", loadEwaOnPageLoad);
    } else {
        window.addEventListener("DOMContentLoaded", loadEwaOnPageLoad, false);
    }
 
    function loadEwaOnPageLoad() {
        var props = {
            uiOptions: {
                showGridlines: false,
                showRowColumnHeaders: false,
                showParametersTaskPane: false
            },
            interactivityOptions: { }
        };
 
        Ewa.EwaControl.loadEwaAsync(fileToken, "myExcelDiv", props, onEwaLoaded);
    }
 
    function onEwaLoaded(result) {
        ewa = Ewa.EwaControl.getInstances().getItem(0);
    }
     
    function execute(obj) {
        var url = "http://weather.livedoor.com/forecast/webservice/rest/v1?day=today&city=";
        var proxy = "http://app.drk7.jp/xml2json/var=cb&url=";
        var sel = obj.options[obj.selectedIndex];
        if (sel.value != 0) {
            url = proxy + encodeURIComponent(url + sel.value);
            var sc = document.createElement("script");
            sc.charset = "utf-8";
            sc.src = url;
            document.body.appendChild(sc);
        }
    }
     
    var cb = {};
    cb.onload = function(data) {
        var city = data["location"]["city"];
        var temp = data["temperature"]["max"]["celsius"];
        var ary = new Array();
        ary[0] = new Array();
        ary[1] = new Array();
        ary[0][0] = city;
        ary[1][0] = temp;
        ewa.getActiveWorkbook().getSheets().getItemByName("Sheet1").getRange(1,2,2,1).setValuesAsync(ary,setRangeValue,null);
    }
     
    function setRangeValue(asyncResult) {
        if (asyncResult.getCode() != 0) {
            alert("Err:" + asyncResult.getDescription());
        }
    }
</script>
 
地域：
<select name="area" onchange="execute(this)">
  <option value="0" selected> </option>
  <option value="1">稚内</option>
  <option value="2">旭川</option>
  <option value="3">留萌</option>
  <option value="4">札幌</option>
  <option value="5">岩見沢</option>
  <option value="6">倶知安</option>
  <option value="7">網走</option>
  <option value="8">北見</option>
  <option value="9">紋別</option>
  <option value="10">根室</option>
  <option value="11">釧路</option>
  <option value="12">帯広</option>
  <option value="13">室蘭</option>
  <option value="14">浦河</option>
  <option value="15">函館</option>
  <option value="16">江差</option>
  <option value="17">青森</option>
  <option value="18">むつ</option>
  <option value="19">八戸</option>
  <option value="20">秋田</option>
  <option value="21">横手</option>
  <option value="22">盛岡</option>
  <option value="23">宮古</option>
  <option value="24">大船渡</option>
  <option value="25">仙台</option>
  <option value="26">白石</option>
  <option value="27">山形</option>
  <option value="28">米沢</option>
  <option value="29">酒田</option>
  <option value="30">新庄</option>
  <option value="31">福島</option>
  <option value="32">小名浜</option>
  <option value="33">若松</option>
  <option value="54">水戸</option>
  <option value="55">土浦</option>
  <option value="56">宇都宮</option>
  <option value="57">大田原</option>
  <option value="58">前橋</option>
  <option value="59">みなかみ</option>
  <option value="60">さいたま</option>
  <option value="61">熊谷</option>
  <option value="62">秩父</option>
  <option value="63">東京</option>
  <option value="64">大島</option>
  <option value="65">八丈島</option>
  <option value="66">父島</option>
  <option value="67">千葉</option>
  <option value="68">銚子</option>
  <option value="69">館山</option>
  <option value="70">横浜</option>
  <option value="71">小田原</option>
  <option value="75">甲府</option>
  <option value="76">河口湖</option>
  <option value="44">富山</option>
  <option value="45">伏木</option>
  <option value="46">金沢</option>
  <option value="47">輪島</option>
  <option value="48">福井</option>
  <option value="49">敦賀</option>
  <option value="50">新潟</option>
  <option value="51">長岡</option>
  <option value="52">高田</option>
  <option value="53">相川</option>
  <option value="72">長野</option>
  <option value="73">松本</option>
  <option value="74">飯田</option>
  <option value="34">静岡</option>
  <option value="35">網代</option>
  <option value="36">三島</option>
  <option value="37">浜松</option>
  <option value="38">名古屋</option>
  <option value="39">豊橋</option>
  <option value="40">岐阜</option>
  <option value="41">高山</option>
  <option value="42">津</option>
  <option value="43">尾鷲</option>
  <option value="77">大津</option>
  <option value="78">彦根</option>
  <option value="79">京都</option>
  <option value="80">舞鶴</option>
  <option value="81">大阪</option>
  <option value="82">神戸</option>
  <option value="83">豊岡</option>
  <option value="84">奈良</option>
  <option value="85">風屋</option>
  <option value="86">和歌山</option>
  <option value="87">潮岬</option>
  <option value="88">岡山</option>
  <option value="89">津山</option>
  <option value="90">広島</option>
  <option value="91">庄原</option>
  <option value="92">松江</option>
  <option value="93">浜田</option>
  <option value="94">西郷</option>
  <option value="95">鳥取</option>
  <option value="96">米子</option>
  <option value="97">下関</option>
  <option value="98">山口</option>
  <option value="99">柳井</option>
  <option value="100">萩</option>
  <option value="101">徳島</option>
  <option value="102">日和佐</option>
  <option value="103">高松</option>
  <option value="104">松山</option>
  <option value="105">新居浜</option>
  <option value="106">宇和島</option>
  <option value="107">高知</option>
  <option value="108">室戸</option>
  <option value="109">清水</option>
  <option value="110">福岡</option>
  <option value="111">八幡</option>
  <option value="112">飯塚</option>
  <option value="113">久留米</option>
  <option value="114">大分</option>
  <option value="115">中津</option>
  <option value="116">日田</option>
  <option value="117">佐伯</option>
  <option value="118">長崎</option>
  <option value="119">佐世保</option>
  <option value="120">厳原</option>
  <option value="121">福江</option>
  <option value="122">佐賀</option>
  <option value="123">伊万里</option>
  <option value="124">熊本</option>
  <option value="125">阿蘇乙姫</option>
  <option value="126">牛深</option>
  <option value="127">人吉</option>
  <option value="128">宮崎</option>
  <option value="129">延岡</option>
  <option value="130">都城</option>
  <option value="131">高千穂</option>
  <option value="132">鹿児島</option>
  <option value="133">鹿屋</option>
  <option value="134">種子島</option>
  <option value="135">名瀬</option>
  <option value="136">那覇</option>
  <option value="137">名護</option>
  <option value="138">久米島</option>
  <option value="139">南大東島</option>
  <option value="140">宮古島</option>
  <option value="141">石垣島</option>
  <option value="142">与那国島</option>
</select>
<p>&nbsp;</p>
<div id="myExcelDiv" style="width: 400px; height: 380px"></div>

地域：

上記select要素から地域を選択することで、その地域の予想最高気温をLWWSから取得し、セルに値を書き込みます。
ブック上のグラフはそのセルを参照しているため、書き込んだ値に応じてグラフが描画されるわけです。

上記のように事前にExcelワークブックを用意しておけば、グラフを描画するためのAPIやサービスを利用する必要がなくなります。
グラフに限らず、Excel Web Appが持つフィルター機能や集計機能がそのまま利用できますので、応用範囲は非常に幅広いだろうと思います。
例えば、JSON形式で取得した大量のデータを、埋め込んだブックに書き込んで集計、さらに集計したデータをフィルター機能で分かりやすく表示する、といったことが簡単にできるわけです。
アイデア次第で大きく広がるExcel Services ECMAScriptの可能性、皆さんも是非お試しください。