jQuery 기반의 무료 차트 라이브러리 소개

웹 개발자라면 데이터 시각화가 얼마나 중요한지 잘 알고 계실 겁니다. 데이터를 시각적으로 표현하면 사용자에게 더 직관적이고 이해하기 쉬운 정보를 제공할 수 있습니다. 오늘은 jQuery 기반의 무료 차트 라이브러리 몇 가지를 소개해드리겠습니다.

1. Chart.js

Chart.js는 HTML5 기반의 차트 라이브러리로, 간단하고 명확한 API를 제공하여 다양한 차트를 쉽게 만들 수 있습니다. 라인 차트, 바 차트, 파이 차트 등 다양한 차트 유형을 지원하며, 커스터마이징이 용이합니다. Chart.js는 특히 초보자에게 추천할 만한 라이브러리입니다. 또한, Chart.js는 반응형 디자인을 지원하여 다양한 디바이스에서 차트를 아름답게 표시할 수 있습니다. Chart.js의 문서화가 잘 되어 있어, 사용자가 쉽게 시작할 수 있습니다.

라이선스: MIT 라이선스
GitHub: Chart.js
웹사이트: Chart.js

2. jqPlot

jqPlot은 jQuery 기반의 차트 플러그인으로, 다양한 차트 유형을 지원합니다. 라인 차트, 바 차트, 파이 차트 등 기본적인 차트 외에도 캔들스틱 차트와 같은 고급 차트도 구현할 수 있습니다. 또한, 플러그인 구조로 되어 있어 필요에 따라 기능을 확장할 수 있습니다. jqPlot은 다양한 플러그인과 함께 사용할 수 있어, 차트의 기능을 더욱 풍부하게 만들 수 있습니다. 또한, jqPlot은 다양한 브라우저와 호환되며, 모바일 디바이스에서도 원활하게 작동합니다.

라이선스: MIT 라이선스
GitHub: jqPlot
웹사이트: jqPlot

3. Flot

Flot은 jQuery 기반의 차트 라이브러리로, 인터랙티브한 차트를 쉽게 만들 수 있습니다. 플러그인 구조로 되어 있어 다양한 기능을 추가할 수 있으며, 성능이 뛰어나 대용량 데이터 처리에도 적합합니다. Flot은 특히 실시간 데이터 시각화에 강점을 가지고 있습니다. 또한, Flot은 다양한 브라우저와 호환되며, 모바일 디바이스에서도 원활하게 작동합니다. Flot의 문서화가 잘 되어 있어, 사용자가 쉽게 시작할 수 있습니다.

라이선스: MIT 라이선스
GitHub: Flot
웹사이트: Flot

4. Highcharts (무료 버전)

Highcharts는 강력한 기능을 제공하는 차트 라이브러리로, 상업용으로는 유료이지만 비상업용 프로젝트에서는 무료로 사용할 수 있습니다. 다양한 차트 유형을 지원하며, 커스터마이징이 용이하고, 문서화가 잘 되어 있어 사용하기 편리합니다. Highcharts는 다양한 데이터 소스와 통합할 수 있어, 복잡한 데이터 시각화에도 적합합니다. 또한, Highcharts는 반응형 디자인을 지원하여 다양한 디바이스에서 차트를 아름답게 표시할 수 있습니다.

라이선스: 비상업용 프로젝트에 한해 무료
GitHub: Highcharts
웹사이트: Highcharts

5. Morris.js

Morris.js는 간단하고 사용하기 쉬운 jQuery 기반의 차트 라이브러리로, 라인 차트, 바 차트, 도넛 차트 등을 지원합니다. Morris.js는 특히 데이터 시각화의 미적 요소에 중점을 두어, 아름답고 직관적인 차트를 만들 수 있습니다. 또한, Morris.js는 JSON 데이터를 쉽게 처리할 수 있어, 동적인 데이터 시각화에 적합합니다. Morris.js의 문서화가 잘 되어 있어, 사용자가 쉽게 시작할 수 있습니다.

라이선스: MIT 라이선스
GitHub: Morris.js
웹사이트: Morris.js

6. Billboard.js

Billboard.js는 네이버에서 개발한 jQuery 기반의 차트 라이브러리로, 다양한 차트 유형을 지원하며, 사용하기 쉽고 강력한 기능을 제공합니다. Billboard.js는 특히 반응형 디자인을 지원하여 다양한 디바이스에서 차트를 아름답게 표시할 수 있습니다. 그러나 최신 버전에서는 Internet Explorer(IE)를 지원하지 않으므로, 다른 브라우저를 사용하는 것이 좋습니다.

라이선스: MIT 라이선스
GitHub: Billboard.js
웹사이트: Billboard.js

7. Dygraphs

Dygraphs는 대용량 데이터 시각화에 적합한 jQuery 기반의 차트 라이브러리입니다. 실시간 데이터 업데이트와 줌 기능을 지원하여, 복잡한 데이터를 효과적으로 시각화할 수 있습니다. Dygraphs는 특히 금융 데이터 시각화에 강점을 가지고 있습니다.

라이선스: MIT 라이선스
GitHub: Dygraphs
웹사이트: Dygraphs

8. Sparklines

Sparklines는 작은 크기의 차트를 생성하는 데 특화된 jQuery 기반의 차트 라이브러리입니다. 주로 데이터 테이블이나 텍스트 내에 삽입하여 간단한 데이터 시각화를 제공하는 데 사용됩니다. Sparklines는 다양한 차트 유형을 지원하며, 사용하기 쉽고 가벼운 라이브러리입니다.

라이선스: MIT 라이선스
GitHub: Sparklines
웹사이트: Sparklines

결론

jQuery 기반의 무료 차트 라이브러리는 다양하게 존재하며, 각 라이브러리마다 장단점이 있습니다. 프로젝트의 요구사항에 맞는 라이브러리를 선택하여 데이터를 효과적으로 시각화해보세요. 위에서 소개한 라이브러리들은 모두 사용하기 쉽고 강력한 기능을 제공하므로, 여러분의 웹 개발 프로젝트에 큰 도움이 될 것입니다.

ES6이다 뭐다... 모든브라우저에서 작성한 코드가 동작을 안하는 경우 난감한 상황이 발생 할 수 있다.

그중에 하나가 javascript 작성시 중복제거 코드를 작성했는데 IE에서 동작하지 않는 경우를 볼 수 있다.

findindex나 화살표함수(ES6) 문법을 사용하는 코드의 경우 문제가 될 수 있다.

아직까지 IE가 사라지지 않았으므로.. jQuery를 이용한 중복제거 함수를 작성해 보았다.

지난 시간에 이어서 자식/형제요소 및 조합 선택자를 알아보도록 하겠습니다.

• 자식요소 선택자 ( > )

selector로 하나의 요소를 지정한 후 > 선택자를 사용하여 자식요소를 지정할 수 있습니다.  1개의 자식요소가 선택되어 집니다. 

$("#myObject > div");

• 자식요소 선택자(복수)

selector로 하나의 요소를 지정한 후 띄워쓰기 후 해당 선택요소를 지정합니다.

$("#myObject div");

$("#myObject div").eq(0); // div tag 요소 중 첫번째 자식요소

• 형제요소 선택자

지정된 myObject 요소의 형제요소를 선택할때 사용 할 수 있습니다. 

$('#myObject + div'); // #myObject 바로 다음 div를 선택합니다.


$('#myObject ~ div'); // #myObject 형제 div를 모두 선택합니다.
$('#myObject ~ div').eq(1);

• 조합 선택자

지난 시간 및 위에 소개된 선택자를 복합적으로 사용하여 요소를 지정할 수 있습니다. 

아래의 구성요소중 span #2를 찾을 경우 

<div id="myObject">
	<div> 1번 div </div>
    <div> 2번 div </div>
    <div> 
    	<span> span #1 </span>
        <span> span #2 </span>
    </div>
</div>

다음과 같이 구성하여 요소를 선택 할 수 있습니다. 

$("#myObject div span").eq(1)

jQuery에 대해서 업무 중 교육을 할 일이 생겨 정리합니다.

• jQuery를 왜 사용하는 것인가?

   jQuery는 Selector가 없다면 사용을 안 할 수도 있다 라는 생각이 될 정도로 편리한 Selector를 제공합니다. 

   CSS 선택자를 그대로 사용할 수 있어 코드 선택이 매우 간단합니다. 물론 document.querySelector   

   와 document.querySelectorAll이 있기도 하지만 모르는 사람이 더 많을뿐더러 이미 jQuery가 자리 잡은 상황이기

   때문에 jQuery가 개발하는 사람들에게는 더 친숙합니다. 

jQuery Selector를 사용함에 있어 몇 가지만 알아도 사용하는 데에는 큰 무리가 없습니다. 

• Id로 해당 Object 찾기(#)

단순히 #뒤에 아이디를 입력하여 해당 오브젝트를 선택할 수 있습니다.

//javascript
document.getElementById('objId');

//jQuery
$('#objId');

• class로 Object 찾기(.)|

단순히. 뒤에 해당 css class 명을 입력하여 해당 오브젝트를 선택할 수 있습니다. 이때 동일한 class가 여러 개인 경우

. eq(숫자)를 이용하여 해당 인덱스에 해당하는 오브젝트를 선택할 수 있습니다.

//javascript
document.getElementsByClassName('your_class_name');

//jQuery
$('.your_class_name');

// 4번째 오브젝트 선택 (0부터 시작)
$('.your_class_name').eq(3);

• tag로 Object 찾기

$() 안에 해당 tag를 입력하여 사용할 수 있습니다. 또한 여러 개의 동일한 tag가 존재하는 경우 eq()를 이용하여 해당 인덱스에 해당하는 오브젝트를 선택할 수 있습니다. 

//javascript
document.getElementsByTagName('table');

//jQuery
$("table");

//첫번째 table
$("table").eq(0);

• 속성으로 Object 찾기( [ ] )

해당 기능은 javascript는 제공하지 않으므로 별도의 함수를 만들어서 사용해야 합니다. 

[ ] 안에 속성명 또는 속성에 해당하는 값의 형태로 작성하여 사용할 수 있습니다. 

//jQuery
$('[type]'); // type 라는 속성을 가진 Object

$('[type="button"]'); // type이 button인 Object

$('[type="button"]').eq(1);

replace() 함수

• 자바스크립트에서 특정문자 또는 특수문자를 제거할때 replace() 함수를 사용하는 경우 , #가 여러번 있는 문자열(주민번호,전화번호)을 단순히 replace('#','')로 하면, 처음 #기호만 삭제되고 나머지는 삭제되지 않습니다.

var testStr = "#1#2#3";
testStr.replace("#","");

//결과값 : 1#2#3

replace()함수와 정규식을 활용하여 Java의 replaceAll() 함수와 동일한 기능을 하도록 만들어 보겠습니다. 

var testStr = "#1#2#3";
testStr.replace(/\#/g,"");

//결과값 : 123

해당 코드를 이용하여 replaceAll() 함수를 생성하여 사용하도록 합니다.

추가내용

• 자주쓰는 정규식
  • 특정문자 제거(#제거)   : str.replace(/\#/g,'');
  • 앞의 공백 제거           : str.replace(/^\s+/,'');
  • 뒤 공백 제거              : str.replace(/\s+$/,'');
  • 앞 공백 제거              : str.replace(/^\s+|\s+$/g,'');
  • 문자열 내의 공백 제거 : str.replace(/\s/g,'');
  • 줄바꿈 제거               : str.replace(/\n/g,'');
  • 엔터 제거                  : str.replace(/\r/g,'');
  • 0 제거                      : str.replace(/[^(1-9)]/gi,"");

jQuery UI 를 이용하여 일반적으로 팝업창을 사용을 많이 합니다. 

다이알로그 창을 이용해서 많이들 하시죠 

그런데... 다이알로그 창에서 기타 플러그인을 이용한 Confirm이나 alert를 사용할 경우 

Uncaught RangeError: Maximum call stack size exceeded.

오류를 만날때가 있습니다. 

이 문제는 추가로 발생된 alert이나 confirm 창이 기존에 열려있는 다이알로그과 충돌이 발생하여 무한루프가 발생하여 생기는 오류 입니다. 

(정확히는 jQuery Dialog와 bootbox 의 alert/confirm 이 서로 focus를 가져오려고 싸우다가 무한루프에 빠지는 현상입니다.)

현재시점(2017.08.04)에는 아직 완벽한 해결책을 찾지 못하였으나... 

오류가 없이 사용할 수 있는 방법을 공유해드릴려고 합니다. 

해당문제는 추가로 발생한 alert이나 confirm에서 해당 영역을 벗어난 부분을 클릭 할 경우 차동 창 닫기 기능이 동작하면서 발생하는 기능입니다. 

위의 그림과 같이 진행되었을경우 마지막 이미지의 닫히는 행위가 수행 될때 Uncaught RangeError: Maximum call stack size exceeded. 가 발생하게 됩니다.

본론으로 들어가서 해결하는(?) 방법.. 그러니까 닫히는 기능을 사용안하게 하여 오류를 피해가는 방법을 소개해드립니다.

1. bootstrap[.js 혹은 bootstrap.min.js 을 Open

2. c.prototype.enforceFocus 항목을 찾은뒤 해당 함수를 주석처리 합니다.

3. enforceFocus 를 사용하는 항목을 주석처리하기 위해 d.enforceFocus()를 찾아 주석처리 합니다.

4. 정상동작하는지 확인합니다.

<참고 프로그램 소스 : 아래 붉은색 부분 참조>

Button 클릭시 자동으로 서브밋 현상이 일어나는 경우 해결방법(Can I make a <button> not submit a form?)

<form>

        <button class="btn bg-color-teal txt-color-white">버튼1</button>

</form>

위와같은 코딩의 경우 100% 버튼 클릭시 서브밋 현상이 발생하게 되어있다.

해결방법은 type 속성을 추가해준다.

<form>

        <button type="button" class="btn bg-color-teal txt-color-white">버튼1</button>

</form>

※ 먼저 그리드가 밀리는 현상은 블로그 주인과 항상 동일한 사유가 아닐 수 있습니다. 

블로그 주인과 동일한 수정으로 수정이 되지 않는다고 욕하시면 안됩니다. ㅠㅠ

jqGrid 를 이용하여 프로젝트를 진행하다보면 아래 그림과 같이 그리드가 엇갈리는(밀리는) 현상이 발생하는 경우가...

해당 현상은 jqGrid의 초창기부터 내려오는 버그로서... 버전업이 되어도 고쳐지지 않는 현상이라 할 수 있습니다.

원인은 아래 그림에서 붉은색 부분의 가로 사이즈가 일치하지 않아 발생하는 현상으로 크롬에서는 정상 동작하나 IE에서 해당 현상이 발생하였습니다. 

다음의 코드를 이용하여 해당현상을 수정하였습니다. 

데이터를 조회하기 전에는 데이터가 없기 때문에 조회 할 경우 해당 사이즈를 일치 하여 주는 스크립트를 삽입하여

정상동작 하도록 수정할 수 있습니다. 

- 끝 -

수 (Numbers)

설계 명세서에 의하면 JavaScript에서 수는 "이중정밀도 64비트 형식 IEEE 754 값"으로 정의됩니다. 이것은 몇가지 흥미로운 결과를 가져옵니다. JavaScript에는 정수와 같은 것이 존재하지 않으므로, C 나 Java 에서 수학 계산을 한 경험이 있다면 산술할 때 약간 조심할 필요가 있습니다. 다음과 같은 경우를 주의해야 합니다:

덧셈, 뺄셈, 계수 (또는 나머지) 연산을 포함하는 표준 산술 연산자가 지원됩니다. 또한 앞에서 언급하는 것을 깜박 잊은 고급 수학 함수와 상수를 다루기 위한 수학(Math)으로 불리워지는 내장 객체가 있습니다:

내장 parseInt() 함수를 사용하여 문자열을 정수로 변환할 수 있습니다. 이는 다음과 같이 옵션으로 주어지는 두번째 매개변수를 밑으로 하여 수행할 수 있습니다:

만약 이진수를 정수로 변환하고 싶다면, 밑을 바꾸기만하면 됩니다:

문자열이 수가 아닌 경우 NaN ("Not a Number" (수가 아님)을 줄인 약자)로 불리워지는 특별한 값을 돌려줍니다:

NaN는 어떤 수학 연산의 입력값으로써 주어지면 그 결과는 역시 NaN가 되기 때문입니다:

NaN을 처리하기 위해서 내장 isNaN() 함수를 사용해서 NaN 인지 여부를 검사할 수 있습니다:

JavaScript는 또 특별한 값 Infinity와 -Infinity를 가지고 있습니다: Infinity를 수(number)에서 설명하는 이유는 이 Infinity는 typeof 함수를 이용해 데이터타입을 확인하였을때 number로 분류되기 때문입니다. NaN과 마찬가지로 수학 연산값이 주어지는경우 그 결과는 Infinity가 됩니다. 

다음시간에는 문자열(String)에 대해서 이야기 해보겠습니다...

[JavaScript] 개요

개요

어떤 언어에서라도 기초가 되는 부분인 타입을 살펴보는 것부터 시작해봅시다. JavaScript 프로그램은 값을 다루고 해당 값은 모두 타입을 가지고 있습니다. JavaScript의 타입은 다음과 같습니다:

• 수 (Number)

• 문자열 (String)

• 부울 (Boolean)

• 함수 (Function)

• 객체 (Object)

추가로 기호(Symbol)이라는 것이 있지만 솔직히 그건 잘 모르겠습니다. ㅋㅋㅋ

그리고 약간 특별한 타입인 정의되지 않음(Undefined) 과 널(Null) 이 있습니다. 또한 객체의 특별한 종류인 배열(Array) 객체. 그리고 자유롭게 사용할 수 있는 날짜(Date) 객체 와 정규식(RegExp) 객체가 있습니다. 그리고 기술적으로 정확히 말해 함수(Function)는 단지 객체의 특별한 타입으로 취급됩니다. 따라서 타입 구조도를 정리해보면 다음과 같습니다

• 수 (Number)
• 문자열 (String)
• 부울 (Boolean)
• 기호 (Symbol)
• 객체 (Object)
• 함수 (Function)
• 배열 (Array)
• 날짜 (Date)
• 정규식 (RegExp)
• 널 (Null)
• 정의되지 않음 (Undefined)