target이 변경되어 그래프를 다시 그리는데 legend와 tooltip을 어떻게 update해야할지 모르겠습니다.

[jthreep]

안녕하십니까 jui를 사용중에 그래프를 그리는게 잘 안되어 이렇게 질문을 올립니다. 화면을 넣어 설명을 드리겠습니다. 위의 화면은 초기에 조회된 화면입니다 선택박스에 192.168.150.116이라는 초기값을 불러와 그래프를 그립니다. 이 화면은 192.168.150.117이라는 값을 선택해서 조회된 그래프 입니다. 여기서 두가지가 문제가 있습니다.

1. 그래프의 legend가 여전히 192.168.150.116으로 되어있습니다.
2. 그래프에 마우스를 올려도 값이 나오지 않습니다.

제 생각에는 widget의 legend와 툴팁을 업데이트 해줘야 하는데 그부분이 잘못된것 같습니다. 아래 그래프 업데이트 부분 소스를 넣어놨습니다. 또한 그래프를 초기에 그릴때 셋팅하는 부분도 같이 첨부했습니다.

//////////////////////////////////////////그래프 업데이트 부분////////////////////////////////////////// var netdomain = [ startClk, endClk ]; //제대로된 시간이 들어가있음 var netYdomain = [ 0, netYmax ]; //계산된 max y값이 들어가있음

//brush 업데이트 //netTarget에는 셀렉트박스에서 선택한 값(192.168.150.117)이 들어가 있습니다. hostNetChart.addBrush({type : "line", target : netTarget, animate : true}); hostNetChart.addBrush({type : "scatter", target : netTarget, hide : true}); hostNetChart.updateBrush(0, {type : "line", target : netTarget, animate : true}); hostNetChart.updateBrush(0, {type : "scatter", target : netTarget, hide : true});

//위젯 업데이트 hostNetChart.addWidget({type : "legend"}); hostNetChart.addWidget({type : "tooltip", brush : 1}); hostNetChart.updateWidget(0, {type : "legend"}); hostNetChart.updateWidget(0, {type : "tooltip", brush : 1}); //x,y축 업데이트 hostNetChart.axis(0).updateGrid("x", { domain : netdomain }); hostNetChart.axis(0).updateGrid("y", { domain : netYdomain }); //그래프 데이터 업데이트 및 그리기 //netData에는 시간에 맞는 데이터가 들어가있고 target명과 값이 들어가있습니다. //초기에 조회할때 가져오는 데이터와 동일함을 확인 hostNetChart.axis(0).update(netData); hostNetChart.render();

//////////////////////////////////////////그래프 셋팅부분////////////////////////////////////////// jui.ready([ "chart.builder" ], function(builder) { var hostNetChart = builder("#hostNetChart", { axis : [ { x : { type : "date", domain : [ netstart, netend ], interval : 1000 60 60 * 2, // 2시간 format : "HH시", key : "date", line : true }, y : { type : "range", domain : [ 0, netYmax ], step : 4, line : true }, data : netData //데이터 셋팅 } ], brush : [ { type : "line", target : netTarget, animate : true }, { type : "scatter", target : netTarget, hide : true } ],

widget : [ {
  type : "legend",
  filter : true
}, {
  type : "tooltip",
  brush : 1
} ]

}); });

//데이터 렌더링 hostNetChart.axis(0).update(netData); hostNetChart.render();

마지막으로 궁금한 점이 있습니다. 그래프의 선택박스를 처음 선택할때는 core.js에서 오류가 발생하지 않지만 두번째 선택하여 조회할때는 core.js에서 오류가 발생합니다. 제 생각에는 widget의 legend와 tooltip을 제대로 셋팅하지 않은 상태에서 그래프 업데이트에 updateWidget 을하여서 그런게 아닌가 싶기도 하고 아니면 오류가 brush 의 hide옵션이 잘못 됐다고 나온걸 보니 updateBrush의 옵션이 잘못된건가 싶기도 합니다. 혹시 몰라서 오류사진 첨부합니다.

[easylogic]

render 함수 실행하실 때

render(true) 로 해주세요.

[jthreep]

@easylogic 갑사합니다! render(true)로 하여 legend는 변경이 됐습니다. 그런데 제가 마지막에 올린 사진의 오류(선택박스를 두번째 조회시 옵션에러)는 계속 발생하네요 ㅠ

hostNetChart.addBrush({type : "scatter", target : netTarget, hide : true}); hostNetChart.updateBrush(0, {type : "scatter", target : netTarget, hide : true});

이부분에서 하이드 속성이 옵션이 아니라고 나오는데... 저 오류가 나서 그래프도 제대로 안나오네요 ㅠ 또한 hide = true를 없애고 해도 그래프는 나오나 툴팁은 안나옵니다 ㅠ 툴팁을 나오게 하고싶은데 다른 방법이 있다면 알려주심 감사하겠습니다!

[easylogic]

//위젯 업데이트
hostNetChart.addWidget({type : "legend"});
hostNetChart.addWidget({type : "tooltip", brush : 1});
hostNetChart.updateWidget(0, {type : "legend"});
hostNetChart.updateWidget(0, {type : "tooltip", brush : 1});

위젯 설정 하실 때 순서가 잘 못 된 듯 합니다.

hostNetChart.updateWidget(/* 0 번째는 이미  legend 가 들어가있어서 */0, {type : "tooltip", brush : 1});

아래 처럼 하셔야 합니다.

hostNetChart.updateWidget(/* 1번으로 */ 1 , {type : "tooltip", brush : 1});

updateWidget 에 첫번째는 위젯은 순서입니다. 0 부터 시작을 하구여. 내부는 배열로 되어 있어서 0, 1, 2, 이런 형태로 설정합니다.

그 순서를 맞춰주시면 살아날 듯 합니다. 지금은 모두 0 으로 다 들어가버려서

아마도 위젯이 하나로 종속되버렸을 수도 있습니다.

[jthreep]

@easylogic 자꾸 질문드려 죄송합니다만 아직 해결이 안되서 또한번 올려봅니다.. 현재 제가 구현한 그래프입니다. 선택박스를 두어서 처음에 조회할떄는 맨처음 항목을 조회하여 그래프를 그립니다.(그래프 그리는것은 맨처음올린 그래프 셋팅부분에 있습니다.) 그러나 선택박스에서 다른 항목을 조회하면 두번째 그림처럼 툴팁이 나오지 않습니다... 위에서 말씀해주신대로 위젯을 selboxidx로 하여 선택박스 인댁스에 맞게 넣어봤지만 증상은 여전히 해결이 안되네요... 아래 그림과 소스를 첨부하였습니다. 한번 확인해 주시면 감사하겠습니다!

hostNetChart.addBrush({type : "line", target : netTarget, animate : true});
    hostNetChart.addBrush({type : "scatter", target : netTarget, hide : true});
    hostNetChart.updateBrush(0, {type : "line", target : netTarget, animate : true});
    hostNetChart.updateBrush(0, {type : "scatter", target : netTarget, hide : true});
    hostNetChart.addWidget({type : "legend"});
    hostNetChart.addWidget({type : "tooltip", brush : 1});
    hostNetChart.updateWidget(selboxidx, {type : "legend"});
    hostNetChart.updateWidget(selboxidx, {type : "tooltip", brush : 1});
    hostNetChart.axis(0).updateGrid("x", {
      domain : netdomain
    });
    hostNetChart.axis(0).updateGrid("y", {
      domain : netYdomain
    });
    hostNetChart.axis(0).update(netData);
    hostNetChart.render(true);

[easylogic]

@seogi1004 님 구조 한번 맞춰주세요.

[easylogic]

@jthreep 아래처럼 해보시죠.

updateBrush, updateWidget 모두 해당 객체를 지정해야합니다. 내부적으로 배열로 되어 있고 0 베이스 인덱스로 접근할 수 있습니다.

hostNetChart.addBrush({type : "line", target : netTarget, animate : true});
    hostNetChart.addBrush({type : "scatter", target : netTarget, hide : true});
    hostNetChart.updateBrush(0, {type : "line", target : netTarget, animate : true});
    // 여기 
    hostNetChart.updateBrush(1, {type : "scatter", target : netTarget, hide : true});
    hostNetChart.addWidget({type : "legend"});
    hostNetChart.addWidget({type : "tooltip", brush : 1});
    //여기 
    hostNetChart.updateWidget(0, {type : "legend"});
   // 여기 
    hostNetChart.updateWidget(1, {type : "tooltip", brush : 1});
    hostNetChart.axis(0).updateGrid("x", {
      domain : netdomain
    });
    hostNetChart.axis(0).updateGrid("y", {
      domain : netYdomain
    });
    hostNetChart.axis(0).update(netData);
    hostNetChart.render(true);

[jthreep]

@easylogic 알려주신 방법으로 했는데 툴팁이 나오지 않네요... 저렇게 하고나서 바뀐점이 하나 있습니다.

원래 화면이 로딩되어서 첫번째 그래프가 나올때는 툴팁이 나옵니다. 이후 선택박스를 다른것으로 선택하면 툴팁이 나오지 않죠 여기까지는 똑같습니다. 근데 기존에는 첫번째꺼를 선택하면 다시 툴팁이 나왔지만 지금은 첫번째로 돌아가도 툴팁이 나오지 않네요 그래서 모든 그래프에 툴팁이 나오지 않게 됩니다. 기존에는 첫번째로 돌아가면 이상하게 그것만 툴팁이 다시 나왔었거든요..

또한 선택박스에서 다른항목들을 선택을 하면 에러가 나지 않는데 첫번째 항목을 선택후 다른것들을 다시 선택하면 제가 맨처음에 올렸던 hide 옵션 에러가 납니다. (ex.화면로딩 첫번째 그래프 보여짐(툴팁나옴) -> 선택박스 세번쨰 선택(툴팁X) -> 선택박스 다섯번쨰 선택(툴팁X) -> 선택박스 네번쨰 선택(툴팁X) -> 선택박스 '첫번쨰' 선택(툴팁X) -> 이후 둘, 셋, 넷, 다섯번쨰 어떤 걸 선택하든 hide옵션에러 발생)

//첫화면 로딩시

//선택박스 다른것 선택시

//다시 첫화면 로딩에 선택된 항목 선택시 (기존)

//다시 첫화면 로딩에 선택된 항목 선택시 (변경후)

[seogi1004]

답변이 늦어서 죄송합니다. 음... format 옵션으로 풀 수 있을 것 같습니다.

line은 data가 null로 오지만 target은 넘어 옵니다. scatter를 히든으로 사용하시니 data도 넘어옵니다.

포맷 콜백에서 받을 수 있는 data와 key(target)으로 적절하게 분기해서 해당 ip를 노출하게 바인딩해주면 될 것 같습니다. ip 목록은 글로벌 맵으로 가지고 있으면 되겠죠?

{ type: "tooltip", format: function(data, key) { console.log(key) return { key: key, value: data[key] }; } }