jQuery moris.js(free-license)

examples.zip

출처 : http://www.oesmith.co.uk/morris.js/index.html

jQuery 차트를 만드는 방법

1. 추가

2. <div>

3. <script>

var nReloads = 0;
function data(offset) {
  var ret = [];
  for (var x = 0; x <= 360; x += 10) {
    var v = (offset + x) % 360;
    ret.push({
      x: x,
      y: Math.sin(Math.PI * v / 180).toFixed(4),
      z: Math.cos(Math.PI * v / 180).toFixed(4)
    });
  }
  return ret;
}
var graph = Morris.Line({
    element: 'graph',
    data: data(0),
    xkey: 'x',
    ykeys: ['y', 'z'],
    labels: ['sin()', 'cos()'],
    parseTime: false,
    ymin: -1.0,
    ymax: 1.0,
    hideHover: true
});
function update() {
  nReloads++;
  graph.setData(data(5 * nReloads));
  $('#reloadStatus').text(nReloads + ' reloads');
}
setInterval(update, 200);

4. 실행화면

기본적인 꺽은선 그래프이다.

추가적인 그래프를 원할 경우 examples.zip의 samaple파일을 확인해보자.