굳헬로의 스팀 프로그램 일기!! 서른번째 #30 스팀코인판 조합의 임대량 페이지 정렬 기능 업그레이드!! 그리고 임대량 파이 차트 완성!!

in sct •  last year 

steem.jpg

즐거운 연휴 보내고 계신가요??

전 곧 울산 시골집으로 여행을 가려고 준비중인데... 느릿느릿... 꾸무정 꾸무정... 뒹굴뒹굴...

밖은 더워서 위험하니 더욱 느려지는것 같습니다.

그래도 가기전에 오늘의 프로그램 일기 남겨봅니다.


오늘 스팀코인판 원피스 조합에 엄청난 일들이 연속이네요.

원피스 조합에 거물 오치님이

30000 SCT 싸들고 들어오시고

갑자기 여기 저기서 불타는 임대 전쟁이...

그래서 오늘은 스팀코인판 조합의 임대 확인 페이지를 또 업그레이드 해보았습니다.

어제 만든 정렬 기능은

임대량으로 정렬하였을때, 맨 앞에 인덱스까지도 같이 변화가 되버려서 임대 순위를 확인하기 어려웠는데요.

오늘 드디어 정렬할때마다 인덱스를 새로 순서대로 뿌려주어 순위를 쉽게 알아볼 수 있도록 만들었습니다.

function myNewIndex() {
    var oTable = document.getElementById('tablesort');
    var rowLength = oTable.rows.length;

    for (i = 1; i < rowLength - 1; i++){
        var oCells = oTable.rows.item(i).cells;
         oCells.item(0).innerHTML = i;
    }            
}

정렬 기능이 호출될때마다 myNewIndex() 함수를 호출하여 인덱스를 차례대로 새로 출력해 주는 코드입니다.

처음엔 어렵게 접근해서 삽질을 좀 했는데, 몇번의 시행 착오 끝에 완성이 되었네요.

그리고 어제 @lovelyyeon 님께서 파이차트 이야기를 하셨는데

이 기능 전부터 한번 만들어 보고 싶었는데, 쉽지 않을 것 같아 미루고 있었는데, 이 참에 한번 도전해 보았습니다.

차트를 제공하는 많은 자바스크립트 코드들이 있던데, 쓸만한건 유료인데다, 사용이 쉽지가 않더라구요.

이것도 여러번의 시행착오 끝에 canvasjs 라는 자바스크립트 코드를 이용하여 만들수 있었네요.

<script type="text/javascript" src="https://canvasjs.com/assets/script/jquery.canvasjs.min.js"></script>

<script type="text/javascript">
window.onload = function() {

var options = {
    title: {
        text: "Website Traffic Source"
    },
    data: [{
            type: "pie",
            startAngle: 45,
            showInLegend: "true",
            legendText: "{label}",
            indexLabel: "{label} ({y})",
            yValueFormatString:"#,##0.#"%"",
            dataPoints: [
                { label: "Organic", y: 36 },
                { label: "Email Marketing", y: 31 },
                { label: "Referrals", y: 7 },
                { label: "Twitter", y: 7 },
                { label: "Facebook", y: 6 },
                { label: "Google", y: 10 },
                { label: "Others", y: 3 }
            ]
    }]
};
$("#chartContainer").CanvasJSChart(options);

}
</script>

이렇게 자바스크립트를 이용하여 dataPoints 에 값을 입력해주면

이렇게 자동으로 파이차트를 만들어 줍니다.

하지만 샘플 코드는 정적인 데이터를 이용하는거라, 활용을 하려면 데이터를 동적으로 넣어줘야만 합니다.

그래서 데이터베이스에서 가져온 데이터를 json 데이터로 생성하여dataPoints 에 넣어보았습니다.

http://heinz.wo.tc/sct2/#t1

그리고 실행을 하면

짜잔~ 원피스 team1p 조합의 조합원 임대량을 파이 차트로 확인할 수 있습니다.

깔끔하게 잘 나왔네요~

어려울 것 같았는데 상당히 쉽게 만들수 있었던 것 같습니다.

이렇게 또 많이 배우고 실력이 조금씩 향상되고 있는것 같네요.

그럼 다음 시간에 또 다른걸 공부하여 찾아오도록 하겠습니다.

신나는 불금 보내시고 행복한 주말 보내시길 바래요~


굳헬로의 스팀 프로그램 일기!! 시리즈

#1 굳헬로의 스팀 프로그램 일기!! 대망의 시작 #1 Python 프로그램 설치 && steemengine 파이썬 api 설치 && 간단한 steemengine 예제

#2 굳헬로의 스팀 프로그램 일기!! 그 두번째 #2 비주얼 스튜디오 코드 프로그램 설치 && 비주얼 스튜디오 코드를 사용하여 파이썬 다루기 && 간단한 steemengine 예제

#3 굳헬로의 스팀 프로그램 일기!! 세번째 #3 스팀엔진 토큰의 정보를 가져오는 findOne() && 누군가의 토큰 사용 내역을 가져오는 get_history() && JSON 데이터 출력

#4 굳헬로의 스팀 프로그램 일기!! 네번째 #4 steemengine Token 클래스 && Token.get_holder() && Token.get_market_info() && Token.get_buy_book() && Token.get_sell_book()

#5 굳헬로의 스팀 프로그램 일기!! 다섯번째 #5 스팀엔진 블록을 뒤져서 원하는 정보를 찾아보자!! 스팀엔진 마켓 거래 내역을 뽑아내는 예제

#6 굳헬로의 스팀 프로그램 일기!! 여섯번째 #6 파이썬으로 스팀엔진 토큰들을 클레임 해보자.

#7 굳헬로의 스팀 프로그램 일기!! 일곱번째 #7 프로그램 일기도 어느덧 1주일!! 드디어 첫 실전!! 무한 반복 작업 수행하기!! 이제 직접 클레임 하는 손맛은 잊자. 무한 반복 자동 클레임!!

#8 굳헬로의 스팀 프로그램 일기!! 여덟번째 #8 텔레그램 봇을 이용해 알림을 받아보자!! && 무한 반복 자동 클레임의 정보를 텔레그램으로 받아보기!!

#9 굳헬로의 스팀 프로그램 일기!! 아홉번째 #9 무한 반복 자동 클레임 업그레이드!! && 토큰 잔고 확인 && 토큰 전송과 토큰 전송 내역을 텔레그램으로 받아보기!!

#10 굳헬로의 스팀 프로그램 일기!! 열번째 #10 토큰 전송내역을 검사하고, 토큰을 전송 받으면 텔레그램으로 알림을 받아보기!!

#11 굳헬로의 스팀 프로그램 일기!! 열한번째 #11 스팀엔진 토큰 임대내역 추적. 쉽지 않았던 머나먼 여정 (1/2)

#12 굳헬로의 스팀 프로그램 일기!! 열두번째 #12 스팀엔진 토큰 임대내역 추적. 쉽지 않았던 머나먼 여정 (2/2) 스팀엔진 토큰 임대내역 추적 완료!!

#13 굳헬로의 스팀 프로그램 일기!! 열세번째 #13 웹 프로그래밍의 시작!! 파이썬을 이용하여 정보를 MySQL 데이터 베이스에 저장해보기!!

#14 굳헬로의 스팀 프로그램 일기!! 열네번째 #14 파이썬을 이용하여 데이터베이스로부터 정보를 가져오기 && 스팀코인판 3대풀 임대내역 데이터베이스 작업 완료!!

#15 굳헬로의 스팀 프로그램 일기!! 열다섯번째 #15 웹 프로그래밍을 이용하여 스팀코인판 3대조합의 임대 내역을 웹으로 확인해보자 !!

#16 굳헬로의 스팀 프로그램 일기!! 열여섯번째 #16 스팀엔진 최신 블록을 검사하여 필요한 정보를 데이터베이스에 저장하기!! 3대 조합의 임대내역을 최신으로 저장하기!!

#17 굳헬로의 스팀 프로그램 일기!! 열일곱번째 #17 조합들이 필요한 기능 드디어 완성!! 자동 클레임과 자동 분배 기능!!

#18 굳헬로의 스팀 프로그램 일기!! 열여덟번째 #18 스팀코인판 3대 조합의 임대내역과 실시간 예상 분배 금액을 웹으로 확인해보자!!

#19 굳헬로의 스팀 프로그램 일기!! 열아홉번째 #19 어제 만든 프로그램 업그레이드!! 개별 상세내역보기 기능 추가!!

#20 굳헬로의 스팀 프로그램 일기!! 어느덧 스물번째 #20 시행착오... 그리고 시련... 하지만 원사마님 덕분으로 엄청난 레벨업!! 감사합니다. 더욱 발전하겠습니다.

#21 굳헬로의 스팀 프로그램 일기!! 스물한번째 #21 레벨업을 했지만 또 다시 찾아온 시련!! 프로그램 결과와 블록체인에 기록된 결과가 다르다!! 어떻게 해야 할까...

#22 굳헬로의 스팀 프로그램 일기!! 스물두번째 #22 오늘부터 새로운 도전!! 자동 보팅 만들기!! 그 첫번째 스팀코인판의 소각글에 자동보팅을 해보자!! 첫번째 시간 (1/N)

#23 굳헬로의 스팀 프로그램 일기!! 스물세번째 #23 스팀코인판의 소각글의 정보를 가지고 와서 자동보팅을 해보자!! 그 두번째 시간 (2/N)

#24 굳헬로의 스팀 프로그램 일기!! 스물네번째 #24 스팀코인판 3대조합의 임대내역을 웹으로 확인해보자!! 업그레이드!!

#25 굳헬로의 스팀 프로그램 일기!! 스물다섯번째 #25 스팀코인판 3대조합의 임대내역을 웹으로 확인해보자!! 업그레이드 2!! 그리고 개발 예정 사항 공개!!

#26 굳헬로의 스팀 프로그램 일기!! 스물여섯번째 #26 드디어 첫 실전 가동 준비중... 스팀코인판 유니온 조합의 수익 자동분배 작업 완료중...

#27 굳헬로의 스팀 프로그램 일기!! 스물일곱번째 #27 스팀코인판 유니온 조합 첫 자동 분배 결과!! 그리고 보완!!

#28 굳헬로의 스팀 프로그램 일기!! 스물여덟번째 #28 스팀코인판 유니온 조합 자동 분배 프로그램의 결과를 웹으로 확인해 보자!!

#29 굳헬로의 스팀 프로그램 일기!! 스물아홉번째 #29 스팀코인판 유니온 조합 자동 분배 상황을 텔레그램으로 확인!! 임내 확인 페이지 정렬 기능 추가!!

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

즐거운 연휴 보내고 계신가요??

출근했는데요!! ㅋㅋㅋ
다들 임대수량이 어마어마하네요!! 부럽다...ㅠ

독거 형님도 함께 하시죠~

와 굳헬로님~ 이제 뽀로로 매트와 막걸리는 코딩과 개발로 뒤덮이고 있습니다. 하루만에 이렇게 만드시다니요.. 넘멋져요! ^^

ㅎㅎ 감사합니다~

뽀로로 매트와 막걸리 계속 이어나가려고 했는데... 이것도 재미나네요~ ㅎㅎ

Thank you for your continued support towards JJM. For each 1000 JJM you are holding, you can get an additional 1% of upvote. 10,000JJM would give you a 11% daily voting from the 700K SP virus707 account.

Hi @goodhello!

Your post was upvoted by @steem-ua, new Steem dApp, using UserAuthority for algorithmic post curation!
Your UA account score is currently 3.983 which ranks you at #4068 across all Steem accounts.
Your rank has not changed in the last three days.

In our last Algorithmic Curation Round, consisting of 114 contributions, your post is ranked at #52.

Evaluation of your UA score:
  • You're on the right track, try to gather more followers.
  • The readers like your work!
  • Good user engagement!

Feel free to join our @steem-ua Discord server