티스토리 뷰

javascript/chart graph

javascript canvasJS graph chart

nabaro 2016. 12. 7. 18:52

막대그래프를 찾았다


막대그래프 옆으로 누우면 bar


막대그래프가 세로로 서면 column


검색 방법부터 공부가 필요하다.


거기에 stack 을 넣어서 


합쳐서 stack column 그래프를 찾았다.


dygraph 를 이용해서 그래프를 실시간으로 그려주고 있었는데...


막대에 스택이 없다....


그래서 새로운 그래프 canvasJS 


stacked column 100 그래프다 


쓸만하다 안느려진다 데이터 넣는게 쫌 짜증나지만 적응하면 쉽다.


예제소스는 아래에... 실시간이라지만... 별거 없다는 ㅠㅠ 


js 파일은 http://canvasjs.com/docs/charts/chart-types/html5-stacked-column-100-chart/

이쪽에서 찾아보길 권장한다. 난 예제소스 받았다 그냥


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
<!DOCTYPE HTML>
<html>
<head>
    <script type="text/javascript">
    window.onload = function () {
 
      var dps = [{y: 10,label: "test"},{y: 10,label: "test1"},{y: 10,label: "test2"}];   //dataPoints. 
            var dps1 = [{y: 90,label: "test"},{y: 90,label: "test1"},{y: 90,label: "test2"}];   //dataPoints. 
      var chart = new CanvasJS.Chart("chartContainer",{
          title :{
              text: "Live Data"
          },
          axisX: {                        
              title: "Axis X Title"
          },
          axisY: {                        
              title: "Units"
          },
          data: [{
              type: "stackedColumn",
              dataPoints : dps
          },{
              type: "stackedColumn",
              dataPoints : dps1
          }]
      });
 
      chart.render();
      var minyVal;
      var yVal = 15;    
      var updateInterval = 1000;
 
      var updateChart = function () {
          
          
          yVal = randomRange(0, 100);
                minyVal = 100 - yVal;
          dps.push({y:yVal,label: "test"},{y:yVal,label: "test1"},{y:yVal,label: "test2"});
          dps1.push({y:minyVal,label: "test"},{y:yVal,label: "test1"},{y:yVal,label: "test2"});
          
          console.log(dps);
          
          dps.shift();    
          dps1.shift();
          dps.shift();    
          dps1.shift();
          dps.shift();    
          dps1.shift();
                    
                console.log(1);
                
          chart.render();        
 
    // update chart after specified time. 
 
};
function randomRange(n1, n2) {
      return Math.floor( (Math.random() * (n2 - n1 + 1)) + n1 );
}
setInterval(function(){updateChart()}, updateInterval); 
}
    </script>
    <script src="../../canvasjs.min.js"></script>
    <title>CanvasJS Example</title>
</head>
<body>
    <div id="chartContainer" style="height: 400px; width: 100%;">
    </div>
</body>
</html>
cs


저작자표시

'javascript > chart graph' 카테고리의 다른 글

flot 그래프를 그려보았다.  (0) 2016.10.04
공유하기 링크
댓글