Controller 구현

다음은 UtilSystemController.java 소스 코드중의 일부로 FusionChart Free 의 Pie2d 차트를 그리기 위해 먼저 Pie2d 차트 data xml 로 변환하기 위한 Jaxb Model class 로 데이터를 세팅한 후 marshallingView 를 통해 XML 로 변환하는 예이다.

@RequestMapping("/utilSystem/getMemoryUsageChart.do")
public String getMemoryUsageChart(ModelMap map) throws Exception {
    SigarAccessor.gatherMemoryInfo();
    MemoryInfo memoryInfo = SigarAccessor.getSysInfo().getMemoryInfo();

    Pie2dGraph pie2d = new Pie2dGraph();
    pie2d.setCaption("Memory Usage");
    pie2d.setDecimalPrecision(0);
    pie2d.setShowPercentageValues(1);
    pie2d.setShowNames(1);
    pie2d.setNumberSuffix("MB");
    pie2d.setShowValues(1);
    pie2d.setShowPercentageInLabel(0);
    pie2d.setPieYScale(45);
    pie2d.setPieBorderAlpha(100);
    pie2d.setPieRadius(100);
    pie2d.setAnimation(0);
    pie2d.setShadowXShift(4);
    pie2d.setShadowAlpha(40);
    pie2d.setPieFillAlpha(95);
    pie2d.setPieBorderColor("FFFFFF");
    pie2d.setFormatNumberScale(0);
    pie2d.setFormatNumber(1);
    pie2d.setThousandSeparator(",");

    Pie2dSet set1 = new Pie2dSet();
    set1.setValue((double) memoryInfo.getMemFree() / 1024.0);
    set1.setName("Free");
    set1.setColor("AFD8F8");
    Pie2dSet set2 = new Pie2dSet();
    set2.setValue((double) memoryInfo.getMemUsed() / 1024.0);
    set2.setName("Used");
    set2.setColor("F6BD0F");
    set2.setIsSliced(1);

    List sets = new ArrayList();
    sets.add(set1);
    sets.add(set2);

    pie2d.setSet(sets);

    map.addAttribute(pie2d);
    return "utilMarshallingView";
}

화면 구현

그래프 구현 코드는 아래와 같다. 다음은 systemUsageChartTest.jsp 소스 코드중의 일부이다. FusionChart Free for jQuery 플러그인(jquery.fusionchart.js) 을 사용하여 차트를 삽입하고자 하는 영역(div)에 원하는 옵션을 다양하게 지정하여 손쉽게 웹페이지에 차트를 통합하고 있다.

if($(this).parent().text() == "CpuPercChart") {
    $('#cpuPercChart').insertFusionCharts({
        swfPath: "<c:url value='/chart/javascript/fusionchart-free/charts/'/>",
        type: "Pie2D",
        data: "<c:url value='/utilSystem/getCpuPercChart.do'/>",
        dataFormat: "URIData",
        width: "370",
        height: "270",
        wMode: "opaque"
    });
} else if($(this).parent().text() == "MemoryUsageChart") {
    $('#memoryUsageChart').insertFusionCharts({
        swfPath: "<c:url value='/chart/javascript/fusionchart-free/charts/'/>",
        type: "Pie2D",
        data: "<c:url value='/utilSystem/getMemoryUsageChart.do'/>",
        dataFormat: "URIData",
        width: "450",
        height: "270",
        wMode: "opaque"
    });
} else if($(this).parent().text() == "DiskUsageChart") {
    $('#diskUsageChart').insertFusionCharts({
        swfPath: "<c:url value='/chart/javascript/fusionchart-free/charts/'/>",
        type: "StackedBar2D",
        data: "<c:url value='/utilSystem/getDiskUsageChart.do'/>",
        dataFormat: "URIData",
        width: "450",
        height: "350",
        wMode: "opaque"
    });
} else if($(this).parent().text() == "ProcessMemoryUsageChart") {
    $('#processMemoryUsageChart').insertFusionCharts({
        swfPath: "<c:url value='/chart/javascript/fusionchart-free/charts/'/>",
        type: "Pie2D",
        data: "<c:url value='/utilSystem/getProcessMemoryUsageChart.do'/>",
        dataFormat: "URIData",
        width: "370",
        height: "270",
        wMode: "opaque"
    });
} else if($(this).parent().text() == "ProcessCpuUsageChart") {
    $('#processCpuUsageChart').insertFusionCharts({
        swfPath: "<c:url value='/chart/javascript/fusionchart-free/charts/'/>",
        type: "Pie2D",
        data: "<c:url value='/utilSystem/getProcessCpuUsageChart.do'/>",
        dataFormat: "URIData",
        width: "370",
        height: "270",
        wMode: "opaque"
    });
}