realtime 차트 사용시 tooltip 사용문제... & <path> attribute d: Expected number, "M0,NaN L7.142857142…에러 문제

[Huntak]

1번 문제. realtime 차트 사용시에는 tooltip을 사용하면 키는 출력이되는데 값을 출력하지 못합니다.... format으로 해서 key, value로 나눠서 찍어봐도 undefined가 뜨네요 왜그런가요 ? 아래에 소스를 첨부합니다.

                var data = 데이터를 ajax로 얻어옴;

        console.log(data);

        var chart = builder("#result6", {
            axis : [{
                x : {
                    type : "dateblock",
                    domain : "_time",
                    realtime : "minutes",
                    interval : 2,
                    line : "solid",
                    format : "HH:mm"
                },
                y : {
                    type : "range",
                    domain : [0, 100],
                    step : 2,
                    line : "solid"
                },
                data : data
            }],
            brush : [{
                type : "area",
                target : ["kernel", "user"],
                colors : [4, 2]
            },{
                type : "line",
                target : ["kernel", "user"],
                display : "max",
                colors : [4, 2]
            }],
            style: {
                titleFontSize: "13px",
                titleFontWeight: "bold"
            },
            widget : [{
                type : "title",
                text : "최근 10분 CPU 사용률 (5초 단위)"
            }, {
                type : "legend",
                filter : true,
                brush : [0, 1],
                brushSync : true
            },{
                type : "tooltip",
                orient : "right",
            brush : [0, 1],
            format : function(de, ke) {
                console.log(de);
                return de[ke]
            }
            }]
        });

        window.interval = setInterval(function(e) {
            chart.axis(0).update(getData(sysmstssno, queryNum));
            chart.render(true);
        }, 5000);

2번 문제. 값에는 [{speed : 0, _time : 1496196217520}, {speed : 0, _time : 1496196222744}, ......... ] 이런식으로 들어가 있고 realtime 차트를 사용해서 area 차트를 그렸는데 speed에 0이 아닌 값이 하나라도 있을때는 에러가 안뜨는데 모든 speed의 값이 0이면 attribute d: Expected number, "M0,NaN L7.142857142…... 쭉 하면서 에러가 뜨네요 왜그런가요 ? 아래는 소스입니다.

                 var data = [{speed : 0, _time : 1496196217520}, {speed : 0, _time : 1496196222744}, ......... ];

        console.log(data);

        var chart = builder("#result2", {
            axis : [{
                x : {
                    type : "dateblock",
                    domain : "_time",
                    realtime : "minutes",
                    interval : 1,
                    line : "solid",
                    format : "HH:mm"
                },
                y : {
                    type : "range",
                    domain : "speed",
                    unit : 5,
                    line : "solid"
                },
                data : data
            }],
            brush : [{
                type : "area",
                target : "speed",
            }],
            style: {
                titleFontSize: "13px",
                titleFontWeight: "bold"
            },
            widget : [{
                type : "title",
                text : "최근 5분 수집 추이(5초 단위)"
            }, {
                type : "legend",
            }, {
                type : "tooltip"
            }]
        });

        window.interval = setInterval(function(e) {
            chart.axis(0).update(getData(sysmstssno, queryNum));
            chart.render(true);
        }, 5000);

[easylogic]

2번의 경우는 y 축 max 을 값을 지정을 못해서 그렇습니다.

max 값을 측정 해야하는데 모두 0인 상황이라 , 현재는 임의로 max 를 지정해주지는 않는 상태입니다.

도메인을 지정하실 때 아래와 같이 하시면 특정 필드가 값이 있어야 하는데 현재는 없는 상태구여.

domain : "speed",

아래와 같이 바꾸실 수 있습니다.

domain : function (data) {
    return [data.speed, 100];
}

이렇게 두시면 speed 와 100 중에 큰 값 기준으로 max 를 지정하실 수 있어요.

[Huntak]

아하..... 감사합니다 !! 한가지만 더 여쭤볼게요~~ 그럼 domain에 맞게 unit도 2가지로 지정을 할 수 있나요 ? speed가 10까지이면 unit 2로, 숫자 100이면 unit 20으로 지정하고 싶은데요... step을 5로 가져가게되면 딱 떨어지는 숫자가 아닐때는 조금 기준점이 애매하게 나오더라구요...

[easylogic]

@Huntak 네 맞습니다. 살짝 애매하긴 하죠..

그래서 저희가 옵션이 2개 인데요.

하나는 unit 으로 완전히 영역을 고정시키는거고.

하나는 step 으로 영역의 분할 부분만 고정시키는 기능이 있습니다.

예를 들어 min - max 사이에 어떤값이 들어 오더라도 step 3 이면 딱 3칸으로 선이 생깁니다.

http://blog.jui.io/?p=538

여기 마지막에 보시면 unit 이랑 step 에 대한 설명이 있습니다.

[easylogic]

코드를 보니깐 ㅋ 예전에 unit 도 function 으로 가변적으로 할 수 있게 구성을 해놨네요.

maxSpeed 를 데이타 로드 시점에 구성해서 변수로 가지고 계시면 될 것 같아요.

unit : function (grid) {
   var maxSpeed = xxx;

   if (maxSpeed <= 10) {
        return 2; 
    } else if (maxSpeed <= 100) {
        return 5; 
    }
}

[Huntak]

아.... 혹시 그럼 데이터 로드 시점에서 domain 2가지중 어떤것이 설정되었는지를 가져오라는 말씀이신가요 ? 그럼 unit : function (grid) 부분의 grid부분에서 domain이 있던데 거기서 추출하면 되나요 ? 조금 데이터가 많아서 어디서 추출해야 할지 잘 감이 안오네요... 데이터 로드 시점에서 domain 값이 speed값 또는 100중에 어떤값이 리턴되었는지 어떻게 추출해 낼수 있을까요 .....?

[Huntak]

질문이 조금많네요.... 한가지만 더 덧붙여서 질문을 드리면... realtime 차트를 사용중에 아래처럼 적용을 하면 y축이 domain값에 따라 변하지는 않던데 그것도 업데이트를 시켜주는 방법이 있을까요 ....?

window.interval = setInterval(function(e) {
            chart.axis(0).update(getData(sysmstssno, queryNum));
            chart.render(true);
        }, 5000);

[easylogic]

유닛 설정 하신게 y 축이라 y축에 쓸 domain 인 speed에 대한 것만 맥스 값을 구하시면 될 것 같아요

[easylogic]

아래와 같이 고쳐보시죠.

domain : 'speed' 를

domain: function (data) {
    return [data.speed, 100];   // 기본 max 를 넣어주세요. 
},
unit : function () {
   if (maxSpeed <= 10) {
        return 2; 
    } else if (maxSpeed <= 100) {
        return 5; 
    }
}

차트 다시 그릴 때는

setInterval (function() {
var data = getData(sysmstssno, queryNum);
maxSpeed = getMaxSpeed(data);
chart.axis(0).update(data);
chart.render(true);
} , 1000);

[Huntak]

정말 감사합니다 ^^ domain이랑 unit function에 좀더 추가해서 만들어서 더 세세하게 만들었어요. 조금 돌아간 감이 없지않아 있지만 ... 엄청 헤매고 있었는데 알려주셔서 덕분에 더욱 깔끔하게 만들었어요 ~~ 감사합니다 ~~^^

[easylogic]

해결 되셨다니 다행입니다. ^^

참고로 차트 builder 정의 하실 때

render : false 를 하시면 최초에 그리지 않고 chart.render(true) 에만 그립니다.

성능에 좀 더 좋을 수 있습니다.