미니그래프를 만들어주는 open source - jquery.peity.min.js

조그만 그래프를 쉽게 만들어 주는 오픈소스입니다.
자세한 사용법은 홈페이지를 참조하세요

첫번째

• 홈페이지 : http://benpickles.github.io/peity/
• github : https://github.com/benpickles/peity
• 라이선스 : MIT License

<script src="jquery.peity.min.js"></script>
<span class="pie">1/5</span>
<span class="pie">226/360</span>
<span class="pie">0.52/1.561</span>

 $("span.pie").peity("pie")

---

두번째

• 홈페이지 : http://omnipotent.net/jquery.sparkline/#s-about
• github : https://github.com/gwatts/jquery.sparkline/
• 라이선스 : New BSD License

<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript" src="jquery.sparkline.js"></script>
<p>
Inline Sparkline: <span class="inlinesparkline">1,4,4,7,5,9,10</span>.
</p>
<p>
Sparkline with dynamic data: <span class="dynamicsparkline">Loading..</span>
</p>
<p>
Bar chart with dynamic data: <span class="dynamicbar">Loading..</span>
</p>
<p>
Bar chart with inline data: <span class="inlinebar">1,3,4,5,3,5</span>
</p>

$(function() {
        /** This code runs when everything has been loaded on the page */
        /* Inline sparklines take their values from the contents of the tag */
        $('.inlinesparkline').sparkline(); 

        /* Sparklines can also take their values from the first argument 
        passed to the sparkline() function */
        var myvalues = [10,8,5,7,4,4,1];
        $('.dynamicsparkline').sparkline(myvalues);

        /* The second argument gives options such as chart type */
        $('.dynamicbar').sparkline(myvalues, {type: 'bar', barColor: 'green'} );

        /* Use 'html' instead of an array of values to pass options 
        to a sparkline with data in the tag */
        $('.inlinebar').sparkline('html', {type: 'bar', barColor: 'red'} );
    });

​