그래프API - taucharts

자바스크립트로 쉽게 그래프를 그려보자.

튜토리얼에서 프로토콜이 빠져있어서 삽질한 것말고는 삽질할게 없을 정도로 간단하다.

코드를 보면

<script src="http://cdn.jsdelivr.net/d3js/latest/d3.min.js" charset="utf-8"></script>

<script src="http://cdn.jsdelivr.net/underscorejs/latest/underscore-min.js" type="text/javascript"></script>

<script src="http://cdn.jsdelivr.net/taucharts/latest/tauCharts.min.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="http://cdn.jsdelivr.net/taucharts/latest/tauCharts.min.css">

해더에 걸어주자. 그리고 바디에 다음 코드를 넣자.

<div id="line"></div>

<script type="text/javascript">

var datasource = [{

  type:'us', count:20, date:'12-2013'

},{

  type:'us', count:10, date:'01-2014'

},{

  type:'bug', count:15, date:'02-2014'

},{

  type:'bug', count:23, date:'05-2014'

}];

var chart = new tauCharts.Chart({

    data: datasource,

    type: 'line',

    x: 'date',

    y: 'count',

    color: 'type' // there will be two lines with different colors on the chart

});

window.onload = function(){

chart.renderTo('#line');

}

</script>

출처: http://www.taucharts.com/