<p class="thumb"><img src="http://cdn.zako.org/images/2014/06/chartblocks.png" alt="chartblocks" width="500" height="278" class="alignnone size-full wp-image-28084" /></p>
<p>オンラインでグラフ作成。これまでにも数え切れないほど、同様のサービスが出ていますよね。</p>
<p>それでもこのサービスをご紹介する理由は、美しいグラフを作れること、そしてその元データをエクセルから取り込んだり、サービス上で作成・管理できたりすること。</p>
<p>ウェブ上でデータを視覚化して、手軽に公開したいひとにオススメです。</p><!--more-->

<h3 class="header-label">オンラインで美しいグラフを作成できる「ChartBlocks」</h3>
<p>「<a target="_blank" href="http://www.chartblocks.com/">ChartBlocks</a>」は、<strong>エクセルやCSVデータからオンライン上で美しいグラフを作成できる</strong>サービス。</p>
<p>サービスサイト上で作成、あるいはインポートしたデータはサービスサイト上で管理、編集することもでき、グラフのカスタマイズも自在。今後はRSSフィード、Mysqlなどからもデータをインポートできるようになるみたいです。</p>

<h4 class="tips">折れ線グラフ（うちの電気代推移）</h4>
<iframe width="520" height="300" src="//embed.chartblocks.com/1.0/?c=539d8c68c9a61db20c46621d&t=49f95c3c0373a1c" frameBorder="0"></iframe>

<h4 class="tips">折れ線２軸グラフ（うちの電気代とガス代推移）</h4>
<iframe width="520" height="300" src="//embed.chartblocks.com/1.0/?c=539d8da0c9a61de70c46621d&t=68826c2425b0e0e" frameBorder="0"></iframe>
<p>このように、グラフをサイトへ埋め込めることはもちろん、PNG形式の画像やPDFなどでダウンロードすることも可能です。グラフにマウスオーバーすると、ダウンロードボタンとソーシャルシェアボタンが表示されます。</p>

<h4 class="tips">グラフの作成手順</h4>
<p><img src="http://cdn.zako.org/images/2014/06/chartblocks1.png" alt="chartblocks1" width="500" height="242" class="alignnone size-full wp-image-28083" /><br />まずグラフの種類を選びます。グラフの種類は全部で5種類。</p>

<p><img src="http://cdn.zako.org/images/2014/06/chartblocks2.png" alt="chartblocks2" width="500" height="248" class="alignnone size-full wp-image-28082" /><br />つぎにグラフのデータを作成するのか、ここで作成したデータセットを使うのか、それともエクセルやCSVを取り込むのかを決定します。</p>

<p><img src="http://cdn.zako.org/images/2014/06/chartblocks3.png" alt="chartblocks3" width="500" height="241" class="alignnone size-full wp-image-28081" /><br />新規作成（A new detaset）を選択した場合スプレッドシートが開くので、ここにデータを作成します。</p>

<p><img src="http://cdn.zako.org/images/2014/06/chartblocks4.png" alt="chartblocks4" width="500" height="236" class="alignnone size-full wp-image-28080" /><br />X軸、Y軸のデータ列を選択していきます。とくに指定がなければ手順通りに進めていけば勝手にやってくれます。</p>

<p><img src="http://cdn.zako.org/images/2014/06/chartblocks5.png" alt="chartblocks5" width="500" height="342" class="alignnone size-full wp-image-28079" /><br />最後にグラフのテンプレートを選択します。</p>

<p><img src="http://cdn.zako.org/images/2014/06/chartblocks6.png" alt="chartblocks6" width="500" height="299" class="alignnone size-full wp-image-28078" /><br />作った後にグラフをカスタマイズすることも可能です。日時がグチャグチャになることもあるので、そういったときはアングルを付けて見やすくしたり、などといった細かい設定も可能です。</p>

<p><img src="http://cdn.zako.org/images/2014/06/chartblocks7.png" alt="chartblocks7" width="500" height="194" class="alignnone size-full wp-image-28077" /><br />作成したデータは、Detasetに保存されていきます。無料版ではグラフ、データともに50個まで保存可能です。</p>

<p>興味があるかたは<a target="_blank" href="http://www.chartblocks.com/">ChartBlocks</a>へどうぞ。</p>
