소개

많은 시각화 양식에는 사용자 정의 가능한 풍부한 프리젠테이션이 포함되어 있다. 차트 작성이 한 가지 예이다. 색상, 레이블, 캡션, 배율 및 유형과 같은 많은 시각적 요소를 사용자 정의하려고 할 수 있다. 위치와 아이콘을 제어할 수 있고 각각의 마커를 클릭할 때 정보를 표시할 수 있는 맵 기반 시각화를 선호할 수도 있다. 프리젠테이션 정보가 복잡하고 구조화되어 있는 경우에는 XML이 정보 인코딩을 위해 적합한 후보이다.

이 기사에서는 다음을 수행하는 방법에 대해 설명한다.

1. 차트 작성 데이터와 프리젠테이션 사용자 정의를 XML로 지정하는 풍부한 사용자 정의 가능 프리젠테이션을 사용하여 차트 작성 위젯을 빌드한다.
2. IBM Mashup Center의 데이터 매시업 편집기를 사용하여 위젯을 위한 XML을 생성한다.
3. 데이터에 따라 프리젠테이션 요소가 매우 다른 샘플 매시업을 빌드한다.

이 기사에서는 독자가 이미 위젯 작성과 관련된 기본사항과 데이터 매시업 빌드에 익숙하다고 가정한다. 특히 JavaScript로 프로그래밍하는 방법을 알아야 하며 IBM Mashup Center 데이터 매시업 편집기를 사용해 본 경험이 있어야 한다. IBM Mashup Center and the InfoSphere® MashupHub, Part 2: In-depth look at Feed Mashup Editor within IBM Mashup Center's InfoSphere MashupHub 기사(참고자료 참조)에서는 데이터 매시업 편집기에 대한 적절한 소개를 제공한다. 위젯 작성에 대한 소개는 Mashups, beyond reporting 기사(참고자료 참조)를 참고한다.

차트 작성 위젯 빌드하기

이 섹션에서는 차트 작성 데이터와 프리젠테이션 사용자 정의를 XML로 지정하는 풍부한 사용자 정의 가능 프리젠테이션을 사용하여 차트 작성 위젯을 빌드하는 방법에 대해 설명한다.

FusionCharts Free 이해하기

이 기사에서 사용되는 차트 작성 위젯 예제는 FusionCharts Free 차트 작성 패키지를 기반으로 한다. FusionCharts는 맵의 차트를 작성하고 맵을 빌드하는 데 필요한 수많은 패키지를 제공한다. 기사의 예제에서는 오픈 소스 FusionCharts Free 버전을 사용한다. 이는 다음 차트 유형을 지원하는 플래시 차트 작성 컴포넌트이다.

• 일반적인 차트 유형(원형, 막대형 및 선형 포함)
• 다른 차트 유형을 차트의 다른 시리즈에 지정하여 단일 차트에서 다양한 차트를 혼합하는 혼합형 차트
• 특수 차트(프로젝트 관리를 위한 Gantt 차트와 주식 가격에 대한 양초형 차트)

지원되는 차트 유형의 예를 확인하려면 참고자료 섹션에 있는 FusionCharts Free 사이트에서 Chart Gallery 페이지를 확인한다. 이 사이트에는 제품 라이센스 부여, 데모 및 기타 정보도 들어 있다.

FusionCharts에서는 XML을 사용하여 차트로 작성될 데이터와 프리젠테이션의 룩앤필을 지정한다. FusionCharts는 XML을 사용하여 데이터 및 프리젠테이션 정보를 지정하는 방법의 장점을 보여 주는 완벽한 예제를 제공한다.

기사의 첫 번째 부분에서는 FusionCharts Free 패키지 주위에 씬 위젯 랩퍼를 빌드하여 이 패키지를 위젯으로 변환하는 방법에 대해 설명한다. 기사의 나머지 부분에서는 IBM Mashup Center를 사용하여 XML을 생성하는 방법에 대해 설명한다. IBM Mashup Center는 생성기를 공급하여 다양한 데이터 소스로부터 데이터를 추출하여 피드로 변환했다. XML을 강화하고 서식을 변경하도록 설계된 데이터 매시업 편집기가 포함되어 있다. IBM Mashup Center는 데이터 소스로부터 직접 대화식 애니메이션 차트를 작성하기 위해 FusionCharts Free 패키지에 필요한 형식으로 XML을 쉽게 생성하는 방법을 제공한다.

위젯 정의 파일 작성하기

이 예제를 위한 FusionCharts Free(경량) 위젯 패키지는 위젯 정의 파일, 두 개의 JavaScript 파일 및 FusionCharts Free 패키지의 swf 파일로 구성되어야 한다. 이 섹션에서는 위젯 정의 파일인 iWidget.xml에 대해 설명한다.

리스트 1에서는 XML 파일의 루트 요소를 보여 준다. iwidget 루트 요소에 있는 iScope 속성은 iWidget 콜백 함수를 구현하는 JavaScript 오브젝트의 이름을 지정한다. 이 위젯은 두 개의 JavaScript 파일을 사용하여 구현된다. FusionCharts.js는 FusionCharts Free 패키지에서 제공되고 FCFWidget.js는 씬 위젯 랩퍼이다. 이들은 두 개의 자원 요소를 사용하여 로드된다. 속성에 대한 세부사항은 참고자료 섹션에 있는 위젯 프로그래밍 및 API 문서 링크를 참조한다.

<iw:iwidget name="FCFWidget" xmlns:iw="http://www.ibm.com/xmlns/prod/iWidget"
               iScope="FCFWidget"
               allowInstanceContent="true"
               supportedModes="view edit" mode="view" lang="en">

  <iw:resource uri="FusionCharts.js"/>
  <iw:resource uri="FCFWidget.js"/>  

리스트 2에서는 위젯의 송수신 이벤트에 대한 정의를 보여 준다. 위젯에는 다른 위젯이 차트 작성 XML을 변경할 수 있도록 하는 입력 URL에 대한 하나의 수신 이벤트가 있다. 또한 위젯에는 차트 요소가 선택될 때 발생하는 하나의 전송 이벤트도 있다. 수신 이벤트는 handled 속성과 onEvent 속성을 지정하여 나타낸다. onEvent 속성의 값은 이벤트가 수신될 때 호출할 함수의 이름이다. published 속성은 전송 이벤트를 나타낸다.

<iw:event id="Display from URL"
             handled="true" onEvent="graphURLChanged"
             eventDescName="desc_DataSourceURL"/>
<iw:eventDescription id="desc_DataSourceURL" 
                     payloadType="url"
                     description="Text representing a URL to a Fusion charts XML file"
                     lang="en"/>

<iw:event id="chartClicked" eventDescName="desc_chartClicked" published="true"/>
<iw:eventDescription id="desc_chartClicked"
                      payloadType="text"
                      description="A data element in the chart was clicked" lang="en"/>

위젯 정의 파일은 보기 및 편집 모드에 표시될 항목도 지정한다. 이 레이아웃은 iw:content 요소에 CDATA로 포함된 HTML 마크업으로 지정한다. 리스트 3에서는 보기 모드를 위한 HTML 마크업을 보여 준다. JavaScript로 조작할 수 있는 id 속성이 포함된 div 요소가 하나 있다. id의 값은 _IWID_을 접두부로 사용한다. _IWID_ 접두부는 위젯 작성 중에 실제 고유 위젯 인스턴스 ID로 대체된다. 이렇게 하면 동일한 HTML 페이지에 복수의 위젯 인스턴스가 있는 경우에도 각각 고유 ID를 가지게 된다.

<iw:content mode="view">
  <![CDATA[

  <div id="_IWID_chart"></div>

  ]]>
</iw:content>	

이 위젯은 FusionCharts Free와 함께 제공되는 기존 차트 작성 위젯과 상당히 다르다. 이 위젯은 확장 구성 GUI를 제공하지 않는 정반대의 접근 방식을 사용한다. 대신 이 위젯은 기본 FusionCharts 차트 작성 XML을 XML이 제어하는 모든 형식과 함께 노출한다. 편집 모드 섹션에는 차트 작성 XML에 URL을 입력하기 위한 텍스트 상자와 차트 유형을 선택하기 위한 드롭다운 텍스트 상자라는 두 개의 입력 요소만 포함된 HTML 형식이 들어 있다. 리스트 4에서는 드롭다운 텍스트 상자를 위한 HTML 마크업의 일부를 보여 준다. 드롭 다운 옵션은 차트 유형을 기본 swf 파일에 맵핑하여 해당 차트 작성 로직을 구현한다. FusionCharts Free 패키지에서 제공되는 모든 swf 파일은 위젯 zip 파일에 포함되어 있다.

<iw:content mode="edit">
  <![CDATA[

  :::::::::::::::::::::::::::::::::::::::::::::::::::::::::

  <select id="_IWID_chartType" >
        <option value='FCF_Area2D.swf'>2D Area</option>
        <option value='FCF_Bar2D.swf'>2D Bar</option>
            :::::::::::::::::::::::::::::::::::::::::::::::
  </select>

  :::::::::::::::::::::::::::::::::::::::::::::::::::::::::

  ]]>
</iw:content>	

이 기사에서 언급한 모든 JavaScript와 전체 iwidget.xml이 포함된 완전한 위젯 패키지를 다운로드할 수 있는 링크는 참고자료를 참조한다.

차트 표시하기

JavaScript 구현 파일은 FCFWidget.js이다. 이 파일은 load, unload, onview, onedit와 모든 기타 사용자 정의 이벤트 및 서버 통신을 포함한 표준 이벤트를 처리하는 Dojo 클래스이다. onview 함수에는 지정된 차트를 표시하는 로직이 들어 있다. 기타 표준 이벤트 및 그 처리에 대한 설명은 참고자료를 참조한다.

onview 함수는 먼저 위젯의 크기를 판별한 다음 showChart 함수를 호출한다. onview는 onedit 이후 또는 초기 로드 중에 호출되므로 먼저 AJAX 호출을 사용하여 차트 작성 XML을 검색해야 한다. 이를 표시하려면 retrieveData 매개변수가 true로 설정된 showChart 함수를 호출한다. onSizeChanged 함수는 showChart 함수도 호출할 수 있으며 이 경우 retrieveData 매개변수를 false로 설정하여 차트 XML URL에 대한 변경사항이 없으며 데이터가 이미 로드되었음을 나타낸다. 이 경우 showFusionChart 함수를 직접 호출하여 차트를 인스턴스화할 수 있다. 리스트 5에서는 showChart 함수를 보여 준다.

    showChart: function( retrieveData )
    {
        this.debugTrace( "showChart w,h=" + this.width + ',' + this.height );  

        if ( retrieveData )
            this._loadDataUsingDojo( this.url
                                   , dojo.hitch( this, this._cbProcessReturnedXML ) );
        else if ( this.FCFgraphXML != null )
            this.showFusionChart( this.FCFgraphXML );
        // else ignore
    },

FusionCharts.js 파일에 포함된 JavaScript 오브젝트 FusionCharts가 차트를 표시한다. 다음 매개변수를 전달하여 FusionCharts의 인스턴스를 인스턴스화해야 한다.

• 사용자가 선택한 차트 유형에 해당하는 swf 파일을 가리키는 URL. 모든 swf 파일은 위젯 zip 파일에 포함되어 있다는 것을 기억한다. 모든 zip 파일 컨텐츠가 있는 위치를 가리키는 완전한 URL을 얻으려면 iContext 함수로부터 rewriteURI 메소드를 호출한다.
• FusionCharts에서 생성한 HTML 요소에 해당하는 ID로 사용될 고유 값
• 차트의 너비
• 차트의 높이

차트 작성 XML 데이터는 setDataXML 함수를 사용하여 FusionCharts 오브젝트에 전달된다. 그런 다음 리스트 6과 같이 render 함수를 사용하여 차트를 인스턴스화한다.

    //The following is mostly from Fusion Chart
    showFusionChart: function( strXML )
    {
        var swfUrl = this.iContext.io.rewriteURI( this.charttype );
        var chart1 = new FusionCharts(swfUrl, "FC"+this.domID
                                     , this.width, this.height, "0", "0");
        chart1.setDataXML(strXML);
        chart1.render( this.domID + "chart" );		
    },

FusionCharts Free 패키지의 FusionCharts.js 파일에 대해 두 가지 사소한 변경사항이 작성되었다. 차트가 드롭 다운 메뉴를 간섭하지 않도록 하기 위해 두 위치에서 wmode 매개변수를 opaque로 설정해야 한다. 두 변경사항은 모두 // zPOSCHANGE로 표시된다.

클릭 이벤트 처리하기

FusionCharts 제품군에 있는 모든 차트는 드릴다운을 지원한다. 각 차트 유형에서 표시 요소(세로 막대형 차트의 세로 막대, 원형 차트의 조각 등)는 차트의 핫 스팟 역할을 수행할 수 있다. FusionCharts Free에서는 핫 스팟에 대해 다음과 같은 유형의 조치를 정의할 수 있다.

• 동일한 페이지에서 열리는 단순 링크
• 새로운 페이지에서 열리는 단순 링크
• 링크로 호출될 기존 JavaScript 함수(동일한 페이지)

FusionCharts는 차트 작성 XML에 있는 set 요소를 사용하여 표시될 값을 지정한다. 핫 스팟 조치를 지정하려면 선택적 link 속성을 set 요소에 추가한다. 예를 들어, 핫 스팟을 클릭할 때 위젯이 이벤트를 생성할 수 있도록 하길 원한다고 가정해 본다. 단일 매개변수가 포함된 기본 제공 JavaScript 함수 MCClickEvent를 제공하여 이를 수행할 수 있다. 이 함수는 호출되면 이벤트를 생성한다. 리스트 7에서는 '2005,1020' 문자열을 링크 속성의 인수로 전달하여 기본 제공 함수 MCClickEvent를 호출하는 방법을 보여 준다.

  <set  name="2005"
        value="1735.08"
        link="JavaScript: MCClickEvent( '2005,1020' );" />

리스트 8에서 MCClickEvent 함수는 매우 단순하다. 이 함수는 단일 인수를 사용하며 단순히 iContext 함수로부터 fireEvent 함수를 호출한다.

    MCClickEvent: function( arg ) {
        this.iContext.iEvents.fireEvent("chartClicked", null, arg );
    },

MCClickEvent 함수는 페이지에 전반적으로 적용되지는 않지만 인스턴스 메소드이다. FusionCharts Free 컴포넌트가 이 함수를 호출하려면 사용자가 위젯을 나타내는 JavaScript 인스턴스에서 이 함수를 호출해야 한다. JavaScript 인스턴스는 위젯이 페이지에서 인스턴스화될 때까지 알려지지 않으므로 리스트 9와 같이 내부 modifyLink 함수를 사용하여 JavaScript 함수 호출을 다시 작성한다. 이 함수는 차트 작성 XML이 FusionCharts 오브젝트에 전달되기 전에 차트 작성 XML을 사전 처리하기 위해 호출된다.

    modifyLink: function( strXML )
    {
        var temp   = this.domID + "iContext.iScope().MCClickEvent";
        var result = strXML.replace( /JavaScript: MCClickEvent/g, "JavaScript: "+temp );
        return result;
    },

이것으로 위젯 구현에 대한 설명을 마무리한다. 가능한 일부 개선사항으로는 드릴다운 또는 보기 모드에서의 차트 유형 변경에 대한 지원이 있다.

이제 프리젠테이션 정보를 위해 XML을 사용하는 위젯을 가지고 있으므로 IBM Mashup Center를 사용하여 차트 작성 XML을 생성한다.

위로

데이터 매시업 편집기를 사용하여 XML 생성하기

FusionCharts Free 사이트에서 사용 가능한 차트 작성 XML에 대한 온라인 문서는 참고자료를 참조한다. 예를 들어, 세로 막대형 2D 차트를 사용하여 리스트 10에서 XML을 생성한다. 이 차트는 특정 고객의 2005년부터 2008년까지의 연간 매출을 보여 준다. CUSTOMERNAME은 샘플에서 플레이스홀더일 뿐이며 동적으로 생성된다. 각각의 set 요소는 차트에 있는 세로 막대로 표시된다. set 요소는 연간 매출에 해당하며 링크 속성이 포함된 핫 스팟이 되도록 구성된다. 특정 연도에 해당 하는 세로 막대를 클릭할 때 사용자는 고객 ID(샘플에서는 1020)와 연도를 쉼표로 구분된 문자열로 제공하는 이벤트를 생성하려고 한다. 이 정보를 사용하면 특정 연도의 특정 고객에 해당하는 월간 매출로 드릴다운할 수 있다.

<graph  caption="Sales to CUSTOMERNAME"
         xAxisName="Year" yAxisName="Sales" decimalPrecision="0">
  <set  name="2005"
        value="1735.08"
        link="JavaScript: MCClickEvent( '2005,1020' );" />
  <set  name="2006"
        value="1335.08"
        link="JavaScript: MCClickEvent( '2006,1020' );" />
  <set  name="2007"
        value="1582.08"
        link="JavaScript: MCClickEvent( '2007,1020' );" />
  <set  name="2008"
        value="1555.08"
        link="JavaScript: MCClickEvent( '2008,1020' );" />
</graph>

리스트 11에 표시된 데이터베이스에서 생성된 피드를 입력으로 시작한다. IBM Mashup Center 데이터 매시업 편집기를 사용하여 이 피드를 FusionCharts 형식으로 변환할 수 있다. IBM Mashup Center 버전 3에 제공되는 새로운 기능 중 일부에 대해서도 살펴본다.

<entry><content>
   <year>2005</year><totalAmt>1735.08</totalAmt>
</content></entry>
<entry><content>
   <year>2006</year><totalAmt>1335.08</totalAmt>
</content></entry>
<entry><content>
   year>2007</year><totalAmt>1582.08</totalAmt>
</content></entry>
<entry><content>
   <year>2008</year><totalAmt>1555.08</totalAmt>
</content></entry>

IBM Mashup Center 데이터 매시업 편집기 사용에 대한 기본사항을 검토해야 하는 경우에는 참고자료에 있는 기사를 참조한다.

세트 요소 생성하기

데이터 매시업 작성의 첫 번째 단계는 Source 연산자를 사용하여 입력 피드(XML 데이터)를 지정하는 것이다. 피드를 지정한 후 특성 대화 상자의 Advanced 탭에서 Feed Type을 대체해야 한다. 그림 1과 같이 완전한 피드를 단일 반복 항목으로 선택한다. 이유는 IBM Mashup Center v2를 사용하여 FusionCharts 위젯 사용하기에 설명되어 있다.

다음으로 Source 연산자를 Transform 연산자에 연결하고 특성 대화 상자를 연다. 출력(Transform 연산자의 오른쪽)에서 set 요소를 작성하려면 entry 요소를 마우스 오른쪽 단추로 클릭할 때 팝업 메뉴에서 New element를 선택한다. set 요소에는 다음 세 가지 속성이 포함되어 있어야 한다.

• 세로 막대 레이블을 위한 name
• 세로 막대의 높이를 위한 value
• 이벤트 생성을 위한 link

팝업 메뉴를 사용하여 set 요소 아래에서 name 속성을 작성한 후 year 요소 아래에 텍스트 노드가 표시될 때까지 transform 연산자의 입력 쪽(왼쪽)에서 entry 요소를 펼친다. 텍스트 노드를 마우스 오른쪽 단추로 클릭한 후 Copy to the output tree를 선택하여 2005 텍스트를 출력 트리의 name 속성에 복사한다. 네 개의 entry 요소가 있어야 하며 각 요소에는 입력 트리(transform 연산자의 왼쪽)에 year가 포함되어 있다. 이는 entry 요소 옆의 파란색 루프 아이콘에 의해 표시된다. 데이터 매시업 편집기는 이를 고려하여 네 개의 새로운 set 요소(각각의 year에 대해 하나)를 작성한다. 그림 2에서는 출력 트리를 보여 준다.

value 속성도 비슷하게 적성할 수 있다. link 속성의 경우 값은 입력 측에 있는 값의 직접적인 사본이 아니다. 대신 값을 계산해야 한다. 이를 위해 링크 속성을 작성한 후 마우스 오른쪽 단추를 클릭하여 컨텍스트 메뉴를 불러와서 그림 3과 같이 Edit Value를 선택한다.

IBM Mashup Center, 버전 3에서는 하드코딩된 값을 제공할 뿐만 아니라 변수 또는 함수를 사용할 수 있도록 하는 대화 상자 팝업이 표시된다. 여기서 그림 4와 같이 Specify a function value를 선택한다. (IBM Mashup Center 버전 2에서는 함수를 직접 속성 값으로 지정할 수 없다. 대신 요소의 함수 값을 작성한 후 해당 값을 속성에 복사해야 한다.)

클릭 이벤트 처리하기에서 설명한 JavaScript 호출을 생성하려면 concat 함수를 선택한다. 다시 호출하는 경우에는 기본 제공 MCClickEvent 함수가 단일 인수만 사용한다. 연도 세로 막대를 클릭하는 경우에는 선택한 연도의 월간 매출을 드릴다운하려는 것이다. 이를 위해서는 두 개의 값이 포함된 쉼표로 구분된 문자열을 생성하여 고객 ID와 연도라는 두 개의 인수를 전달한다. 그림 5에서는 모든 인수에 대한 값을 보여 준다.

이제 set 요소를 생성할 수 있다. Publish 연산자를 사용하여 루트 요소를 생성하기 전에 Preview 탭으로 이동하여 출력이 예상한 것과 동일한지 확인한다.

헤더 템플리트 사용하기

이제 남은 것은 graph를 루트 요소로 생성하고 x축 레이블과 같은 필수 글로벌 프리젠테이션 속성을 모두 추가한다. IBM Mashup Center 버전 3에서는 publish 연산자에 새로운 사용자 정의 헤더 옵션이 포함되어 있다. Custom 단일 선택 단추를 클릭하면 단일 기본 root 요소가 있는 Header Template 섹션이 나타난다. transform 연산자와 비슷하게 root 요소의 이름을 graph로 바꾸고 New Attribute 팝업 메뉴를 사용하여 프리젠테이션 속성을 생성한다. 하지만 더 편리한 방법이 있다. 그림 6과 같이 root 요소 팝업 메뉴에서 Set Template Tree를 선택한다.

그림 7과 같이 Set Template Tree 메뉴를 클릭하여 XML 단편을 입력하여 편집기로 가져올 수 있는 대화 상자를 불러온다. 많은 수의 속성을 가져오는 경우에는 이를 수행하면 많은 시간을 절약할 수 있다.

root 요소가 모든 연관 속성이 템플리트에 있는 graph로 변경되었다.

이제 그림 8 및 그림 9와 같이 graph 요소 팝업 메뉴에서 Attach repeating element를 선택하여 이전에 작성한 set 요소를 추가한다.

동적 프리젠테이션 작성하기

입력 XML을 통해 프리젠테이션을 구성할 때의 한 가지 장점은 데이터에 따라 가질 수 있는 프리젠테이션 요소가 다양하다는 것이다. 예를 들어, X 기업의 연간 매출 데이터를 표시하는 경우 캡션을 Sales to Company X로 쉽게 변경할 수 있다. 회사 ID가 제공된 경우 회사명을 검색하는 데 필요한 단순 피드가 있다고 가정해 본다. 이 피드를 사용하여 회사명 요소를 추가(병합 사용)한 후 그림 10과 같이 publish 연산자에서 concat 함수를 사용하여 caption 속성의 값을 구성한다.

이제 데이터 매시업이 완료되었다. 이 섹션을 마치기 전에 다음과 같은 관련 사용법을 기억한다.

• 프리젠테이션 요소는 동적으로 생성되기 때문에 비슷한 기술을 사용하여 브라우저 승인 언어 설정에 따라 프리젠테이션을 생성할 수 있다.
• 프리젠테이션이 XML 형식으로 되어 있으면 프리젠테이션 요소에 HTML 마크업을 쉽게 포함시킬 수 있다. RSS 피드에 대한 로고를 포함시키는 것이 간단한 예제이다. 그림 11에서는 피드 컨텐츠에 따라 다른 로고를 표시하는 IBM Mashup Center 피드 위젯을 보여 준다.

위로

IBM Mashup Center, 버전 2와 함께 FusionCharts 위젯 사용하기

IBM Mashup Center 버전 2에서는 속성을 루트 요소에 추가할 수 없다. 이러한 제한을 상쇄하기 위해 이 위젯은 하나의 형식 변형도 지원한다. 이 위젯은 더미 루트 요소 mhubFusion에 의해 랩핑되는 유효한 FusionCharts Free 차트 작성 XML을 승인한다. 세트 요소 생성하기에 설명된 단계를 수행하면 네 개의 set 요소가 포함된 단일 반복 entry가 발생하기 때문에 이러한 단계는 버전 2에도 적용된다. 리스트 12에서는 리스트 10이 버전 2에 적응되는 방법을 보여 준다.

<mhubFusion>
   <graph  caption="Sales to CUSTOMERNAME"
            xAxisName="Year" yAxisName="Sales" decimalPrecision="0">
     <set  name="2005"
           value="1735.08"
           link="JavaScript: MCClickEvent( '2005,1020' );" />
     <set  name="2006"
           value="1335.08"
           link="JavaScript: MCClickEvent( '2006,1020' );" />
     <set  name="2007"
           value="1582.08"
           link="JavaScript: MCClickEvent( '2007,1020' );" />
     <set  name="2008"
           value="1555.08"
           link="JavaScript: MCClickEvent( '2008,1020' );" />
   </graph>
</mhubFusion>

종합하기

그림 12에서는 IBM Mashup Center에서 실행 중인 매시업 애플리케이션을 보여 준다. 이 애플리케이션에는 고객 목록이 맨 위에 있다. 이 목록은 왼쪽 하단의 차트에 연결된다. 이 차트는 목록에서 선택된 고객의 연간 매출을 표시한다. 이 차트는 이 기사에서 작성한 데이터 매시업과 FusionCharts Free 위젯을 사용한다. 이 차트는 오른쪽 하단에 있는 월간 매출 FusionCharts Free 위젯에 연결된다. 특정 연도의 매출을 나타내는 세로 막대를 클릭하면 고객 ID와 연도가 chartClicked 이벤트에 전송된다. 이를 수행하면 월간 매출 차트에 선택된 연도 및 고객의 매출 데이터가 표시된다.

(그림 12그림 12의 확대 이미지 보기)

작성한 매시업의 작동 중인 예제는 참고자료를 참조한다. 공간 관리자를 사용하여 차트 작성 데모를 검색한다.

결론

이 기사에서는 세로 막대형 2D 차트를 위한 XML을 생성하기 위해 데이터 매시업을 구성하는 기본적인 단계에 대해 살펴봤다. FusionCharts Free 패키지에는 다수의 다른 차트 유형이 포함되어 있다. 더 복잡한 차트 유형을 위한 XML을 생성하고 위젯을 강화해 보자. 위젯을 작성할 기회가 있는 경우 사용자가 하드코딩된 값을 입력하는 정교한 입력 양식을 작성하는 대신 입력 XML 파일에 있는 데이터로 프리젠테이션 정보를 지정하는 것을 고려해 본다.

위로

다운로드 하십시오

다운로드 방식에 대한 정보

참고자료

교육

• Mashup, beyond Reporting에서 경량 위젯을 빌드하는 방법에 대해 살펴볼 수 있다.
  
  
• Developing widgets for IBM Mashup Center 1.0 기사에서 사용자 정의 위젯 작성에 대한 적절한 소개를 확인할 수 있다.
  
  
• Integrating Flex applications with IBM Mashup Center 기사를 읽어보고 Flex를 사용하여 위젯을 개발하는 방법을 배우자.
  
  
• IBM Mashup Center and the InfoSphere MashupHub, Part 2: In-depth look at Feed Mashup Editor within IBM Mashup Center's InfoSphere MashupHub에서 데이터 매시업 편집기 사용 방법을 살펴볼 수 있다.
  
  
• Dojo에 대해 살펴보려면 The Official Dojo Documentation 웹 페이지를 참조한다.
  
  
• 온라인 문서 및 차트 갤러리 웹 페이지에서 FusionCharts Free에 대해 살펴볼 수 있다.
  
  
• 최신 위젯 프로그래밍과 API 문서 링크를 따라가 보자.
  
  
• developerWorks Information Management 영역에서는 Information Management에 대한 정보를 제공한다. 기술 자료, 사용법 기사, 교육, 다운로드, 제품 정보 등을 찾아볼 수 있다.
  
  
• developerWorks 기술 행사 및 웹 캐스트를 통해 최신 정보를 얻을 수 있다.
  
  
• Twitter의 developerWorks 페이지를 살펴보자.
  
  

제품 및 기술 얻기

• Lotus Greenhouse에서 IBM Mashup Center를 직접 사용해 보자.
  
  
• developerWorks에서 IBM Mashup Center 무료 시험판을 다운로드하자.
  
  
• developerWorks에서 직접 다운로드할 수 있는 IBM 시험판 소프트웨어를 사용하여 후속 개발 프로젝트를 구현해 보자.
  
  

토론

• 포럼에 참여하기.
  
  
• developerWorks 포럼 & 블로그를 통해 developerWorks 커뮤니티에 참여하자.
  
  

필자소개

아티클 순위

의견

위로

목차

• 소개
• 차트 작성 위젯 빌드하기
• 데이터 매시업 편집기를 사용하여 XML 생성하기
• IBM Mashup Center, 버전 2와 함께 FusionCharts 위젯 사용하기
• 결론
• 다운로드 하십시오
• 참고자료
• 필자소개
• 의견