google chart 를 통해 원챠트 piechart 만들어 보기

<p> </p><p> </p><p> </p><p style="text-align: center;"><img src="https://t1.daumcdn.net/cfile/cafe/26118B4954F6B2D521" class="txc-image" width="417" style="clear: none; float: none;" border="0" vspace="1" hspace="1" data-filename="googlechart.jpg" exif="{}" actualwidth="417" id="A_26118B4954F6B2D52160E9"/></p><p style="text-align: center;"> </p><p style="text-align: left;">우선 전체적인 소스는 아래와 같습니다.</p><p style="text-align: left;">이를 사용하기 위해서, <<code class="xml keyword">script</code> <code class="xml color1">type</code><code class="xml plain">=</code><code class="xml string">"text/javascript"</code> <code class="xml color1">src</code><code class="xml plain">=</code><code class="xml string">"//www.google.com/jsapi"</code><code class="xml plain">></</code><code class="xml keyword">script</code><code class="xml plain">> 를 참조해서 구글 챠트를 자바스크립트로 구현할 예정입니다.</code></p><p style="text-align: left;"> </p><div class="container"><div class="txc-textbox" style="padding: 10px; border: 1px dashed rgb(243, 197, 52); background-color: rgb(254, 254, 184);"><div class="line number1 index0 alt2"><code class="xml plain"><%@ Page Language="C#" AutoEventWireup="true"  CodeFile="Default.aspx.cs" Inherits="_Default" %></code></div><div class="line number2 index1 alt1"> </div><div class="line number3 index2 alt2"><code class="xml plain"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><u><font color="#1e6685">http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd</font></u></a>"></code></div><div class="line number4 index3 alt1"> </div><div class="line number5 index4 alt2"><code class="xml plain"><</code><code class="xml keyword">html</code> <code class="xml color1">xmlns</code><code class="xml plain">=</code><code class="xml string">"<a href="http://www.w3.org/1999/xhtml"><u><font color="#1e6685">http://www.w3.org/1999/xhtml</font></u></a>"</code><code class="xml plain">></code></div><div class="line number6 index5 alt1"><code class="xml plain"><</code><code class="xml keyword">head</code> <code class="xml color1">runat</code><code class="xml plain">=</code><code class="xml string">"server"</code><code class="xml plain">></code></div><div class="line number7 index6 alt2"><code class="xml spaces">    </code><code class="xml plain"><</code><code class="xml keyword">title</code><code class="xml plain">></</code><code class="xml keyword">title</code><code class="xml plain">></code></div><div class="line number8 index7 alt1"><code class="xml spaces">    </code><code class="xml plain"><</code><code class="xml keyword">script</code> <code class="xml color1">src</code><code class="xml plain">=</code><code class="xml string">"//ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"</code> <code class="xml color1">type</code><code class="xml plain">=</code><code class="xml string">"text/javascript"</code><code class="xml plain">></</code><code class="xml keyword">script</code><code class="xml plain">></code></div><div class="line number9 index8 alt2"><code class="xml spaces">    </code><strong><code class="xml plain"><</code><code class="xml keyword">script</code> <code class="xml color1">type</code><code class="xml plain">=</code><code class="xml string">"text/javascript"</code> <code class="xml color1">src</code><code class="xml plain">=</code><code class="xml string">"//www.google.com/jsapi"</code><code class="xml plain">></</code><code class="xml keyword">script</code><code class="xml plain">></code></strong></div><div class="line number10 index9 alt1"><code class="xml spaces">    </code><code class="xml plain"><</code><code class="xml keyword">script</code> <code class="xml color1">type</code><code class="xml plain">=</code><code class="xml string">"text/javascript"</code><code class="xml plain">></code></div><div class="line number11 index10 alt2"><code class="xml spaces">        </code><code class="xml plain">google.load('visualization', '1', { packages: ['corechart'] });</code></div><div class="line number12 index11 alt1"><code class="xml spaces">    </code><code class="xml plain"></</code><code class="xml keyword">script</code><code class="xml plain">></code></div><div class="line number13 index12 alt2"><code class="xml spaces">    </code><code class="xml plain"><</code><code class="xml keyword">script</code> <code class="xml color1">type</code><code class="xml plain">=</code><code class="xml string">"text/javascript"</code><code class="xml plain">></code></div><div class="line number14 index13 alt1"><code class="xml spaces">        </code><code class="xml plain">$(document).ready(function() {</code></div><div class="line number15 index14 alt2"><code class="xml spaces">            </code><code class="xml plain">$.ajax({</code></div><div class="line number16 index15 alt1"><code class="xml spaces">                </code><code class="xml plain">type: 'POST',</code></div><div class="line number17 index16 alt2"><code class="xml spaces">                </code><code class="xml plain">dataType: 'json',</code></div><div class="line number18 index17 alt1"><code class="xml spaces">                </code><code class="xml plain">contentType: 'application/json',</code></div><div class="line number19 index18 alt2"><code class="xml spaces">                </code><code class="xml plain"><strong>url: 'Default.aspx/GetData',</strong></code></div><div class="line number20 index19 alt1"><code class="xml spaces">                </code><code class="xml plain">data: '{}',</code></div><div class="line number21 index20 alt2"><code class="xml spaces">                </code><code class="xml plain">success:</code></div><div class="line number22 index21 alt1"><code class="xml spaces">                    </code><code class="xml plain">function(response) {</code></div><div class="line number23 index22 alt2"><code class="xml spaces">                        </code><code class="xml plain">drawVisualization(response.d);</code></div><div class="line number24 index23 alt1"><code class="xml spaces">                    </code><code class="xml plain">}</code></div><div class="line number25 index24 alt2"> </div><div class="line number26 index25 alt1"><code class="xml spaces">            </code><code class="xml plain">});</code></div><div class="line number27 index26 alt2"><code class="xml spaces">        </code><code class="xml plain">})</code></div><div class="line number28 index27 alt1"> </div><div class="line number29 index28 alt2"><code class="xml spaces">        </code><code class="xml plain">function drawVisualization(dataValues) {</code></div><div class="line number30 index29 alt1"><code class="xml spaces">            </code><code class="xml plain">var data = new google.visualization.DataTable();</code></div><div class="line number31 index30 alt2"><code class="xml spaces">            </code><code class="xml plain">data.addColumn('string', 'Column Name');</code></div><div class="line number32 index31 alt1"><code class="xml spaces">            </code><code class="xml plain">data.addColumn('number', 'Column Value');</code></div><div class="line number33 index32 alt2"> </div><div class="line number34 index33 alt1"><code class="xml spaces">            </code><code class="xml plain">for (var i = 0; i < </code><code class="xml keyword">dataValues.length</code><code class="xml plain">; i++) {</code></div><div class="line number35 index34 alt2"><code class="xml spaces">                </code><code class="xml plain">data.addRow([dataValues[i].ColumnName, dataValues[i].Value]);</code></div><div class="line number36 index35 alt1"><code class="xml spaces">            </code><code class="xml plain">}</code></div><div class="line number37 index36 alt2"> </div><div class="line number38 index37 alt1"><code class="xml spaces">            </code><code class="xml plain">new google.visualization.PieChart(document.getElementById('visualization')).</code></div><div class="line number39 index38 alt2"><code class="xml spaces">                </code><code class="xml plain">draw(data, { title: "Google Charts Example" });          </code></div><div class="line number40 index39 alt1"><code class="xml spaces">        </code><code class="xml plain">}</code></div><div class="line number41 index40 alt2"> </div><div class="line number42 index41 alt1"><code class="xml spaces">        </code> </div><div class="line number43 index42 alt2"><code class="xml spaces">    </code><code class="xml plain"></script></code></div><div class="line number44 index43 alt1"><code class="xml plain"></</code><code class="xml keyword">head</code><code class="xml plain">></code></div><div class="line number45 index44 alt2"><code class="xml plain"><</code><code class="xml keyword">body</code><code class="xml plain">></code></div><div class="line number46 index45 alt1"><code class="xml spaces">    </code><code class="xml plain"><</code><code class="xml keyword">form</code> <code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"form1"</code> <code class="xml color1">runat</code><code class="xml plain">=</code><code class="xml string">"server"</code><code class="xml plain">></code></div><div class="line number47 index46 alt2"><code class="xml spaces">        </code><code class="xml plain"><</code><code class="xml keyword">div</code> <code class="xml color1">id</code><code class="xml plain">=</code><code class="xml string">"visualization"</code> <code class="xml color1">style</code><code class="xml plain">=</code><code class="xml string">"width: 600px; height: 400px;"</code><code class="xml plain">></</code><code class="xml keyword">div</code><code class="xml plain">></code></div><div class="line number48 index47 alt1"><code class="xml spaces">    </code><code class="xml plain"></</code><code class="xml keyword">form</code><code class="xml plain">></code></div><div class="line number49 index48 alt2"><code class="xml plain"></</code><code class="xml keyword">body</code><code class="xml plain">></code></div><div class="line number50 index49 alt1"><code class="xml plain"></</code><code class="xml keyword">html</code><code class="xml plain">></code></div></div></div><p style="text-align: left;"> </p><p style="text-align: left;"> </p><p>원차트를 사용하기 위해서... <font face="GulimChe">'corechart' 를 명시합니다.</font></p><p><font face="GulimChe"></font> </p><div class="txc-textbox" style="padding: 10px; border: 1px dashed rgb(254, 137, 67); background-color: rgb(254, 222, 199);"><p> </p><div class="container"><div class="line number1 index0 alt2"><code class="xml plain"><</code><code class="xml keyword">script</code> <code class="xml color1">type</code><code class="xml plain">=</code><code class="xml string">"text/javascript"</code><code class="xml plain">></code></div><div class="line number2 index1 alt1"><code class="xml spaces">    </code><code class="xml plain">google.load('visualization', '1', { packages: ['corechart'] });</code></div><div class="line number3 index2 alt2"><code class="xml plain"></</code><code class="xml keyword">script</code><code class="xml plain">></code></div></div></div><p> </p><p>컬럼명과 퍼센트 표기에 대한 값을 담기 위해 클래스를 만듭니다.</p><p>여기서 컬럼명은 "<code class="csharp plain">ColumnName" 이고, 퍼센트 값은 "<code class="csharp plain">Value" 에 담을 예정입니다.</code></code></p><p> </p><div class="container"><div class="txc-textbox" style="padding: 10px; border: 1px dashed rgb(243, 197, 52); background-color: rgb(254, 254, 184);"><div class="line number1 index0 alt2"><code class="csharp keyword">public</code> <code class="csharp keyword">class</code> <code class="csharp plain">Data</code></div><div class="line number2 index1 alt1"><code class="csharp plain">{</code></div><div class="line number3 index2 alt2"><code class="csharp spaces">    </code><code class="csharp keyword">public</code> <code class="csharp keyword">string</code> <code class="csharp plain">ColumnName = </code><code class="csharp string">""</code><code class="csharp plain">;</code></div><div class="line number4 index3 alt1"><code class="csharp spaces">    </code><code class="csharp keyword">public</code> <code class="csharp keyword">int</code> <code class="csharp plain">Value = 0;</code></div><div class="line number5 index4 alt2"> </div><div class="line number6 index5 alt1"><code class="csharp spaces">    </code><code class="csharp keyword">public</code> <code class="csharp plain">Data(</code><code class="csharp keyword">string</code> <code class="csharp plain">columnName, </code><code class="csharp keyword">int</code> <code class="csharp plain">value)</code></div><div class="line number7 index6 alt2"><code class="csharp spaces">    </code><code class="csharp plain">{</code></div><div class="line number8 index7 alt1"><code class="csharp spaces">        </code><code class="csharp plain">ColumnName = columnName;</code></div><div class="line number9 index8 alt2"><code class="csharp spaces">        </code><code class="csharp plain">Value = value;</code></div><div class="line number10 index9 alt1"><code class="csharp spaces">    </code><code class="csharp plain">}</code></div><div class="line number11 index10 alt2"><code class="csharp plain">}</code></div></div></div><p> </p><p> </p><p>코드비하인드 단인, <code class="xml plain">Default.aspx.cs 에서 GetData() 함수를 기술합니다.</code></p><p><code class="xml plain">자바스크립트단에서 값을 가져오기 위해, <code class="xml plain">url: 'Default.aspx/GetData', 로 명시한 부분이 있습니다.</code></code></p><p><code class="xml plain"><code class="xml plain">또한 접근하기 위해서 WebMethod 어트리뷰트를 명시합니다. (또한 <u>웹서비스로도 구현이 가능합니다. 대신 url 부분 코딩은 다소 변경해야 합니다.</u>)</code></code></p><p><code class="xml plain">위에 만든 클래스에서 객체를 4개 new 생성자를 통해 구현하여 제네릭 함수인 dataList 에 담아서 반환합니다.</code></p><p><code class="xml plain">이 값들이 원챠트에서 보여줄 컬럼명과 퍼센트 값을 의미합니다.</code></p><p> </p><div class="container"><div class="txc-textbox" style="padding: 10px; border: 1px dashed rgb(243, 197, 52); background-color: rgb(254, 254, 184);"><div class="line number1 index0 alt2"><code class="csharp plain">[WebMethod]</code></div><div class="line number2 index1 alt1"><code class="csharp keyword">public</code> <code class="csharp keyword">static</code> <code class="csharp plain">List<Data> GetData()</code></div><div class="line number3 index2 alt2"><code class="csharp plain">{</code></div><div class="line number4 index3 alt1"><code class="csharp spaces">    </code><code class="csharp plain">List<Data> dataList = </code><code class="csharp keyword">new</code> <code class="csharp plain">List<Data>();</code></div><div class="line number5 index4 alt2"> </div><div class="line number6 index5 alt1"><code class="csharp spaces">    </code><code class="csharp plain">dataList.Add(</code><code class="csharp keyword">new</code> <code class="csharp plain">Data(</code><code class="csharp string">"Column 1"</code><code class="csharp plain">, 100));</code></div><div class="line number7 index6 alt2"><code class="csharp spaces">    </code><code class="csharp plain">dataList.Add(</code><code class="csharp keyword">new</code> <code class="csharp plain">Data(</code><code class="csharp string">"Column 2"</code><code class="csharp plain">, 200));</code></div><div class="line number8 index7 alt1"><code class="csharp spaces">    </code><code class="csharp plain">dataList.Add(</code><code class="csharp keyword">new</code> <code class="csharp plain">Data(</code><code class="csharp string">"Column 3"</code><code class="csharp plain">, 300));</code></div><div class="line number9 index8 alt2"><code class="csharp spaces">    </code><code class="csharp plain">dataList.Add(</code><code class="csharp keyword">new</code> <code class="csharp plain">Data(</code><code class="csharp string">"Column 4"</code><code class="csharp plain">, 400));</code></div><div class="line number10 index9 alt1"> </div><div class="line number11 index10 alt2"><code class="csharp spaces">    </code><code class="csharp keyword">return</code> <code class="csharp plain">dataList;       </code></div><div class="line number12 index11 alt1"><code class="csharp plain">}</code></div></div></div><p> </p><p> </p><p>제네릭 dataList 를 값을 받기위해서 아래 처럼 url 을 기술하고, response.d 를 통해 값을 받아 <code class="jscript plain">drawVisualization 함수에 넘깁니다.</code></p><p> </p><div class="container"><div class="txc-textbox" style="padding: 10px; border: 1px dashed rgb(254, 137, 67); background-color: rgb(254, 222, 199);"><div class="line number1 index0 alt2"><code class="jscript plain">$(document).ready(</code><code class="jscript keyword">function</code><code class="jscript plain">() {</code></div><div class="line number2 index1 alt1"><code class="jscript spaces">    </code><code class="jscript plain">$.ajax({</code></div><div class="line number3 index2 alt2"><code class="jscript spaces">        </code><code class="jscript plain">type: </code><code class="jscript string">'POST'</code><code class="jscript plain">,</code></div><div class="line number4 index3 alt1"><code class="jscript spaces">        </code><code class="jscript plain">dataType: </code><code class="jscript string">'json'</code><code class="jscript plain">,</code></div><div class="line number5 index4 alt2"><code class="jscript spaces">        </code><code class="jscript plain">contentType: </code><code class="jscript string">'application/json'</code><code class="jscript plain">,</code></div><div class="line number6 index5 alt1"><code class="jscript spaces">        </code><code class="jscript plain">url: </code><code class="jscript string">'Default.aspx/GetData'</code><code class="jscript plain">,</code></div><div class="line number7 index6 alt2"><code class="jscript spaces">        </code><code class="jscript plain">data: </code><code class="jscript string">'{}'</code><code class="jscript plain">,</code></div><div class="line number8 index7 alt1"><code class="jscript spaces">        </code><code class="jscript plain">success:</code></div><div class="line number9 index8 alt2"><code class="jscript spaces">            </code><code class="jscript keyword">function</code><code class="jscript plain">(response) {</code></div><div class="line number10 index9 alt1"><code class="jscript spaces">                </code><code class="jscript plain">drawVisualization(<strong>response.d</strong>);</code></div><div class="line number11 index10 alt2"><code class="jscript spaces">            </code><code class="jscript plain">}</code></div><div class="line number12 index11 alt1"><code class="jscript spaces">        </code><code class="jscript plain">});</code></div><div class="line number13 index12 alt2"><code class="jscript spaces">    </code><code class="jscript plain">})</code></div><div class="line number14 index13 alt1"><code class="jscript plain">})</code></div></div></div><p> </p><p> </p><p>넘긴 배열형식의 객체값을 받아 for 문으로 아래처럼 구현하여 data.addRow() 함수를 통해 추가합니다.</p><p>값은 addRow 함수를 통해 추가하고, 컬럼명은 addColumn 함수를 통해 명시합니다.</p><p> </p><div class="container"><div class="txc-textbox" style="padding: 10px; border: 1px dashed rgb(254, 137, 67); background-color: rgb(254, 222, 199);"><div class="line number1 index0 alt2"><code class="jscript keyword">function</code> <code class="jscript plain">drawVisualization(dataValues) {</code></div><div class="line number2 index1 alt1"><code class="jscript spaces">    </code><code class="jscript keyword">var</code> <code class="jscript plain">data = </code><code class="jscript keyword">new</code> <code class="jscript plain">google.visualization.DataTable();</code></div><div class="line number3 index2 alt2"><code class="jscript spaces">    </code><code class="jscript plain">data.<strong>addColumn</strong>(</code><code class="jscript string">'string'</code><code class="jscript plain">, </code><code class="jscript string">'Column Name'</code><code class="jscript plain">);</code></div><div class="line number4 index3 alt1"><code class="jscript spaces">    </code><code class="jscript plain">data.<strong>addColumn</strong>(</code><code class="jscript string">'number'</code><code class="jscript plain">, </code><code class="jscript string">'Column Value'</code><code class="jscript plain">);</code></div><div class="line number5 index4 alt2"> </div><div class="line number6 index5 alt1"><code class="jscript spaces">    </code><code class="jscript keyword">for</code> <code class="jscript plain">(</code><code class="jscript keyword">var</code> <code class="jscript plain">i = 0; i < dataValues.length; i++) {</code></div><div class="line number7 index6 alt2"><code class="jscript spaces">        </code><code class="jscript plain">data.<strong>addRow</strong>([dataValues[i].<strong>ColumnName</strong>, dataValues[i].<strong>Value</strong>]);</code></div><div class="line number8 index7 alt1"><code class="jscript spaces">    </code><code class="jscript plain">}</code></div><div class="line number9 index8 alt2"> </div><div class="line number10 index9 alt1"><code class="jscript spaces">    </code><code class="jscript keyword">new</code> <code class="jscript plain">google.visualization.<strong>PieChart</strong>(document.getElementById(</code><code class="jscript string">'visualization'</code><code class="jscript plain">)).</code></div><div class="line number11 index10 alt2"><code class="jscript spaces">        </code><code class="jscript plain">draw(data, { title: </code><code class="jscript string">"Google Charts Example"</code> <code class="jscript plain">});          </code></div><div class="line number12 index11 alt1"><code class="jscript plain">}</code></div></div></div><p> </p><p> </p><p>이제 담은 data 변수에 <code class="jscript plain">draw 함수를 통해 데이터를 제공합니다. 원챠트를 그릴 것이므로 PieChart 를 호출합니다.</code></p><p><code class="jscript plain">그리고 drow 함수 안의 title 부분의 값은 원챠트 상단의 타이틀을 의미합니다.</code></p><p><code class="jscript plain"></code> </p><p><code class="jscript plain">원문은 아래에 기술되어 있으니 참고하시기 바랍니다.</code></p><p><code class="jscript plain"></code> </p><div class="txc-textbox" style="padding: 10px; border: 1px dashed rgb(159, 211, 49); background-color: rgb(231, 253, 181);"><p><code class="jscript plain"><a href="http://girlfromoutofthisworld.com/google-charts-asp-net-jquery-ajax-quick-easy/">http://girlfromoutofthisworld.com/google-charts-asp-net-jquery-ajax-quick-easy/</a></code></p></div><p><code class="jscript plain"></code> </p><p><code class="jscript plain"></code> </p><p><code class="jscript plain">감사합니다.</code></p><p><code class="jscript plain"></code> </p><p> </p><p> </p><p> </p><p> </p><p> </p>