Rev. 2.73

linegraph.gif

PlotrPrototype을 이용한 도표엔진이다. canvas 태그 또는 SVG 엘리먼트를 통해 파이그래프, 라인그래프, 막대그래프를 가로 형태나 세로 형태로 실시간 생성하는 라이브러리를 배포하고 사용예제를 설명하고 있다. 파이어폭스와 사파리 그리고 오페라9 에서 지원하고 있는 canvas 태그를 인터넷 익스플로러에서도 가능하게 해주는 ExplorerCanvas 라이브러리를 포함한다.

<canvas id="plotr1" height="300" width="500"></canvas>
//our sample dataset
var dataset = {
  'myFirstDataset': [[0, 1], [1, 0.8], [2, 2.3], [3, 1.3], [4, 2.56]],
  'mySecondDataset': [[0, 0.5], [1, 0.5], [2, 2], [3, 1], [4, 1.4]],
  'myThirdDataset': [[0, 0.7], [1, 0.3], [2, 1.5], [3, 0.8], [4, 1.2]],
  'myFourthDataset': [[0, 0.1], [1, 0.1], [2, 0.1], [3, 0.1], [4, 1]]
};

//some basic options
var options = {
  padding: {left: 30, right: 0, top: 10, bottom: 30},
  backgroundColor: '#dbdbdb',
  colorScheme: 'red',
  xTicks: [
    {v:0, label:'day 1'},
    {v:1, label:'day 2'},
    {v:2, label:'day 3'},
    {v:3, label:'day 4'},
    {v:4, label:'day 5'}
  ]
};

//initialize a new LineChart with the options specified above
var line = new Plotr.LineChart('plotr',options);
//add the dataset
line.addDataset(dataset);

//render the linechart in the canvas element with ID 'plotr'
line.render();

Comments