Storage

Chart.js로 JSP 차트띄우기 (버전주의 Chart.min.js - 1.0.2)

chartJS를 가지고 jsp에 차트를 띄운 예제를 공유해드리겠습니다.

일단 아래부분에 스크립트를 head안쪽이나 스크립트있는쪽에 넣어서 import해주세요.

그리고 자바스크립트부분에 아래 barChart() / lineChart() 두가지 함수가있는데

barChart는 막대모양차트이고 lineChart는 선그래프차트입니다.

data 안쪽에 labels: [] 이안에는 하단에 들어갈 데이터이며, labels와 datasets - data와 갯수가 동일해야합니다.

사진보시면 대충 데이터가 어떤곳에 쓰이는지 감이 오실거라 믿습니다.

그밖에 datasets안쪽에 label아래는 차트의 색상값을 설정해줄수있습니다.

설정이 다됬으면

var ctx = document.getElementById("barCanvas").getContext("2d"); 

var options = { };

var barChart = new Chart(ctx).Bar(data, options);

이부분이 canvas의 ID값을 가지고 캔버스에 2d차트를 띄워주는 부분입니다.

옵션이 필요하시면 옵션값을 주면됩니다.

위와같이 new Chart로 각 ctx / data / option 등등 넣어서 띄워주시면됩니다.

JSP - html부분에서 <canvas>태그에 차트가 그려지며, 

아래소스보시면 아시겠지만태그에 높이와 너비등을 설정해줄수있습니다. 

자세한 옵션의 함수나 그래프유형 스크립트 및 파일등이 필요하시면 

chartJS공식홈페이지 : http://www.chartjs.org/samples/latest/ 

공식홈페이지를 이용하시면 될것같습니다.

SCRIPT

<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script>

JSP - 자바스크립트

// 막대차트입니다.

function barChart(){

var data = {

labels: ["09시", "10시", "11시", "12시", "13시", "14시", "15시", "16시", "17시", "18시", "19시", "20시", "21시", "22시"],

datasets: [

{

label: "",

fillColor: "rgba(150,200,250,0.5)",

strokeColor: "rgba(150,200,250,0.8)",

highlightFill: "rgba(150,200,250,0.75)",

highlightStroke: "rgba(150,200,250,1)",

data: [65, 59, 80, 81, 56, 55, 30, 100, 120, 50, 11, 40, 70, 120]

}

]

};

    var ctx = document.getElementById("barCanvas").getContext("2d");

    var options = { };

    var barChart = new Chart(ctx).Bar(data, options);

}

//선 차트입니다.

function lineChart(){

var data = {

        labels: ["월","화","수","목","금","토","일"],

        datasets: [

            {

                label: "",

                fillColor: "rgba(220,220,220,0.2)",

                strokeColor: "rgba(220,220,220,1)",

                pointColor: "rgba(220,220,220,1)",

                pointStrokeColor: "#fff",

                pointHighlightFill: "#fff",

                pointHighlightStroke: "rgba(220,220,220,1)",

                data: [2, 3, 5, 7, 11, 13, 17]

            },

            {

                label: "",

                fillColor: "rgba(151,187,205,0.2)",

                strokeColor: "rgba(151,187,205,1)",

                pointColor: "rgba(151,187,205,1)",

                pointStrokeColor: "#fff",

                pointHighlightFill: "#fff",

                pointHighlightStroke: "rgba(151,187,205,1)",

                data: [0, 1, 1, 2, 3, 5, 8]

            }

        ]

    };

    var ctx = document.getElementById("lineCanvas").getContext("2d");

    var options = { };

    var lineChart = new Chart(ctx).Line(data, options);

}

JSP - HTML

<-- 막대차트입니다. -->

<div class="graphBox">

<canvas id="barCanvas" width="384" height="210"></canvas>

</div>

<-- 선차트입니다. -->

<div class="graphBox">

<canvas id="lineCanvas" width="384" height="210"></canvas>

</div>

* strokeColor - borderColor 변경됨

* type 선언이 달라짐 아래와같이 type선언

var ctx = document.getElementById(elementId).getContext('2d');

new Chart(ctx, {

    type: 'bar',

    data: {

        labels: labels,

        datasets: [{

            label: label,

            data: data,

            backgroundColor: 'rgba(54, 162, 235, 0.2)',

            borderColor: 'rgba(54, 162, 235, 1)',

            borderWidth: 1

        }]

    },

    options: {

        scales: { yAxes: [{ ticks: { beginAtZero:true } }] }   // 데이터값 시작을 0부터시작

    }

});

※ lables 와 data에 request값 넣기

//차트 값 생성

var labels = new Array();

var data = new Array();

<c:forEach items="${resultList}" var="result" >

var json = new Object();

labels.push("${result.month}");

data.push("${result.monthVal}");

</c:forEach>

c:forEach 리스트 합계구하기

JSTL에서 request로 받아온 값의 합계 구하는 예제를 작성하겠습니다.

1. total이라는 변수를 선언해줍니다.

변수명은 임의로 하시면됩니다. 저는 total이라는 변수에 List속 num값들의 합을 넣을려고합니다. 

forEach문위에 선언해줘야합니다. 안에 선언하면 forEach돌면서 0으로 계속 선언해버립니다.

2. </tr>태그 아래쪽에 다시 선언해주고 value값에 total + 값을 더해줍니다.

3. forEach를 돌면서 total값에 num들의 합이 다 들어갔습니다.

c:out으로 value값 total을 불러오면 num의 합계를 불러옵니다.

JSP - HTML

<c:set var = "total" value = "0" />

<c:forEach var="result" items="${resultList}" varStatus="status">     

<tr>

<td>${result.num}<td>

</tr>

<c:set var= "total" value="${total + result.num}"/>

</c:forEach>

오라클, MYSQL 소수점 처리방법

오라클과 MYSQL의 소수점 처리방법에 대해 알아보겠습니다.

오라클 소수점 처리방법

소수점 내림
TRUNC (숫자컬럼, 자릿수)

EX) SELECT user_id, TRUNC( user_money , 2 ) FROM user_info  --  user_money를 소수점 둘째자리에서 내림하겠다.

소수점 반올림
ROUND(숫자컬럼, 자릿수)

EX) SELECT user_id, ROUND( user_money , 2 ) FROM user_info  --  user_money를 소수점 둘째자리에서 반올림하겠다.

MYSQL 소수점 처리방법

소수점 내림
TRUNCATE(숫자컬럼, 자릿수)

소수점 반올림
ROUND(숫자컬럼, 자릿수)

올림 (소수점자리상관없이 올림 / 정수)
CELING(숫자컬럼)

내림(소수점자리상관없이 림 / 정수)
FLOOR(숫자컬럼)