'Developer's life/etc'에 해당하는 글 12건

대략 다음과 같이 5가지 방법이 있음.

1. Generate Thumbnails in General (specific height)
2. Resize to fit a rectangular box
3. Pad Out the Image
4. Cut the Image to Fit
5. Area Fit Image Size

자세한 사항은 http://www.imagemagick.org/Usage/thumbnails/#cut

WRITTEN BY
hopangbear

트랙백  1 , 댓글  0개가 달렸습니다.
secret

GTD??

Developer's life/etc 2009. 6. 2. 13:46
1. 멋진 UI를 가진 Things (스크린캐스트)
2. 맥용 어플의 명가 Omni Group이 만든 OmniFocus (스크린캐스트)
3. 강력한 기능으로 무장한 Midnight Inbox (스크린캐스트)


WRITTEN BY
hopangbear

트랙백  0 , 댓글  0개가 달렸습니다.
secret
웹 서비스의 정의

웹 서비스 (일반적으로 서비스 라 불리는) 는 개방형 프로그램적 인터페이스를 갖는 약간의 컨텐트, 또는 약간의 프로세스, 또는 둘 다로 구성되어 있습니다. 간단한 사례: 통화 변환기, 주식 시세, 사전. 보다 복잡한 사례: 여행 입안자, 조달 워크플로우 시스템. 서비스는 다음과 같은 특징을 갖고 있습니다:

  • 특정 작업을 수행하고 표준 사양으로 컴파일하는 인터넷-기반 애플리케이션.
  • XML 및 XML 메시징을 통해 표현되면서 액세스되는 실행 파일.
  • 분산 컴퓨팅 환경에서 동적으로 퍼블리싱 (publishing), 디스커버리 (discovery) 그리고 호출 등이 가능합니다.
  • 플랫폼 및 언어에 독립적입니다.

웹 서비스는 메시징 프로토콜, 프로그래밍 표준, 네트워크 등록 그리고 디스커버리 기능 등을 통해 모든 웹-연결 장비에서 액세스할 수 있는 소프트웨어 컴포넌트로서 비연속 (discrete) 비즈니스 프로세스를 캡슐화합니다:

  • WSDL (Web Services Description Language) 에서 기능 및 속성을 내보이고 기술을 합니다.
  • 애플리케이션 및 다른 서비스들이 UDDI (Universal Description, Discovery, and Integration) 레지스트리를 사용하여 웹 상에 그것을 위치시키게 해줍니다.
  • 원격 애플리케이션 및 서비스들이 SOAP (Simple Object Access Protocol) 와 같은 표준 인터넷 프로토콜을 사용하여 그것을 호출할 수 있게 해줍니다.
  • 동일한 프로토콜 상에서 요청 애플리케이션에게 응답을 반환합니다.

일반적으로, 웹 서비스는 세 가지 특징을 갖고 있습니다:

  • EJBs, PL/SQL 프로시저, 다른 웹/데이타베이스 컨텐트 또는 애플리케이션 등과 같은 한 개 이상의 정보 소스를 캡슐화합니다.
  • 이벤트, 변형, 그리고 조건부 로직 등을 처리할 수 있는 실행 플로우를 갖고 있습니다
  • 일정한 XML 인터페이스를 통해 액세스가 가능합니다.

다음은 웹 서비스에 대한 디스커버리 및 액세스의 고급 프로토콜 예입니다. 작업은 다음과 같이 진행됩니다:

  1. 웹 서비스 개발자는 서비스를 생성한 후 그것을 서버로 배포합니다. 서비스의 위치는 엔드포인트 (endpoint) 라고 불립니다. 개발의 일부로서 또는 개발 툴을 통해 WSDL 의 형태로 서비스 기술 (description) 이 생성됩니다.
  2. 엔드포인트와 WSDL 위치 등을 포함하는 웹 서비스 정보는 선택적으로 UDDI 디렉토리에 퍼블리싱될 수 있습니다.
  3. 웹 서비스 클라이언트는 WSDL 사양 기반의 툴을 통해 구축되거나 생성될 수 있습니다. 클라이언트는 SOAP 메시지를 엔드포인트로 보내고, 응답을 처리합니다.

웹 서비스 기반구조의 두 가지 주요 부분은 웹 서비스의 기술 언어인 WSDL; 그리고 웹 서비스의 통신 프로토콜인 SAOP 입니다.


WSDL 의 정의

Web Services Description Language (WSDL) 는 웹 서비스 인터페이스와 위치의 구문 (syntax) 을 기술하는 XML 언어입니다. WSDL 사양 은 그것을 “네트워크 서비스를 문서-중심 또는 프로시저-중심 정보를 포함하는 메시지에서 동작하는 일련의 엔드포인트로 기술하기 위한 XML 포맷” 이라고 부릅니다. 그 컨텍스트를 통해, 아래 다이어그램은 WSDL 문서에 나타나는 요소들을 설명하면서 그것들이 어떻게 관련되었는지를 보여주고 있습니다.

WSDL element hierarchy.

프로그래머 또는 자동화된 개발 툴은 서비스를 기술하는 WSDL 파일들을 생성할 수 있고, 인터넷 상에서 기술을 할 수도 있습니다. 클라이언트-사이드 프로그래머와 개발 툴은 사용 가능한 웹 서비스 정보를 얻을 수 있고, 또한 사용 가능한 서비스에 액세스하는 프록시 또는 프로그램 템플릿 등을 구축하고 생성하는 퍼블리싱된 WSDL 기술을 사용할 수도 있습니다.

WSDL 문서는 다음 테이블에서 기술된 바와 같이 유형, 메시지, portypes 바인딩, 그리고 서비스 요소 등을 포함하는 정의 요소를 보유하고 있습니다.

정의

한 개 이상의 서비스를 정의합니다. 정의 요소는 다음 속성들을 지원합니다:

  • 이름은 선택 사항입니다.
  • targetNamespace 는 이 서비스에 대한 정보의 논리적 네임스페이스 (namespace) 입니다. WSDL 문서는 다른 WSDL 문서를 임포트할 수 있고, targetNamespace 를 고유 값으로 설정하는 것은 네임스페이스가 손상되지 않는다는 것을 보증합니다.
  • Xmlns 는 WSDL 문서의 디폴트 네임스페이스 이고, http://schemas.xmlsoap.org/wsdl/ 로 설정이 됩니다. <definitions>, <types> 그리고 <message> 등과 같은 모든 WSDL 요소들은 네임스페이스에 속하게 됩니다.
  • xmlns:xsd xmlns:soap 는 데이타 유형과 SOAP-특정 정보의 지정을 위해 사용되는 표준 네임스페이스 정의입니다.
  • xmlns:tns this namespace 를 나타냅니다. "this namespace" (tns) 접두사는 현재 문서를 언급하기 위한 규약으로 사용됩니다.
유형 WSDL 문서에서 사용하는 복합 데이타 유형의 정보를 제공합니다. 간단한 유형이 사용될 때에는 WSDL 문서가 이 섹션을 필요로 하지 않습니다.
메시지 통신되는 데이타의 추상적 정의.
운영 서비스가 지원하는 작업의 추상적 기술.
portType 한 개 이상의 엔드포인트가 지원하는 작업들의 추상적 집합.
바인딩 작업과 메시지를 위한 명확한 프로토콜과 데이타 포맷 사양을 지정하여 작업이 호출되는 방식을 기술합니다.
포트 단일 통신 엔드포인트를 정의하면서, 단일 엔드포인트를 바인딩을 위한 주소로 지정합니다.
서비스 바인딩의 포트 주소를 지정합니다. 서비스는 네트워크 엔드포인트 또는 포트의 모음입니다.

다음 목록은 BC4J-VSM 가 사용하는 Credit Card Web Service 의 WSDL 코드를 보여주고 있습니다.

<?xml version = '1.0' encoding = 'UTF-8'?>
<!--Generated by the Oracle9i JDeveloper Web Services WSDL Generator-->
<!--Date Created: Fri Oct 25 15:05:09 IST 2002-->
<definitions
name="oracle.otnsamples.vsm.services.CreditCardServiceWS"
targetNamespace="http://oracle/otnsamples/vsm/services/CreditCardServiceWS.wsdl"
xmlns="http://schemas.xmlsoap.org/wsdl/"
xmlns:xsd="http://www.w3.org/2001/XMLSchema"
xmlns:soap="http://schemas.xmlsoap.org/wsdl/soap/"
xmlns:tns="http://oracle/otnsamples/vsm/services/CreditCardServiceWS.wsdl"
xmlns:ns1="http://oracle.otnsamples.vsm.services/ICreditCardServiceWS.xsd">
<types>
<schema
targetNamespace="http://oracle.otnsamples.vsm.services/ICreditCardServiceWS.xsd"
xmlns="http://www.w3.org/2001/XMLSchema"
xmlns:SOAP-ENC="http://schemas.xmlsoap.org/soap/encoding/"/>
</types>
<message name="validateCard0Request">
<part name="provider" type="xsd:string"/>
<part name="ccNum" type="xsd:string"/>
</message>
<message name="validateCard0Response">
<part name="return" type="xsd:string"/>
</message>
<portType name="CreditCardServiceWSPortType">
<operation name="validateCard">
<input name="validateCard0Request" message="tns:validateCard0Request"/>
<output name="validateCard0Response" message="tns:validateCard0Response"/>
</operation>
</portType>
<binding name="CreditCardServiceWSBinding" type="tns:CreditCardServiceWSPortType">
<soap:binding style="rpc" transport="http://schemas.xmlsoap.org/soap/http"/>
<operation name="validateCard">
<soap:operation soapAction="" style="rpc"/>
<input name="validateCard0Request">
<soap:body use="encoded" namespace="oracle.otnsamples.vsm.services.CreditCardServiceWS" encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"/>
</input>
<output name="validateCard0Response">
<soap:body use="encoded" namespace="oracle.otnsamples.vsm.services.CreditCardServiceWS" encodingStyle="http://schemas.xmlsoap.org/soap/encoding/"/>
</output>
</operation>
</binding>
<service name="oracle.otnsamples.vsm.services.CreditCardServiceWS">
<port name="CreditCardServiceWSPort" binding="tns:CreditCardServiceWSBinding">
<soap:address location="http://localhost:8888/VSM-BC4J-VSM-BC4J-context-root/ oracle.otnsamples.vsm.services.CreditCardServiceWS"/>
</port>
</service>
</definitions>



SOAP 의 정의

Simple Object Access Protocol (SOAP) 는 분산 환경에서 정보를 교환하기 위한 경량의 XML-기반 프로토콜로서, 다음과 같은 정보 교환의 유형들을 지원하고 있습니다:

  • 엔드포인트가 프로시저-지향 메시지를 받은 다음, 상호 관련된 응답 메시지로 대답하는 곳에서 요청-응답 프로세싱을 허용하는 Remote Procedure Call style (RPC)
  • 메시지가 전송은 되지만 전송자가 즉각적인 응답은 기대하거나 기다리지 않는 곳에서 비즈니스 또는 다른 유형의 문서들을 교환할 필요가 있는 구성 및 애플리케이션들을 지원하는 메시지-지향 정보 교환.

SOAP 는 다음과 같은 특징을 갖고 있습니다:

  • 프로토콜 독립성
  • 언어 독립성
  • 플랫폼 및 운영 체제 독립성
  • (멀티파트 MIME 구조를 사용하여) 첨부를 통합하는 SOAP XML 메시지 지원

SOAP 메시지는 두 개의 데이타 구조, SOAP 헤더, SOAP 본문 그리고 그것들을 정의하기 위해 사용되는 이름 공간의 정보 등을 포함하는 SOAP 봉투 (envelope) 로 구성되어 있습니다. 헤더는 선택 사항입니다; 그것이 나타날 때에는 SOAP 본문에서 정의한 요청 정보를 전달하게 됩니다. 예를 들면, 헤더는 트랜잭션, 보안, 컨텍스트 또는 사용자 프로파일 정보 등을 포함할 수 있습니다. 본문은 웹 서비스 요청을 포함하거나 요청을 XML 포맷으로 응답을 합니다. 다음 그림은 SOAP 메시지의 고급 구조를 나타내고 있습니다.

SOAP message structure.

SOAP 메시지가 웹 서비스 요청 및 응답의 전달을 위해 사용될 때에는 사용 가능한 웹 서비스의 WSDL 정의를 따를 수 있고, WSDL 은 웹 서비스 액세스를 위해 사용되는 SOAP 메시지, SOAP 메시지가 교환 가능한 프로토콜, 그리고 이 웹 서비스를 액세스할 수 있는 인터넷 장소 등을 정의할 수 있습니다. WSDL 디스크립터 (descriptor) 는 UDDI 또는 다른 디렉토리 서비스 내에 위치하면서, 구성 또는 SOAP 요청의 본문과 같이 다른 수단을 통해 제공될 수도 있습니다.

SOAP 사양은 요청 및 응답을 암호화하는 표준 방식을 제공하고 있습니다. 그리고, XML 스키마를 사용하여 메시지 페이로드 (payload) 의 구조 및 데이타 유형도 기술하고 있습니다. 다음은 웹 서비스의 메시지 및 응답을 위하여 SOAP 이 사용되고 있는 방식입니다:

  • 서비스 응답은 다시 SOAP 프로토콜을 사용하여 SOAP 서버로 반환이 되고, 이 메시지는 원래 SOAP 클라이언트에게 반환이 됩니다.

SOAP 은 XML 에 대한 산업 투자의 활용 방법을 제공하고 있습니다. 그리고, 일반적으로 SOAP 가 HTTP 와 SMTP 등과 같이 “방화벽에 친숙한” 프로토콜에 대하여 정의되어 있기 때문에, 방화벽 기술에 대한 산업 투자도 잘 활용할 수 있습니다. 또한 산업계는 SOAP 을 웹 서비스의 필수 요소로 정의하여 다른 전략 보다도 웹 서비스의 볼륨 생산을 적절히 사용하고 있습니다.


WRITTEN BY
hopangbear

트랙백  0 , 댓글  0개가 달렸습니다.
secret

UI 개발 분야의 전문성을 확립하고 생태계 발전을 도모하기 위한 Daum UI DevDay 행사를 개최합니다. 이 행사는 Daum에서 주최하는 UI 기술 행사로써 재미있는 강의도 듣고 Daum UI/RIA 개발자와 만남의 자리를 통해 친목을 나눌 수 있는 자리입니다. 또한 푸짐한 경품과 기념품을 함께 증정해드릴 예정이오니 많은 참여 바랍니다.

uidevday.jpg

Daum UI DevDay

  • 일시: 2008년 5월 30일(금) 오후 1시 30분 ~ 오후 6시
  • 장소: 삼성동 섬유센터 17층
  • 인원: 250명

프로그램 안내

자세한 프로그램은 행사 안내페이지를 참고하세요!

가고 싶은 맘은 굴뚝같은데... 평일 세미나 힘들다...;
나도 이런거 좀 듣고 싶다구...


WRITTEN BY
hopangbear

트랙백  0 , 댓글  0개가 달렸습니다.
secret
if ( "952".equals(status)||"953".equals(status) ||
     "954".equals(status)||"955".equals(status) ||
     "956".equals(status)||"957".equals(status) ||
     "962".equals(status)||"963".equals(status) ||
     "972".equals(status)||"973".equals(status) ) return "A05"; //AS취소
else return "A03"; // AS처리중


위와 같은 코드가 있는 경우에 다음과 같이 리팩토링해주는 것이 좋습니다.

  boolean isCancelled = "952".equals(status)||"953".equals(status) ||
   "954".equals(status)||"955".equals(status) ||
   "956".equals(status)||"957".equals(status) ||
   "962".equals(status)||"963".equals(status) ||
   "972".equals(status)||"973".equals(status);

  if ( isCancelled ) return "A05"; //AS취소
  else return "A03"; // AS처리중

두 가지 효과를 볼 수 있습니다.

  1. if () 괄호절 안에 들어가 있는 구문의 정확한 의도를 변수명으로 표시할 수 있습니다.
  2. ()안에 있는 구문은 가독성이 많이 떨어집니다. 그것을 변수에 할당하는 문장으로 바꿔주기 때문에 조건문의 결합에 대한 가독성이 늘어가게 됩니다.

앞으로 코드 수정할 때 참고하시면 삽질하는 시간이 많이 줄어듭니다. 프로그래밍 삽질은 안구에 근육이 생긴다는... 쿨럭.


 

- by kenu(허광남) -


원문 : http://ecs.gseshop.co.kr/blog/

WRITTEN BY
hopangbear

트랙백  0 , 댓글  0개가 달렸습니다.
secret

TIOBE Programming Community Index for January 2008

January Headline: TIOBE declares Python as programming language of 2007!

The TIOBE Programming Community index gives an indication of the popularity of programming languages. The index is updated once a month. The ratings are based on the world-wide availability of skilled engineers, courses and third party vendors. The popular search engines Google, MSN, Yahoo!, and YouTube are used to calculate the ratings. Observe that the TIOBE index is not about the best programming language or the language in which most lines of code have been written.

The index can be used to check whether your programming skills are still up to date or to make a strategic decision about what programming language should be adopted when starting to build a new software system. The definition of the TIOBE index can be found here.

Position
Jan 2008
Position
Jan 2007
Delta in Position Programming Language Ratings
Jan 2008
Delta
Jan 2007
Status
1 1 Java 20.849% +1.69%   A
2 2 C 13.916% -1.89%   A
3 4 (Visual) Basic 10.963% +1.84%   A
4 5 PHP 9.195% +1.25%   A
5 3 C++ 8.730% -1.70%   A
6 8 Python 5.538% +2.04%   A
7 6 Perl 5.247% -0.99%   A
8 7 C# 4.856% +1.34%   A
9 12 Delphi 3.335% +1.00%   A
10 9 JavaScript 3.203% +0.36%   A
11 10 Ruby 2.345% -0.17%   A
12 13 PL/SQL 1.230% -0.34%   A
13 11 SAS 1.204% -1.14%   A
14 14 D 1.172% -0.16%   A
15 18 COBOL 0.932% +0.30%   A
16 46 Lua 0.579% +0.48%   A--
17 22 FoxPro/xBase 0.506% +0.05%   B
18 19 Pascal 0.456% -0.11%   B
19 16 Lisp/Scheme 0.413% -0.26%   A--
20 27 Logo 0.386% +0.07%   B


Long term trends

The long term trends for the first 10 programming languages can be found in the line diagram below.


Other programming languages

The complete top 50 of programming languages is listed below. This overview is published unofficially, because it could be the case that we missed a language. If you have the impression there is a programming language lacking, please notify us at tpci@tiobe.com.


Position Programming Language Ratings
21 ColdFusion 0.353%
22 ActionScript 0.342%
23 Ada 0.337%
24 Fortran 0.305%
25 RPG 0.251%
26 MATLAB 0.241%
27 Awk 0.213%
28 Prolog 0.212%
29 ABAP 0.195%
30 LabView 0.169%
31 Groovy 0.168%
32 Transact-SQL 0.155%
33 Smalltalk 0.133%
34 Bash 0.133%
35 Tcl/Tk 0.130%
36 Haskell 0.119%
37 Forth 0.116%
38 CL (OS/400) 0.114%
39 Natural 0.105%
40 ML 0.092%
41 Focus 0.091%
42 Ch 0.088%
43 PL/I 0.088%
44 Lingo 0.087%
45 Factor 0.084%
46 REXX 0.075%
47 Objective-C 0.071%
48 IDL 0.059%
49 Erlang 0.057%
50 VBScript 0.056%

The Next 50 Programming Languages

The following list of languages denotes #51 to #100. Since the differences are relatively small, the programming languages are only listed (in alphabetical order).

  • ABC, Algol, Alpha, APL, Applescript, AspectJ, Beta, Boo, Caml, cg, Clean, Csh, cT, Curl, DC, Dylan, Eiffel, Euphoria, F#, Felix, Icon, Inform, Io, Limbo, MAD, Magic, Maple, Mathematica, Modula-2, MOO, MUMPS, Oberon, Occam, Oz, Pike, PILOT, Postscript, Powerbuilder, PowerShell, Progress, Q, R, REALbasic, Rebol, S-lang, Scala, SIGNAL, SPSS, VHDL, XSLT

January Newsflash - Brought to you by Paul Jansen

  • Python has been declared as programming language of 2007. It was a close finish, but in the end Python appeared to have the largest increase in ratings in one year time (2.04%). There is no clear reason why Python made this huge jump in 2007. Last month Python surpassed Perl for the first time in history, which is an indication that Python has become the "de facto" glue language at system level. It is especially beloved by system administrators and build managers. Chances are high that Python's star will rise further in 2008, thanks to the upcoming release of Python 3.

  • A couple of interesting trends can be derived from the 2007 data. First of all, languages without automated garbage collection are losing ground rapidly. The most prominent examples of languages with explicit memory management, C and C++, both lost about 2% in one year. Another trend is that the battle between scripting languages seems to be going on in the background. There is a continuous flow of new scripting languages. In 2006, Ruby entered the main scene, followed this year by Lua. In the top 50, Groovy and Factor are new kids on the block. None of these new scripting languages seem to stay permanently, they are just replaced by successors.

  • What were the big movers and shakers in 2007? The big winners are Lua (from 46 to 16), Groovy (from 66 to 31), Focus (from 78 to 41), and Factor (new at 45). The most prominent shakers are ABAP (from 15 to 29) and IDL (from 23 to 48).

  • What is to be expected in 2008? And, what became of the forecasts for 2007? At the beginning of 2007, I thought C# and D would become the winners and Perl and Delphi the losers. C# was indeed one of the big winners, and Perl one of the big losers. But the forecasts for D and Delphi were completely wrong. There has been no breakthrough for D. On the other hand, Delphi reclaimed a top 10 position... What about 2008? C, C++ and Perl will continue to fall. C and C++ because they have no automated garbage collection. C++ will get an extra push down because Microsoft is not actively supporting the language anymore. Perl is just dead. Java and C# will eventually be the 2 most popular languages. So I expect them to rise further in 2008. What new languages will enter the top 20 in 2008 is a wild guess, but I think ActionScript and Groovy are really serious candidates.

  • Nguyen Quang Chien suggested to rename the OCaml entry to Caml. This has been done. Thanks Nguyen!

  • In the tables below some long term trends are listed about categories of languages. The tables show that dynamically typed object-oriented languages are still becoming more popular.

    Category Ratings January 2008 Delta January 2007
    Object-Oriented Languages 56.1% +4.0%
    Procedural Languages 40.9% -3.6%
    Functional Languages 1.9% +0.2%
    Logical Languages 1.1% -0.6%


    Category Ratings January 2008 Delta January 2007
    Statically Typed Languages 56.2% -1.5%
    Dynamically Typed Languages 43.8% +1.5%


Frequently Asked Questions

  • Q: What definition of programming languages has been used?

    A: A language is considered a programming language if it is Turing complete. As a consequence, HTML and XML are not considered programming languages. This also holds for data query language SQL. SQL is not a programming language because it is, for instance, impossible to write an infinite loop in it. On the other hand, SQL extensions PL/SQL and Transact-SQL are programming languages. ASP and ASP.NET are also not programming languages because they make use of other languages such as JavaScript and VBScript or .NET compatible languages. The same is true for frameworks such as Ruby on Rails, Cocoa, and AJAX. Finally, we have also excluded assembly languages, although Turing complete, because they have a very different nature.

  • Q: How are dialects of languages grouped?

    A: Some languages are grouped together because they are very similar to each other. An example is the language entry Basic which covers Visual Basic, QBasic, Microsoft Basic, etc. VB.NET has been added as well to the Visual Basic entry because it is often referred to as Visual Basic. The ratings for a collection of languages is calculated by taking the maximum of all individual entries (not its sum!).

  • Q: Am I allowed to show the TIOBE index in my weblog/presentation/publication?

    A: This is OK provided that you refer to its original source: www.tiobe.com.

  • Q: I would like to have the complete data set of the TIOBE index. Is this possible?

    A: We spent a lot of effort to obtain all the data and keep the TIOBE index up to date. In order to compensate a bit for this, we ask a fee of 1,500 US$ for the complete data set. This might seem a lot of money but it is considered strategic data. The data set runs from June 2001 till today. It started with 25 languages back in 2001, and now measures more than 150 languages at least 10 times per month. The data are availabe in comma separated format. Part of the deal is that new data will be send to you for 1 extra year. Please contact sales@tiobe.com for more information.

  • Q: What happened to Java in April 2004? Did you change your methodology?

    A: No, we did not change our methodology at that time. Google changed its methodology. They performed a general sweep action to get rid of all kinds of web sites that had been pushed up. As a consequence, there was a huge drop for languages such as Java and C++. In order to minimize such fluctuations in the future, we added two more search engines (MSN and Yahoo) a few months after this incident.

Send mail to webmaster@tiobe.com with questions or comments about this web site.
Copyright © 2008 TIOBE Software BV, Privacy Statement

원문 : http://www.tiobe.com/index.htm?tiobe_index

p.s. 역시 Java를 계속 했어야 했어 -_-;;


WRITTEN BY
hopangbear

트랙백  0 , 댓글  0개가 달렸습니다.
secret
  1. Home >
  2. Developer's Guide

Developer's Guide

The Google Chart API lets you dynamically generate charts. To see the Chart API in action, open up a browser window and copy the following URL into it:

http://chart.apis.google.com/chart?cht=p3&chd=s:hW&chs=250x100&chl=Hello|World

Press the Enter or Return key and - presto! - you should see the following image:

Yellow line chart

Contents

  1. Audience
  2. Usage policy
  3. Introduction
  4. URL format
  5. Required and optional parameters
  6. Chart size
  7. Chart data
    1. Simple encoding
    2. Text encoding
    3. Extended encoding
    4. JavaScript snippet for encoding data
    5. Guidelines for granularity
  8. Chart type
    1. Line charts
    2. Bar charts
    3. Pie charts
    4. Venn diagrams
    5. Scatter plots
  1. Colors
    1. Data set colors
    2. Chart area and background fill
  2. Labels
    1. Chart title
    2. Chart legend
    3. Pie chart labels
    4. Multiple axis labels
  3. Styles
    1. Line styles
    2. Grid lines
    3. Shape and range markers
    4. Fill area

Back to top

Audience

This document is intended for programmers who want to include Google Chart API images within a webpage. It provides an introduction to using the API and reference material on the available parameters.

Usage Policy

Use of the Google Chart API is subject to a query limit of 50,000 queries per user per day. If you go over this 24-hour limit, the Chart API may stop working for you temporarily. If you continue to exceed this limit, your access to the Chart API may be blocked.

Introduction

The Google Chart API returns a PNG-format image in response to a URL. Several types of image can be generated: line, bar, and pie charts for example. For each image type you can specify attributes such as size, colors, and labels.

You can include a Chart API image in a webpage by embedding a URL within an <img> tag. When the webpage is displayed in a browser the Chart API renders the image within the page.

All the images in this document were generated with the Chart API. To view the URL of an image :

  • if you are using Firefox right-click then select View image or Properties.
  • if you are using Internet Explorer right-click then select Properties.

This document describes the required format of Chart API URLs and the available parameters.

Back to top

URL format

Google Chart API URLs must be in the following format:

http://chart.apis.google.com/chart?<parameter 1>&<parameter 2>&<parameter n>

Note: Each URL must be all on one line.

Parameters are separated with the ampersand (&) character. You can specify as many parameters as you like, in any order. For example, the Chart API returns the following chart in response to the URL below:

Yellow line chart with x-axis labelled with March, April, May, June, and July and y-axis with 50Kb

http://chart.apis.google.com/chart?
chs=200x125
&chd=s:helloWorld
&cht=lc
&chxt=x,y
&chxl=0:|Mar|Apr|May|June|July|1:||50+Kb

Where:

  • http://chart.apis.google.com/chart? is the Chart API's location.
  • & separates parameters.
  • chs=200x125 is the chart's size in pixels.
  • chd=s:helloWorld is the chart's data.
  • cht=lc is the chart's type.
  • chxt=x,y indicates both x-axis and y-axis labels are required.
  • chxl=0:|Mar|Apr|May|June|July|1:||50+Kb are the x-axis and y-axis labels.

You may be wondering how helloWorld maps to data values? This is an example of Simple Encoding where the alphanumeric characters map to values ranging from 0 to 61. You don't need to worry about this mapping for now, all will be revealed later in this document.

You can include a Chart API image in an HTML document by embedding a URL within an <img> tag. For example, the following <img> tag results in the same image as above:

<img src="http://chart.apis.google.com/chart?
chs=200x125
&amp;chd=s:helloWorld
&amp;cht=lc
&amp;chxt=x,y
&amp;chxl=0:|Mar|Apr|May|June|July|1:||50+Kb
"
alt="Sample chart" />

Note: When you embed a URL in an HTML <img> tag, take care to use the character entity reference &amp; in place of an ampersand (&).

Back to top

Required and optional parameters

You must provide at least the following parameters:

All other parameters are optional. Optional parameters by chart type are listed in the following table.

Parameter Line chart Scatter plot Bar chart Venn diagram Pie chart
Chart title Yes Yes Yes Yes Yes
Chart legend Yes Yes Yes Yes  
Colors Yes Yes Yes Yes Yes
Chart and background fill Yes Yes Yes Yes Yes
Multiple axis labels Yes Yes Yes    
Grid lines Yes Yes      
Shape markers Yes Yes      
Horizontal range markers Yes Yes      
Vertical range markers Yes Yes      
Line styles Yes        
Fill area Yes        
Pie chart labels         Yes

Back to top

Chart size

Specify chart size with chs=<width in pixels>x<height in pixels>

For example, chs=300x200 generates a chart 300 pixels wide and 200 pixels high.

The largest possible area for a chart is 300,000 pixels. As the maximum height or width is 1000 pixels, examples of maximum sizes are 1000x300, 300x1000, 600x500, 500x600, 800x375, and 375x800.

Chart data

The following encoding formats are available:

  • Simple encoding has a resolution of 62 different values. Allowing five pixels per data point, this is sufficient for line and bar charts up to about 300 pixels. Simple encoding is suitable for all other types of chart regardless of size.
  • Text encoding has a resolution of 1,000 different values, using floating point numbers between 0.0 and 100.0. Allowing five pixels per data point, integers (1.0, 2.0, and so on) are sufficient for line and bar charts up to about 500 pixels. Include a single decimal place (35.7 for example) if you require higher resolution. Text encoding is suitable for all other types of chart regardless of size.
  • Extended encoding has a resolution of 4,096 different values and is best used for large charts where a large data range is required.

Note: Text encoding requires several characters to encode a single data point. Simple encoding is the most efficient, using just one character for each data point.

Back to top

Simple encoding

Specify simple encoding with

chd=s:<chart data string>

Where <chart data string> contains the characters: A to Z, a to z, 0 to 9, underscore (_), and comma (,).

Note:

  • Upper case A = 0, B = 1 and so on to Z = 25.
  • Lower case a = 26, b= 27 and so on to z = 51.
  • Zero (0) = 52 and so on to 9 = 61.
  • Specify a missing value with an underscore (_).
  • If you have more than one set of data, separate each set with a comma (,).

For example, two sets of data: chd=s:ATb19,Mn5tz where — in the first data set — A represents 0, T represents 19, b represents 27, 1 represents 53, and 9 represents 61.

Note: For simple encoding, the Chart API draws points with a value of zero at the bottom of the chart, 61 at the top, and spreads all other values evenly along the y-axis.

Back to top

Text encoding

Specify text encoding with

chd=t:<chart data string>

Where <chart data string> consists of floating point numbers from zero (0.0) to 100.0, minus one (-1), and the pipe character (|).

Note:

  • Zero (0.0) = 0, 1.0 = 1 and so on up to 100.0 = 100.
  • Specify a missing value with minus one (-1).
  • If you have more than one set of data, separate each set with a pipe character (|).

For example: chd=t:10.0,58.0,95.0|30.0,8.0,63.0

Note: For text encoding, the Chart API draws points with a value of zero at the bottom of the chart, 100.0 at the top, and spreads all other values evenly along the y-axis.

Back to top

Extended encoding

Specify extended encoding with

chd=e:<chart data string>

Where <chart data string> contains pairs of the characters: A to Z, a to z, 0 to 9, hyphen (-), period (.), underscore (_), and comma (,).

Note:

  • AA = 0, AZ = 25, Aa = 26, Az = 51, A0 = 52, A9 = 61, A- = 62, A. = 63
    BA = 64, BZ = 89, Ba = 90, Bz = 115, B0 = 116, B9 = 125, B- = 126, B. = 127
    .A = 4032, .Z = 4057, .a = 4058, .z = 4083, .0 = 4084, .9 = 4093, .- = 4094, .. = 4095.
  • Specify a missing value with two underscore (__) characters.
  • If you have more than one set of data, separate each set with a comma (,).

Note: For extended encoding, the Chart API draws points with a value of zero at the bottom of the chart, 4095 at the top, and spreads all other values evenly along the y-axis.

Back to top

JavaScript snippet for encoding data

You will most likely find it easier to translate real-life data into Chart API data programmatically rather than manually.

The following snippet of JavaScript encodes a data set into Simple encoding. The data set must be provided as an array of positive numbers. A data set value that is not a positive number is encoded as a missing value with the underscore character (_).

Call the simpleEncode function passing in the array (values) and the maximum value (maxValue) within the array. For line and bar charts, make maxValue larger than the largest number in the array if you want to have space between the highest value and the top of the chart.

var simpleEncoding = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
 
function simpleEncode(values,maxValue) {

var chartData = ['s:'];
  for (var i = 0; i < values.length; i++) {
    var currentValue = values[i];
    if (!isNaN(currentValue) && currentValue >= 0) {
    chartData.push(simpleEncoding.charAt(Math.round((simpleEncoding.length-1) * currentValue / maxValue)));
    }
      else {
      chartData.push('_');
      }
  }
return chartData.join('');
}

Back to top

Guidelines for granularity

Take care not to overestimate the number of data points required for a chart. For example, to show how popular Britney Spears was during the last ten years, aggregating search queries for each day results in more than 3600 values. This would be too much data to pass in a URL, it also would not make any sense to plot a graph at this granularity: on a 1024 pixel wide screen one data point would be about a quarter of a pixel on the screen. The following examples illustrate this point.

200 by 100 chart with 20 data points (10 pixels per data point):

Yellow line chart: easy to read as data points are spread out well along the x-axis

40 data points (5 pixels per data point):

Yellow line chart: less easy to read as data points are less spread along the x-axis

80 data points (only 2.5 pixels per data point):

Yellow line chart: difficult to read as data points are very squashed along the x-axis

Back to top

Chart type

The following types of charts are available:

Line charts

Specify a line chart with

cht=<line chart type>

Where <line chart type> is lc or lxy as described in the following table.

  • For charts of type lc, multiple data sets are drawn as multiple lines.
  • For charts of type lxy a pair of data sets is required for each line.
  • For information on how to specify multiple data sets see Chart data.
  • For information on available parameters see Optional parameters by chart type.
Parameter Description Example

cht=lc

A line chart, data points are spaced evenly along the x-axis.

Chart with line in yellow

cht=lc

cht=lxy

Provide a pair of data sets for each line you wish to draw, the first data set of each pair specifies the x-axis coordinates, the second the y-axis coordinates.

Provide a single undefined value to evenly space the data points along the x-axis. The example chart uses Text encoding so an undefined value is represented by -1. Simple encoding uses an underscore (_) and Extended encoding two underscores (__) as undefined - or missing - values.

Specify data point shape with the chm parameter as described in section Shape markers.

Specify line colors as described in section Colors.

Line chart with unevenly spaced data points and lines in red, green and dashed blue
cht=lxy
chd=t:0,30,60,70,90,95,100|
20,30,40,50,60,70,80|
10,30,40,45,52|
100,90,40,20,10|
-1|
5,33,50,55,7

Back to top

Bar charts

Specify a bar chart with

cht=<bar chart type>

Where <bar chart type> is bhs, bhg, bvs or bvg as described in the following table.

  • Depending on the bar chart type, multiple data sets are drawn as stacked or grouped bars.
  • For information on how to specify multiple data sets see Chart data.
  • For information on available parameters see Optional parameters by chart type.
Parameter Description Example

cht=bhs

cht=bvs

Horizontal and vertical bar chart respectively.

Multiple data sets are stacked so you must specify a color for each data set as described in section Colors.

Horizontal bar chart with two data sets: one data set is colored in red the second is stacked in green
cht=bhs
chco=ff0000,00aa00

Vertical bar chart with two data sets: one data set is colored in red the second is stacked in green
cht=bvs
chco=cc0000,00aa00

cht=bhg
cht=bvg

Horizontal and vertical bar chart, respectively, in specified colors; multiple data sets are grouped.

Horizontal bar chart with two data sets: one data set is colored in red the second is adjacent in green
cht=bhg
chco=cc0000,00aa00

Vertical bar chart with two data sets: one data set is colored in red the second is adjacent in green
cht=bvg
chco=cc0000,00aa00

chbh

Bar chart size is handled in a different way than for other chart types.

For horizontal bar charts of type bhs and bhg, and for vertical bar charts of type bvs and bvg, chart size is determined by the chs parameter. The chart is clipped (only partially visible) if the size specified (with chs) is too small.

Because of this you may wish to specify bar thickness with
chbh=
<bar width in pixels>,
<optional space between groups>

Note: the second value for the bar height parameter (chbh) determines the space between groups of bars. Bars within a group have half the specified spacing.

Horizontal bar chart in yellow, bars have the default width
chbh omitted
cht=bhs

Horizontal bar chart in yellow, bars are ten pixels wide
chbh=10
cht=bhs

Back to top

Pie charts

Specify a pie chart with

cht=<pie chart type>

Where <pie chart type> is p or p3 as described in the following table.

The Google Chart API calculates the circle's radius from the minimum of width and height specified in the chart size (chs) parameter. Specify a width greater than height so there's space for labels. The chart is clipped if the size specified is too small.

Parameter Description Example

cht=p

Two dimensional pie chart.

Specify labels with chl as described in Pie chart labels.

Unless specified otherwise, pie segment colors are interpolated from dark orange to pale yellow. Specify other colors as described in section Colors.

Two-dimensional pie chart with six segments where segment colors are interpolated from dark to pale orange

cht=p

cht=p3

Three dimensional pie chart.

Specify labels with chl as described in Pie chart labels.

Three-dimensional pie chart with six segments where segment colors are interpolated from dark to pale orange

cht=p3

Back to top

Venn diagrams

Specify a venn diagram with

cht=v

Supply one data set where:

  • the first three values specify the relative sizes of three circles, A, B, and C
  • the fourth value specifies the area of A intersecting B
  • the fifth value specifies the area of B intersecting C
  • the sixth value specifies the area of C intersecting A
  • the seventh value specifies the area of A intersecting B intersecting C
Parameter Description Example

cht=v

In this example the first circle is specified with 100, the second with 80, and the third with 60. The overlap between all circles is specified with 30.

For information on available parameters for Venn diagrams see Optional parameters by chart type.

Venn diagram with three overlapping circles
cht=v
chd=t:100,80,60,30,30,30,10

Back to top

Scatter plots

Specify a scatter plot with

cht=s

Parameter Description Example

cht=s

Supply two data sets, the first data set specifies x coordinates, the second set specifies y coordinates.

The default shape for data points is a circle. Specify a different data point shape with the chm parameter as described in Shape markers.

The default data point color is blue. Specify other colors as described in section Colors.

In the example, you'll notice the data points vary in size. To do this, specify a third data set. Any size specified with the chm parameter determines the maximum size for any data point. The size at which each data point is drawn is scaled with the optional third data set. So, for example, specifying a size of 20 pixels with chm and the highest value possible for the type of encoding you are using (9, 100.0 or ..) in the third data set will result in a data point of 20 pixels.

Scatter plot with default blue circle data points in different sizes as defined by a third data set
cht=s

Back to top

Colors

Specify a color with at least a 6-letter string of hexadecimal values in the format RRGGBB. For example:

  • FF0000 = red
  • 00FF00 = green
  • 0000FF = blue
  • 000000 = black
  • FFFFFF = white

You can optionally specify transparency by appending a value between 00 and FF where 00 is completely transparent and FF completely opaque. For example:

  • 0000FFFF = solid blue
  • 0000FF00 = transparent blue

The following color options are available:

Back to top

Data set colors

Specify colors for lines, bars, Venn diagrams, and pie segments with

chco=
<color1>,
...
<colorn>

Where <color1> and all subsequent color values are RRGGBB format hexadecimal numbers.

Parameter Description Example

chco

This example has three data sets and three colors specified.

Line chart with one red, one blue, and one green line

chco=ff0000,00ff00,0000ff

This example also has three data sets, but only two colors are specified. Because of this the last two lines are both drawn in the last color (red 0000ff).

Line chart with two red lines and one blue line

chco=ff0000,0000ff

For bar charts, if the number of colors specified is less than the number of data sets then colors are alternated. In the following chart, the third data set, Bar, is drawn in the first color. If only one color is specified all data sets are drawn in that color.

Horizontal bar chart with one data set in red the second in green and the third in red

chco=ff0000,00ff00
chd=s:FOE,THE,Bar

Here's the same chart with three colors specified.

Horizontal bar chart with one data set in red, the second stacked in green, and the third in blue

chco=ff0000,00ff00,0000ff
chd=s:FOE,THE,Bar

For pie charts, if the number of colors specified is less than the number of slices, then colors are interpolated.

Three dimensional pie chart with segments interpolated from dark to pale blue

chco=0000ff

For Venn diagrams, if the number of colors specified is less than the number of circles the last color specified is repeated.

Venn diagram with three overlapping circles, one circle is green the others are blue
chco=00ff00,0000ff

Back to top

Chart area and background fill

Specify background fill or chart area with

chf=
<bg or c><type of fill>

Where:

  • <bg or c> is bg for background fill or c for chart area fill.
  • <type of fill> is one of the following:
  • the pipe character (|) separates fill definitions. No pipe character is required at the end of a fill definition.

Back to top

Solid fill

Specify solid fill with

chf=
<bg or c>,s,<color>|
<bg or c>,s,<color>

Where:

  • <bg or c> is bg for background fill or c for chart area fill.
  • <s> indicates solid fill.
  • <color> is an RRGGBB format hexadecimal number.
  • the pipe character (|) separates fill definitions. No pipe character is required after the second definition.
Parameter Description Example

chf

This example fills the image background with pale gray (efefef).

Red line chart with pale gray background

chf=bg,s,efefef

This example fills the background with pale gray (efefef) and chart area in black (000000). You can specify both background and chart area for line charts and scatter plots.

Scatter plot with points in blue, chart area in black, and pale gray background

chf=bg,s,efefef|
c,s,000000

Only background fill is available for bar charts, pie charts, and Venn diagrams.

Horizontal bar chart with pale yellow background

chf=bg,s,FFF2CC

Back to top

Linear gradient

Specify linear gradient with

chf=<bg or c>,lg,<angle>,<color 1>,<offset 1>,<color n>,<offset n>

Where:

  • <bg or c> is bg for background fill or c for chart area fill.
  • lg specifies linear gradient.
  • <angle> specifies the angle of the gradient between 0 (horizontal) and 90 (vertical).
  • <color x> are RRGGBB format hexadecimal numbers.
  • <offset x> specify at what point the color is pure where: 0 specifies the right-most chart position and 1 the left-most.
Parameter Description Example

chf

Chart area has a horizontal (left to right) linear gradient, specified with an angle of zero degrees (0).

Blue (76A4FB) is the first color specified. This is pure at the right-most side of the chart.

White (ffffff) is the second color specified. This is pure at the left-most side of the chart.

The chart background is drawn in gray (EFEFEF).

Red line chart with pale gray background and chart area in a white to blue linear gradient from left to right

chf=
c,lg,0,76A4FB,1,ffffff,0|
bg,s,EFEFEF

Chart area has a diagonal (bottom left to top right) linear gradient, specified with an angle of forty five degrees (45).

White (ffffff) is the first color specified. This is pure at the bottom left of the chart.

Blue (6A4FB) is the second color specified. This is pure at the top right of the chart.

The chart background is again drawn in gray (EFEFEF).

Red line chart with pale gray background and chart area in a white to blue diagonal linear gradient from bottom left to top right

chf=
c,lg,45,ffffff,0,76A4FB,0.75|
bg,s,EFEFEF

Chart area has a vertical (top to bottom) linear gradient, specified with an angle of ninety degrees (90).

Blue (76A4FB) is the first color specified. This is pure at the top of the chart.

White (ffffff) is the second color specified. This is pure at the bottom of the chart.

The chart background is again drawn in gray (EFEFEF).

Red line chart with pale gray background and chart area in a white to blue vertical linear gradient from bottom to top

chf=
c,lg,90,76A4FB,0.5,ffffff,0|
bg,s,EFEFEF

Back to top

Linear stripes

Specify linear stripes with

chf=<bg or c>,ls,<angle>,<color 1>,<width 1>,<color n>,<width n>

Where:

  • <bg or c> is bg for background fill or c for chart area fill.
  • ls specifies linear stripes.
  • <angle> specifies the angle of the gradient between 0 (vertical) and 90 (horizontal).
  • <color> is an RRGGBB format hexadecimal number.
  • <width> must be between 0 and 1 where 1 is the full width of the chart. Stripes are repeated until the chart is filled.
Parameter Description Example

chf

Chart area with vertical stripes specified with an angle of zero (0).

The first color specified (dark gray CCCCCC) is the first stripe drawn at a width of 20% of the chart width.

The second color specified (white ffffff) is also drawn at a width of 20%.

Stripes alternate until the chart is filled.

The chart background is omitted.

Blue line chart with alternating gray and white stripes from left to right

chf=c,ls,0,CCCCCC,0.2,
FFFFFF,0.2

Chart area with horizontal stripes specified with an angle of ninety degrees (90).

The first color specified (the darkest gray 999999) is the first stripe drawn at a width of 25% of the chart width.

The second and third colors specified (the lighter gray CCCCCC and white FFFFFF) are also drawn at a width of 25%.

Stripes alternate until the chart is filled.

The chart background is omitted.

Blue line chart with a dark gray, pale gray, white and dark gray stripes from bottom to top

chf=
c,ls,90,
999999,0.25,
CCCCCC,0.25,
FFFFFF,0.25

Back to top

Labels

The following types of labels are available:

Chart title

Specify a chart title with

chtt=<chart title>

Parameter Description Example

chtt

Specify a space with a plus sign (+).

Use a pipe character (|) to force a line break.


Vertical bar chart with title
chtt=Site+visitors+by+month|
January+to+July

Optionally, you can also set the title's color and size with

chts=<color>,<fontsize>

The chart is clipped (only partially visible) if the size specified (with chs) is too small.

Vertical bar chart with blue, 20 pixel, title
chtt=Site+visitors
chts=FF0000,20

Back to top

Legend

Specify a legend for a chart with

chdl=<first data set label>|<n data set label>

Parameter Description Example

chdl

Use chdl together with line colors as described in section Colors.

In these examples the first data set is drawn in red, the second in green and the third in blue.

Red, blue, and green line chart with matching legends
chdl=First|Second|Third
chco=ff0000,00ff00,0000ff
Venn diagram with two smaller circles enclosed by a larger circle
chdl=First|Second|Third
chco=ff0000,00ff00,0000ff

Back to top

Pie chart labels

Specify labels with

chl=
<label 1 value>|
...
<label n value>

Specify a missing value with two consecutive pipe characters (||).

Parameter Description Example
chl Labels for a three-dimensional pie chart.

Three dimensional pie chart with May, June, July, August, September and October labels for each segment

chl=May|Jun|Jul|Aug|Sep|Oct

Back to top

Multiple axis labels

Multiple axis labels are available for line charts, bar charts and scatter plots:

Axis type

Specify multiple axes with

chxt=
<axis 1>,
...
<axis n>

Available axes are:

  • x = bottom x-axis
  • t = top x-axis
  • y = left y-axis
  • r = right y-axis

Axes are specified by the index they have in the chxt parameter specification. The first axis has an index of 0, the second has an index of 1, and so on. You can specify multiple axes by including x, t, y, or r multiple times.

To create multiple axes at least the chxt parameter is required. If other parameters are missing the Chart API uses defaults as described in the following sections.

Parameter Description Example

chxt

This example shows two lower x-axes (x is included twice), left and right y-axes (y and r) plus one top axis (t).

Note: Because axis labels are omitted the Chart API assumes a range of 0 to 100 for all axes.

Line chart with the labels: 0, 20, 40, 60, 80, and 100 on the left and right and labels: 0, 25, 50, 75, and 100 twice on the x-axis one set below the other

chxt=x,y,r,x,t

Back to top

Axis labels

Specify labels with

chxl=
<axis index>:|<label 1>|<label n>|
...
<axis index>:|<label 1>|<label n>

The index parameter specifies the index of the axis to which the labels apply.
All labels are separated by the pipe character (|).

Note: Axis labels must be specified in sequence (0, then 1, then 2, and so on).

The first label is placed at the start, the last at the end, others are uniformly spaced in between.

Parameter Description Example

chxt and chxl

This example shows left and right y-axes (y and r) plus two sets of values for the x-axis (x).

Note: the pipe character (|) is not required after the last parameter.

Line chart with 0 and 100 on the left, A, B, and C on the right, Jan, July, Jan, July, and Jan on the x-axis and 2005, 2006 and 2007 below

chxt=x,y,r,x
chxl=
0:|Jan|July|Jan|July|Jan|
1:|0|100|
2:|A|B|C|
3:|2005|2006|2007

As above except left y-axis labels (y) are not specified (the 1: index is not included in the chxl parameter).

Note: the pipe character (|) is not required after the last parameter.

Line chart with 0 to 100 on the left, A, B, and C on the right, Jan, July, Jan, July, and Jan on the x-axis and 2005, 2006 and 2007 below

chxt=x,y,r,x
chxl=
0:|Jan|July|Jan|July|Jan|

(y-axis omitted)
2:|A|B|C|
3:|2005|2006|2007

Back to top

Axis label positions

Specify label positions with

chxp=
<axis index>,<label 1 position>,<label n position>|

...
<axis index>,<label 1 position>,<label n position>

Use floating point numbers for position values. Separate data for a different axis with a pipe character (|). If labels (chxl) are omitted, label text is taken from the position value.

Parameter Description Example

chxp

This example shows left and right y-axes (y and r) and one x-axis (x).

The x-axis (index 0) has neither positions nor labels. The Chart API therefore assumes a range of 0 to 100 and spaces the values evenly.

The left y-axis (y) has both labels (max, average, and min) and positions (10,35,75).

The right y-axis (r) has only positions (0,1,2,4) so the Chart API uses the positions as the labels.

Line chart with min, average, and max on the left, 0, 1, 2, and 4 on the right and 0, 25, 50, 75, and 100 along the x-axis
chxt=x,y,r
chxl=1:|min|average|max
chxp=1,10,35,75|2,0,1,2,4

Back to top

Axis range

Specify a range with

chxr=
<axis index>,<start of range>,<end of range>|
...
<axis index>,<start of range>,<end of range>

Separate multiple axis ranges with the pipe character (|).

Parameter Description Example

chxr

This example shows left and right y-axes (y and r) and one x-axis (x).

Each axis has a defined range. Because no labels or positions are specified, values are evenly spaced and taken from the given range.

Note: Axis direction is reversed for the left y-axis (r) as the first value (1000) is larger than the last value (0).

Line chart with 0, 50, 100, 150, and 200 on the left, 1000, 800, 600, 400, 200, and 0 on the right and 250 and 500 on the x-axis
chxt=x,y,r
chxr=0,100,500|1,0,200|2,1000,0

Here only the x-axis is defined (x). This axis has range, labels, and positions so all three sets of values are used.

Line chart with 200, 300, and 400 on the x-axis
chxt=x
chxr=0,100,500
chxl=0:|200|300|400
chxp=0,200,300,400

Back to top

Axis styles

Specify font size, color, and alignment for axis labels with

chxs=
<axis index>,<color>,<font size>,<alignment>|
...
<axis index>,<color>,<font size>,<alignment>

where:

  • <axis index> is the axis index as specified in chxt.
  • <color> is an RRGGBB format hexadecimal number.
  • <font size> is optional. If used this specifies the size in pixels.
  • <alignment> is optional. By default: x-axis labels are centered, left y-axis labels are right aligned, right y-axis labels are left aligned. To specify alignment, use 0 for centered, -1 for left aligned, and 1 for right aligned.

Separate multiple values with a pipe character (|).

Parameter Description Example

chxs

Font size, color, and alignment are specified for the second x-axis.

Line chart with min, average, and max on the left, 0, 1, 2, 3, and 4 on the right, 0 to 100 along the x-axis and Jan, Feb, and March in blue below
chxt=x,y,r,x
chxr=2,0,4
chxl=3:|Jan|Feb|Mar|1:|min|average|max
chxp=1,10,35,75
chxs=3,0000dd,13
Font size, color, and alignment are specified for both x-axes. Line chart with 1st and 15th repeating along the x-axis and Feb and Mar below. All labels are in blue
chxt=x,y,r,x
chxl=3:|Jan|Feb|Mar||
     0:|1st|15th|1st|15th|1st
chxs=0,0000dd,10|3,0000dd,12,1

Back to top

Styles

The following styles are available:

Line styles

Specify chart line styles with

chls=
<data set 1 line thickness>,<length of line segment>,<length of blank segment>|
...

<data set n line thickness>,<length of line segment>,<length of blank segment>

Parameter values are floating point numbers, multiple line styles are separated by the pipe character (|). The first line style is applied to the first data set, the second style to the second data set, and so on.

Parameter Description Example

chls

Here the thick dashed line is specified by 3,6,3 and the thinner solid line is specified by 1,1,0.

Line chart with one solid line and one dashed line
chls=3,6,3|1,1,0

Back to top

Grid lines

For line charts specify a grid with:

chg=
<x axis step size>,
<y axis step size>,
<length of line segment>,
<length of blank segment>

Parameter values can be integers or have a single decimal place - 10.0 or 10.5 for example.

Parameter Description Example

chg

An example where only step size is defined (20,50) so the Chart API defaults to a dashed grid line.

Line chart with 5 vertical and two horizontal pale gray dashed grid lines
chg=20,50

Here step size (20,50), line segment (1), and blank segment (5) are defined.

Line chart with 5 vertical and two horizontal faint, pale gray, dashed grid lines
chg=20,50,1,5

A solid grid is achieved by specifying a blank segment of zero (0).

Line chart with 5 vertical and two horizontal pale gray, solid grid lines
chg=20,50,1,0

Back to top

Shape and range markers

For line charts and scatter plots only, specify shape markers for points, and horizontal and vertical range markers, with chm.

Shape markers

Specify shape markers for points on line charts and scatter plots with:

chm=
<marker type>,<color>,<data set index>,<data point>,<size>|
...
<marker type>,<color>,<data set index>,<data point>,<size>

Where:

  • <marker type> is one of the following characters:
    a represents an arrow.
    c represents a cross.
    d represents a diamond.
    o represents a circle.
    s represents a square.
    v represents a vertical line from the x-axis to the data point.
    V represents a vertical line to the top of the chart.
    h represents a horizontal line across the chart.
    x represents an x shape.

  • <color> is an RRGGBB format hexadecimal number.
  • <data set index> the index of the line on which to draw the marker. This is 0 for the first data set, 1 for the second and so on.
  • <data point> is a floating point value that specifies on which data point the marker will be drawn. This is 1 for the first data set, 2 for the second and so on. Specify a fraction to interpolate a marker between two points.
  • <size> is the size of the marker in pixels.

Separate multiple markers with the pipe character (|).

Parameter Description Example

chm


Here's an example of the full set of markers.

The last marker in the list, h, is the horizontal line that intersects the vertical line, v, at point 7.

Line chart with 20 pixel red cross, 20 pixel green diamond, 9 pixel purple arrow, 20 pixel orange circle, 10 pixel blue square, 1 pixel pale gray vertical line, 1 pixel blue line and a 20 pixel yellow cross all drawn on the data points of a single line. A thin black horizontal line intersects the vertical line v at point 7
chm=
c,FF0000,0,1.0,20.0|
d,80C65A,0,2.0,20.0|
a,990066,0,3.0,9.0|
o,FF9900,0,4.0,20.0|
s,3399CC,0,5.0,10.0|
v,BBCCED,0,6.0,1.0|
V,3399CC,0,7.0,1.0|
x,FFCC33,0,8.0,20.0|
h,3399CC,0,7.0,1.0

Here's an example of marker type s on a scatter plot.

See the Scatter plot section for details on setting the size of each data point.

Scatter plot with 10 pixel red square markers
chm=
s,FF0000,1,1.0,10.0


Here's an example using diamonds and circles for two data sets.

If two data points occupy the same place (by having the same x and y values), the first point specified is drawn. Here the circle takes precedence over the diamond.


Line chart, one line has 10 pixel circles on each data point the other line has 10 pixel diamonds. A circle is drawn on the point that is common to both lines
chm=
o,ff9900,0,1.0,10.0|
o,ff9900,0,2.0,10.0|
o,ff9900,0,3.0,10.0|
d,ff9900,1,1.0,10.0|
d,ff9900,1,2.0,10.0|
d,ff9900,1,3.0,10.0

Back to top

Range markers

For line charts and scatter plots specify horizontal and vertical range markers with:

chm=
<r or R>,<color>,<any value>,<start point>,<end point>|
...
<r or R>,<color>,<any value>,<start point>,<end point>

Where:

  • <r or R> is r for a horizontal range and R for a vertical range.
  • <color> is an RRGGBB format hexadecimal number.
  • <any value> is ignored.
  • <start point> for:
    - horizontal range markers is the position on the y-axis at which the range starts where 0.00 is the bottom and 1.00 is the top.
    - vertical range markers is the position on the x-axis at which the range starts where 0.00 is the left and 1.00 is the right.
  • <end point> for:
    - horizontal range markers is the position on the y-axis at which the range ends where 0.00 is the bottom and 1.00 is the top.
    - for vertical range markers is the position on the x-axis at which the range ends where 0.00 is the left and 1.00 is the right.

Separate multiple range markers with the pipe character (|).

Parameter Description Example

chm=r

Range markers can be a single line or a band of color. Here the first marker is a pale blue (E5ECF9) band while the second is a line in black (000000).

Line chart with a pale blue horizontal band stretching from 25 percent to 75 percent of the way up the y-axis and a thin horizontal line ten percent of the way up the y-axis
chm=
r,E5ECF9,0,0.75,0.25|
r,000000,0,0.1,0.11
chm=R Here's the same example for vertical range markers. In this case, the first marker is a line in red (ff0000) while the second is a pale blue (A0BAE9) band. Line chart with a pale blue vertical band stretching from 25 percent to 75 percent of the way along the x-axis and a thin vertical line ten percent of the way along the x-axis
chm=
R,ff0000,0,0.1,0.11|
R,A0BAE9,0,0.75,0.25
chm=
R...|r...
You can mix horizontal and vertical range markers. Note that the last marker specified takes precedence over previous markers if they overlap. Here the horizontal markers are specified last - so they are drawn over the top of the vertical markers.

Line chart with a pale blue vertical band stretching from 25 percent to 75 percent of the way along the x-axis and a thin vertical line ten percent of the way along the x-axis
chm=
R,ff0000,0,0.1,0.11|
R,A0BAE9,0,0.75,0.25
|
r,E5ECF9,0,0.75,0.25|
r,000000,0,0.1,0.11

Back to top

Fill area

Specify a fill area with:

chm=
b,<color>,<start line index>,<end line index>,<any value>|
...
b,<color>,<start line index>,<end line index>
,<any value>

Where:

  • <color> is an RRGGBB format hexadecimal number.
  • <start line index> is the index of the line at which the fill starts. This is determined by the order in which data sets are specified with chd. The first data set specified has an index of zero (0), the second 1, and so on.
  • <end line index> is the index of the line at which the fill ends. This is determined by the order in which data sets are specified with chd. The first data set specified has an index of zero (0), the second 1, and so on.
  • <any value> is ignored.

Separate multiple fill areas with the pipe character (|).

Parameter Description Example

chm=b

Take care to specify the data set with the largest values first:

To fill from the top of the chart to the first line include a data set with only the highest data value (9, 100.0, or .. depending on the type of encoding used).

To fill from the last line to the bottom of the chart include a data set with only the lowest data value (A, 0, or AA depending on the type of encoding used).

The lines themselves are drawn in black using chco as described in section Colors.


Three lines on a chart; chart is shaded in green from bottom to first line, red from first to second line, dark blue from second to third line and pale blue from third line to top of the chart
chd=s:
99,
cefhjkqwrlgYcfgc,

QSSVXXdkfZUMRTUQ,
HJJMOOUbVPKDHKLH,
AA

chm=
b,76A4FB,0,1,0| (light blue)
b,224499,1,2,0| (blue)
b,FF0000,2,3,0| (red)
b,80C65A,3,4,0 (green)

chco=000000,000000,000000,
000000,000000

By contrast the first and last data sets (99 and AA) have been removed for this chart.

Also, chco is omitted so lines are drawn according to the chart type parameter. Here the parameter is cht=lc so the default line color of yellow is used.

Three lines on a chart; chart no shading from bottom to first line, red from first to second line, dark blue from second to third line and no shading from third line to top of the chart. Lines are drawn in default yellow
chd=s:
cefhjkqwrlgYcfgc,
QSSVXXdkfZUMRTUQ,
HJJMOOUbVPKDHKLH,

chm=
b,224499,0,1,0| (blue)
b,FF0000,1,2,0| (red)
b,80C65A,2,3,0 (green)

chm=B

For a single data series, it is simpler to use chm=B. In this case all the area under the line is filled.

Single line on a chart with shading in blue from the bottom of the chart to the line
chm=B,76A4FB,0,0,0
chd=s:ATSTaVd21981uocA

Back to top


WRITTEN BY
hopangbear

트랙백  0 , 댓글  0개가 달렸습니다.
secret
개발자들의 아카데미 상
원문 : http://agile.egloos.com/


하면 떠오르는 것은 ? JOLT 상...

이 JOLT라는게 콜라 이름이라는걸 알게 된게 군대에서였다...

다른 콜라에 비해 카페인 함유량이 두배...

밤을 자주 새는 개발자들에게 영양보충원이 되어주는...;;;

참 불쌍한 개발자들...;; 나도 요즘 졸리면 녹차에 커피에-_-;; 무지 마셔되는데..;;

우리나라에서는 현미녹차 상이나... 모카커피믹스 상이나... 뭐 그 밖에 양념치킨 상~ 족발 상을 만들어 보는건

어떨까나?

p.s 저렇게 이름을 지어 본 이유는 ㅋㅋ-_-;;
     울 팀에서 자주 마시는 차의 종류와 야식이 대부분 저런거라서 ㅋㅋㅋ


WRITTEN BY
hopangbear

트랙백  0 , 댓글  0개가 달렸습니다.
secret
http://www.lowing.org/fonts/

프로그래머들이 선호하는 폰트라...

1. Bitstream Vera Sans Mono는 현재 사용하고 있고... 근데 한글은 영-_-;; 이쁘지가 않다..;

그래서 이번에.. Fixedsys 로 변경을 ㅋㅋㅋ

WRITTEN BY
hopangbear

트랙백  0 , 댓글  2개가 달렸습니다.
  1. 그냥 Arial이나 Verdana가 편하구나... -_-
    요즘은 Fixed 폰트를 안 쓴지 꽤 된듯. 돋움같은 한글 폰트가 fixed로 된거 있으면 꽤 즐겨쓸 것 같은데.
  2. #Kenial : l, I의 구분이 워낙 힘들어서리 ㅋㅋㅋ 돋움 같은 한글이 Fixed 있음 좋겠는데.. 누가 맹글런지 ㅋㄷ
secret

양손잡이조직

흠 시끌시끌했던... 글... 정리가 되었나?


WRITTEN BY
hopangbear

트랙백  0 , 댓글  0개가 달렸습니다.
secret