'javascript/jQuery' 카테고리의 글 목록

'javascript/jQuery'에 해당되는 글 2건

2013.07.31 jQuery moris.js(free-license)
2013.07.31 chart 관련 사이트모음 1

2013. 7. 31. 16:01

jQuery moris.js(free-license)

javascript/jQuery

examples.zip

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

jQuery 차트를 만드는 방법

1. 추가

<link rel="stylesheet" href="http://cdn.oesmith.co.uk/morris-0.4.3.min.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="http://cdn.oesmith.co.uk/morris-0.4.3.min.js"></script>

2. <div>

1	`<div id="myfirstchart"` `style="height: 250px;"></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);