Office関連

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

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

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

<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の可能性、皆さんも是非お試しください。

関連記事

  1. Office関連

    Officeアプリケーションの「最近使用したファイル」を削除するVBScript

    WordやExcel等のOfficeアプリケーションでは、下記サイトに…

  2. Office関連

    「クラシックスタイルメニュー」の誤検知?

    2013/07/16 追記:cx20さんにコメントで"Google…

  3. Office関連

    PowerPointスライドショー終了後ファイルを閉じるVBAマクロ

    「Excel VBA PowerPoint スライドショー後閉じる」と…

  4. アイコン一覧

    Office 2013 アイコン一覧(E)

    ・Office 2013 アイコン一覧 NUM…

  5. Office関連

    OneNoteの指定したセクションをページごとに指定した形式で出力するマクロ

    今回はOneNoteの指定したセクションをページごとに指定した形式で出…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

Time limit is exhausted. Please reload CAPTCHA.

最近の記事

アーカイブ

RapidSSL_SEAL-90x50
PAGE TOP