<p class="thumb"><img alt="エクセルデータを貼り付けるだけでグラフコードを生成するchartgizmo" src="http://web-marketing.zako.org/images/chartgizmo-online-chart-bui.png" width="514" height="204" style="" /></p>
<p>エクセルデータをコピペするだけ、つまりバイナリデータをそのまま貼り付けるだけでグラフを生成してくれる、アップロードするサービスも使い勝手が良いのですがこれもなかなかシンプルで便利ですよね。</p>

<!--more-->
<h3 class="header-label">エクセルデータをコピペするだけでグラフ貼り付けコードを生成</h3>
<p>「エ<strong>クセルシートに複数の表があって、アップロードするサービスではグラフを生成できない。</strong> 」、「<strong>だからといって、都度違うブックを新規作成するのも面倒。</strong>」</p>

<p>そんなときに便利なのが<a class="web-site-link" href="http://chartgizmo.com/" onclick="window.open('http://chartgizmo.com/'); return false;">ChartGizmo.com</a>です。</p>

<h3 class="header-label">カンタンなグラフ作成手順</h3>
<h4 class="header-label">1. エクセルから表データをコピー</h4>
<p class="picture"><img src="http://lh3.ggpht.com/sigeos15/SPIXU1JdyXI/AAAAAAAAJC8/4AdCbhiew-c/s400/copy-data-from-an-Excel2.jpg" />
実際にこのままコピーしてブラウザ上で貼り付けています。</p>

<h4 class="header-label">2. コピーしたデータをブラウザ上で貼り付ける</h4>
<p class="picture"><img src="http://lh4.ggpht.com/sigeos15/SPIXUilXOaI/AAAAAAAAJC0/uZ1Y33zTXC4/s400/copy-data-from-an-Excel.jpg" />
エクセルのデータをこのように貼り付けると、画像左のように自動的にグラフチャートのデータテーブルが追加されます。</p>


<h3 class="header-label">生成されるグラフのサンプル</h3>

<p>ChartGizmoで生成できるグラフの貼り付け方法は下記の4通り。</p>

<h4 class="header-label">1. Html</h4>
<p>シンプルなイメージタグバージョン。<br />
<img title='Generated by ChartGizmo.com' src='http://chartgizmo.com/GenerateChart?id=1946'/></p>

<h4 class="header-label">2. Dynamic</h4>
<p>JavaScriptでグラフ画像を埋め込み。</p>
<script type='text/javascript' language='javascript'
src='http://chartgizmo.com/scripts/client.js?'></script>
<script type='text/javascript' language='javascript' class='chartGizmo'>
chartGizmo.chartId = 1946;
chartGizmo.data = {"l": ["Yahoo! Sites", "Google Sites", "Rakuten Inc", "Microsoft Sites", "FC2 inc.", "NTT Group", "GMO Internet Group", "Livedoor", "Nifty Corporation", "Wikipedia Sites"], "v": [["44031", "34305", "29344", "29252", "27608", "27406", "25225", "22740", "22262", "21844"]]};
chartGizmo.showChart();
</script>

<br />
<h4 class="header-label">3. Capture</h4>
<p><strike>JavaScriptでHTMLデータを生成するのですが、表示されないこともあるのが残念。</strike></p>
<dl>
<dt>【2008-10-13 追記】</dt>
<dd>すみません、これはJavascriptの前にテーブルデータを書いておく必要があったようです。方法を以下に追記しておきます。</dd>
<dd>教えてくださったdemon101さん、ありがとうございます。</dd>
</dl>

<table class="CSource　post" width="500">
<caption>2008年3月 日本のウェブサイト利用者数ランキング</caption>
<tr>
<td class="CLabels">Yahoo! Sites</td>
<td class="CValues">44031</td>
</tr><tr>
<td>Google Sites</td>
<td>34305</td>
</tr><tr>
<td>Rakuten Inc</td>
<td>29344</td>
</tr><tr>
<td>Microsoft Sites</td>
<td>29252</td>
</tr><tr>
<td >FC2 inc.</td>
<td>27608</td>
</tr><tr>
<td>NTT Group</td>
<td>27406</td>
</tr><tr>
<td>GMO Internet Group</td>
<td>25225</td>
</tr><tr>
<td>Livedoor</td>
<td>22740</td>
</tr><tr>
<td>Nifty Corporation</td>
<td>22262</td>
</tr><tr>
<td>Wikipedia Sites</td>
<td>21844</td>
</tr>
</table>

<script type='text/javascript' language='javascript'
src='http://chartgizmo.com/scripts/client.js?'></script>
<script type='text/javascript' language='javascript' class='chartGizmo'>
chartGizmo.chartId = 1946;
chartGizmo.tableClass = 'CSource';
chartGizmo.captureData();
</script>
<p>このように発行されるコードの前にテーブルデータを書いておくとグラフが生成されます。</p>
<h4 class="header-label">テーブルデータのサンプル</h4>
<p>以下のデータのように、 &lt;table&gt; の class を CSource とし、ラベルの列はひとつめを &lt;td class=&quot;CLabels&quot;&gt; 数値の列は同じくひとつめを &lt;td class=&quot;CValues&quot;&gt; と指定するとデータを読み込みます。</p>

<textarea name="code" class="xml" cols="60" rows="5" id="code">
<table class="CSource" border="1" width="510">
<caption>2008年3月 日本のウェブサイト利用者数ランキング</caption>
<tr>
<td class="CLabels">Yahoo! Sites</td>
<td class="CValues">44031</td>
</tr><tr>
<td>Google Sites</td>
<td>34305</td>
</tr><tr>
<td>Rakuten Inc</td>
<td>29344</td>
</tr><tr>
<td>Microsoft Sites</td>
<td>29252</td>
</tr><tr>
<td >FC2 inc.</td>
<td>27608</td>
</tr><tr>
<td>NTT Group</td>
<td>27406</td>
</tr><tr>
<td>GMO Internet Group</td>
<td>25225</td>
</tr><tr>
<td>Livedoor</td>
<td>22740</td>
</tr><tr>
<td>Nifty Corporation</td>
<td>22262</td>
</tr><tr>
<td>Wikipedia Sites</td>
<td>21844</td>
</tr>
</table>
</textarea>

<p>ちなみに &lt;th&gt; 要素を含めてしまうとデータが反映されないので注意してください。</p>


<h4 class="header-label">4. Flash</h4>
<p>Flashフォーマットでグラフを生成。 これが一番クールなグラフ。</p>
<embed src='http://chartgizmo.com/chart.swf?data=http://chartgizmo.com/GenerateFlash?id=1946' quality='high' allowScriptAccess='always' width='510px' height='400px' type='application/x-shockwave-flash' pluginspage='http://www.macromedia.com/go/getflashplayer'/>

<p>興味のある方は<a class="web-site-link" href="http://chartgizmo.com/" onclick="window.open('http://chartgizmo.com/'); return false;">ChartGizmo.com</a>へどうぞ。</p>

<p>実際に使ってみると、多数の表データがある際に、そのひとつだけをグラフ化してサイト上に公開したいときなどにかなり便利なのではないかと感じました。 パブリシティに市場調査データを利用する際には重宝するかも！？</p>

<p>Via:<a class="web-site-link" href="http://delicious.com/url/a700c1e98dc901fd747420abb5927385" onclick="window.open('http://delicious.com/url/a700c1e98dc901fd747420abb5927385'); return false;">Delicious</a></p>

<script class="javascript" src="http://web-marketing.zako.org/js/shCore.js"></script>
<script class="javascript" src="http://web-marketing.zako.org/js/shBrushXml.js"></script>
<script class="javascript">
dp.SyntaxHighlighter.HighlightAll('code');
</script>