jui range line 그래프 modal에서 그리기 오류 문의드립니다.

[jthreep]

jui 그래프 사용하다가 문제점이 있어서 문의 드립니다. 웹페이지에서 버튼클릭을하여 modal창을 띄우면 거기에 그래프를 그리는 작업을 하고 있습니다.

그런데 창이 띄워지면 처음에 그래프가 한번에 그려지지 않고 아래 그림처럼 x,y축 값만 이상하게 겹쳐있는것처럼 보이고 다음에 데이터를 조회해오면 그때 제대로된 그래프가 나옵니다. (현재 값을 30초에 한번씩 다시 가져와서 refresh하고 있음)

그래서 그래프를 그리자마자 데이터를 넣었는데도 마찬가지 현상이 일어나는데 해결을 할수 있을까 싶어서 문의 드립니다. 혹시 몰라서 js 소스 첨부합니다.

var data1 = [];
var cpudata=[];
var hstname=null;
var yMax1;

var time = jui.include('util.time');
var start = new Date();
var end = new Date();
start.setHours(start.getHours()-1);



function realtimeHost(hostname){
  data1 = [];
    hstname = hostname;
      $.ajax({
        type : "GET",
        url : "/viewing/realtime?systemName="+hostname +"&viewtype=cpu&indextype=6&systemType=HostSystem&searchNum=1",
        dataType : "json",
        contentType : "application/x-www-form-urlencoded; charset=utf-8",
        async: false,
        success : function(data1){
       
          var maxnum=0;
          var curnum=0;
          var index=0;
          var yvalue=1;
          var tempnum=0;

          for (var key in data1) { //최대값
            cpudata[key] = data1[key];
            curnum = cpudata[key];
            if(key==0){
              maxnum=curnum;
            }
            if(Number(curnum)>Number(maxnum)){
              maxnum=curnum;
            }
          }
          tempnum=maxnum;

          while(tempnum>0){//최대값 자리수
          tempnum = parseInt(tempnum/10);
            index++;
          }

          for(var i=0;i<index-1; i++){//최대값 + 자리수
            yvalue *= 10;
            maxnum = parseInt(maxnum/10);
          }

          yMax1 = yvalue + maxnum*yvalue; //y축 max값

        },
    });
      
}

jui.ready([ "chart.builder" ], function (builder) {
   var data1 = [];
  
   var cpuchart = builder("#cpuchartHost", {

    axis : [{
      x : {
        type : "date",
        domain : [ start, end ],
        interval : 1000 * 60 * 5,
        format : "hh시mm분",
          key: "date",
          line : true

      },
      y : {
        type : "range",
        domain : function(a) {
          return yMax1;
        },
        step : 5,
        line : true
      },
      data : data1
    }],
    brush : [{
      type : "line",
      target : [ "MHz" ],
    animate : true
    },{ type : "scatter",
        hide : true}],

    widget : [{
    type : "tooltip"
    },
    {
      type : "tooltip", brush : 1
    }]
   });

   realtimeHost(hstname);

     start = new Date();
     end = new Date();
     start.setHours(start.getHours()-1);

     var domain = [ start, end ];
     var seconds1 = 0;
     for(var j=0 ; j<cpudata.length ; j++){
       data1.push({
         date : time.add(start, time.seconds, seconds1),
         MHz : cpudata[j]
       });
       seconds1 += 20;
     }
     cpuchart.axis(0).updateGrid("x",{domain : domain});
     cpuchart.axis(0).update(data1);
     cpuchart.render();

  setInterval(function(){
     realtimeHost(hstname);
     start = new Date();
     end = new Date();
     start.setHours(start.getHours()-1);

     var domainx = [ start, end ];
     var domainy1 = function(b) {
         return yMax1;
     };
     var domainy2 = function(b) {
         return yMax2;
     };
     var domainy3 = function(b) {
         return yMax3;
     };
     var domainy4 = [0, yMax4];
     var seconds1 = 0;

     data1 = [];
     for(var j=0 ; j<cpudata.length ; j++){
       data1.push({
         date : time.add(start, time.seconds, seconds1),
         MHz : cpudata[j]
       });
       seconds1 +=20;
     }
     cpuchart.axis(0).updateGrid("x",{domain : domainx});
     cpuchart.axis(0).updateGrid("y",{domain : domainy1});
     cpuchart.axis(0).update(data1);
     cpuchart.render();

     var seconds2=0;
     data2 = [];
     for(var j=0 ; j<memdata.length ; j++){
       data2.push({
         date : time.add(start, time.seconds, seconds2),
         MByte : memdata[j]
       });
       seconds2 +=20;
     }

  },30000);

});

[easylogic]

@jthreep

차트가 그려질때 부모 element 가 width, height 가지지 않으면 정상적으로 바로 그려지지 않습니다.

그렇게 할려면 chart.builder 에서 width, height 속성을 주면 되구여.

그게 아니라 modal 에 꽉찬 차트를 그리고 싶으시면

modal 에 show 이벤트 같은게 불려질때 chart.render() 함수를 호출해주시면 됩니다.