[javascript] chart 라이브러리

해당 라이브러리들의 예시 그래프는 INSPINIA - Responsive Admin Theme 테마 기준으로 작성 되었습니다.

1. flotChart.js (http://www.pikemere.co.uk/blog/category/flot/)

flotChart - line

flotChart - bar

 

flotChart - pie

 

사용방법

<!--[if lte IE 8]><script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/excanvas.min.js"></script><![endif]-->
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/flot/0.8.2/jquery.flot.min.js"></script>

<script type="text/javascript">
$(document).ready(function() {
    $.plot($("#placeholder"), data, options);
});
</script>

<div id="placeholder"></div>

 

데이터 형식 - Bar/Line

var bar_customised_1 = [[1, 120], [2, 70],  [3, 100], [4, 60], [5, 35]];    //[[x축값, y축값], [x축값, y축값]]
var bar_customised_2 = [[1, 90], [2, 60], [3, 30], [4, 73], [5, 30]];
var bar_customised_3 = [[1, 80], [2, 40], [3, 47], [4, 22], [5, 24]];

var data = [
    { label: "Series 1", data: bar_customised_1 },    //label : 선(막대) 설명, data: 보여줄 데이터
    { label: "Series 2", data: bar_customised_2 },
    { label: "Series 3", data: bar_customised_3 }
];

 

데이터 형식 - Pie

var data = [
            { label: "Series 1", data: 120 },    //label : 데이터 설명, data: 데이터 값
            { label: "Series 2", data: 70 },
            { label: "Series 3", data: 100 }
        ];

 

특징

• x 축값에 String 값이 입력 안됨
• Tooltips for each data point
• Additional data series
  
• Custom shapes for the data points
  
• A legend
  
• Labels for each axis
  
• Custom colours for each series
  
• Data labels on the x axis
  
• Removed the vertical gridlines

 

 

2. morrisChart.js (http://morrisjs.github.io/morris.js/index.html)

morrisChart - line

morrisChart - bar

morrisChart - pie

사용 방법

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>

<script type="text/javaxcript">
new Morris.Line({
  element: 'myfirstchart',
  data: [
    { year: '2008', value: 20 },
    { year: '2009', value: 10 },
    { year: '2010', value: 5 },
    { year: '2011', value: 5 },
    { year: '2012', value: 20 }
  ],
  xkey: 'year',
  ykeys: ['value'],
  labels: ['Value']
});
</script>

<div id="myfirstchart"></div>

 

데이터 형식 - Bar/Line

var data: [
    { year: '2008', value1: 20, value2: 20 },    //{축명: 축값, 축명: 축값, 축명: 축값}
    { year: '2009', value1: 10, value2: 20 },
    { year: '2010', value1: 5, value2: 10 },
    { year: '2011', value1: 5, value2: 0 },
    { year: '2012', value1: 20, value2: 2 }
  ],
  xkey: 'year',                // xkey : data에서 정의한 축명
  ykeys: ['value1', 'value2'],        // ykey : data에서 정의한 축명
  labels: ['Series A', 'Series B']    // label : 선 설명

 

데이터 형식 - Pie

var data = [{ label: "Download Sales", value: 12 },
            { label: "In-Store Sales", value: 30 },
            { label: "Mail-Order Sales", value: 20 } ];

 

특징

• xkey, ykeys, labels : 필수입력사항

 

3. jqPlotChart.js (http://www.jqplot.com/docs/files/usage-txt.html)

jqPlotChart.js

<!--[if lt IE 9]><script language="javascript" type="text/javascript" src="excanvas.js"></script><![endif]-->
<script language="javascript" type="text/javascript" src="jquery.min.js"></script>
<script language="javascript" type="text/javascript" src="jquery.jqplot.min.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.jqplot.css" />

<script type="text/javascript">
$.jqplot('chartdiv',  [[[1, 2],[3,5.12],[5,13.1],[7,33.6],[9,85.9],[11,219.9]]],
{ title:'Exponential Line',
  axes:{yaxis:{min:-10, max:240}},
  series:[{color:'#5FAB78'}]
});
</script>

<div id="chartdiv"></div>

$(document).ready(function(){
  var line1=[['2008-06-30 8:00AM',4], ['2008-7-14 8:00AM',6.5], ['2008-7-28 8:00AM',5.7], ['2008-8-11 8:00AM',9], ['2008-8-25 8:00AM',8.2]];
  var plot2 = $.jqplot('chart2', [line1], {
      title:'Customized Date Axis', 
      axes:{
        xaxis:{
          renderer:$.jqplot.DateAxisRenderer, 
          tickOptions:{formatString:'%b %#d, %#I %p'},
          min:'June 16, 2008 8:00AM', 
          tickInterval:'2 weeks'
        }
      },
      series:[{lineWidth:4, markerOptions:{style:'square'}}]
  });
});

 

 

4. Chart.js (http://www.chartjs.org/docs/)

Chart - line

chart - bar

chart - pie

<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>

<script type="text/javascript">

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],
    datasets: [
        {
            label: "My First dataset",
            fillColor: "rgba(220,220,220,0.2)",
            strokeColor: "rgba(220,220,220,1)",
            pointColor: "rgba(220,220,220,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(220,220,220,1)",
            data: [65, 59, 80, 81, 56, 55, 40]
        },
        {
            label: "My Second dataset",
            fillColor: "rgba(151,187,205,0.2)",
            strokeColor: "rgba(151,187,205,1)",
            pointColor: "rgba(151,187,205,1)",
            pointStrokeColor: "#fff",
            pointHighlightFill: "#fff",
            pointHighlightStroke: "rgba(151,187,205,1)",
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
};
var ctx = document.getElementById("conn-chart").getContext("2d");

var myLineChart = new Chart(ctx).Line(data, options);
</script>

<canvas id="myChart"></canvas>

 

데이터 형식 - Bar/Line

var data = {
    labels: ["January", "February", "March", "April", "May", "June", "July"],    //X축값
    datasets: [
        {
            label: "My First dataset",                //선 설명
            data: [65, 59, 80, 81, 56, 55, 40]            //y축값
        },
        {
            label: "My Second dataset",
            data: [28, 48, 40, 19, 86, 27, 90]
        }
    ]
};

 

데이터 형식 - Pie

var doughnutData = [
            {
                value: 300,
                label: "App" 
            },
            {
                value: 50,
                label: "Software" 
            },
            {
                value: 100,
                label: "Laptop" 
            }
        ];

 

5. C3.js (http://c3js.org/)

C3 - line

C3 - line2

c3chart - bar

c3chart - pie

 

<link href="css/plugins/c3/c3.min.css" rel="stylesheet">
<script src="js/plugins/d3/d3.min.js"></script>
<script src="js/plugin;s/c3/c3.min.js"></script>

<div id="lineChart"></div>

<div id="slineChart" ></div>

<script type="text/javascript">
            c3.generate({
                bindto: '#lineChart',
                data:{
                    columns: [
                        ['data1', 30, 200, 100, 400, 150, 250],
                        ['data2', 50, 20, 10, 40, 15, 25]
                    ],
                    colors:{
                        data1: '#1ab394',
                        data2: '#BABABA'
                    }
                }
            });

            c3.generate({
                bindto: '#slineChart',
                data:{
                    columns: [
                        ['data1', 30, 200, 100, 400, 150, 250],
                        ['data2', 130, 100, 140, 200, 150, 50]
                    ],
                    colors:{
                        data1: '#1ab394',
                        data2: '#BABABA'
                    },
                    type: 'spline'
                }
            });
</script>

 

데이터 형식 - Bar/Line

data: {
        x: 'x',    //x : x축명
        columns: [
            ['x', 30, 50, 100, 230, 300, 310],        //['x축명', x축값,x축값...]
            ['data1', 30, 200, 100, 400, 150, 250],    //['y축명', y축값,x축값...]
            ['data2', 130, 300, 200, 300, 250, 450]    //['y축명', y축값,x축값...]
        ]
    }

 

데이터 형식 - Pie

var pie_data = [
            ['data1', 300],
            ['data2', 100
            ]
        ]

 

6. Chartlist.Js (https://gionkunz.github.io/chartist-js/)

 

 

<div id="ct-chart1" class="ct-perfect-fourth"></div>

<script type="text/javascript">
        $(document).ready(function(){
            new Chartist.Line('#ct-chart1', {
                labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],
                series: [
                    [12, 9, 7, 8, 5],
                    [2, 1, 3.5, 7, 3],
                    [1, 3, 4, 5, 6]
                ]
            }, {
                fullWidth: true,
                chartPadding: {
                    right: 40
                }
            });

        });
</script>

 

데이터 형식 - Bar/Line

{
        labels: ['Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday'],    //labels : ['x축값', 'x축값']
        series: [
            [12, 9, 7, 8, 5],    //[y축값,y축값]
            [2, 1, 3.5, 7, 3],    //새로운 선의 y축값
            [1, 3, 4, 5, 6]
        ]
}

 

데이터 형식 - Pie

var data = {
            series: [5, 3, 4]
        };

 

peity.js (https://benpickles.github.io/peity/)

<span class="line">5,3,9,6,5,9,7,3,5,2</span>

<script type="text/javascript">
          $(".line").peity("line")
</script>

 

 

rickshaw.js (https://tech.shutterstock.com/rickshaw/)

<link type="text/css" rel="stylesheet" href="../rickshaw.min.css">
<script src="../vendor/d3.min.js"></script>
<script src="../vendor/d3.layout.min.js"></script>
<script src="../rickshaw.min.js"></script>

<div id="chart_container">
        <div id="y_axis"></div>
        <div id="chart"></div>
</div>

<script>
var graph = new Rickshaw.Graph( {
        element: document.querySelector("#chart"),
        width: 540,
        height: 240,
        series: [ {
                data: [ { x: -1893456000, y: 92228531 }, { x: -1577923200, y: 106021568 }, { x: -1262304000, y: 123202660 }, { x: -946771200, y: 132165129 }, { x: -631152000, y: 151325798 }, { x: -315619200, y: 179323175 }, { x: 0, y: 203211926 }, { x: 315532800, y: 226545805 }, { x: 631152000, y: 248709873 }, { x: 946684800, y: 281421906 }, { x: 1262304000, y: 308745538 } ], 
                color: 'steelblue'
        } ]
} );

var x_axis = new Rickshaw.Graph.Axis.Time( { graph: graph } );

var y_axis = new Rickshaw.Graph.Axis.Y( {
        graph: graph,
        orientation: 'left',
        tickFormat: Rickshaw.Fixtures.Number.formatKMBT,
        element: document.getElementById('y_axis'),
} );

graph.render();
</script>

 

 

sparkline.js (https://omnipotent.net/jquery.sparkline/)

 

<script type="text/javascript" src="jquery-1.7.2.js"></script>
<script type="text/javascript" src="jquery.sparkline.js"></script>

<span class="sparklines">1,5,3,4,5,4,3,5,1</span>
<span id="ticker">Loading..</span>

<script type="text/javascript">
    $('.sparklines').sparkline('html');
    $('#ticker').sparkline([1,5,3,4,5,4,3,5,1]);
</script>