amchart 연동 행 체크

RealGrid와 amchart 사용하여 연계한 예제입니다.
각 행의 Checkbar를 선택/해제하면 선택된 행의 데이터로 차트값이 구성됩니다.

※ amchart 관련 문의는 amchart 업체에 문의를 해주시기 바랍니다.

RealGrid와 amchart 연계

amchart는 https://www.amcharts.com/ 페이지에서 확인 할 수 있습니다.

amchart 설정

am4core.ready(function() {
    am4core.useTheme(am4themes_animated);

    var chart = am4core.create("chartdiv", am4charts.XYChart);

    chart.colors.step = 3;

    chart.data = generateChartData();

    var dateAxis = chart.xAxes.push(new am4charts.DateAxis());
    dateAxis.renderer.minGridDistance = 50;

    function createAxisAndSeries(field, name, opposite, bullet) {
    var valueAxis = chart.yAxes.push(new am4charts.ValueAxis());
    if(chart.yAxes.indexOf(valueAxis) != 0){
        valueAxis.syncWithAxis = chart.yAxes.getIndex(0);
    }
    
    var series = chart.series.push(new am4charts.LineSeries());
    series.dataFields.valueY = field;
    series.dataFields.dateX = "date";
    series.strokeWidth = 2;
    series.yAxis = valueAxis;
    series.name = name;
    series.tooltipText = "{name}: [bold]{valueY}[/]";
    series.tensionX = 0.8;
    series.showOnInit = true;
    
    var interfaceColors = new am4core.InterfaceColorSet();
    
    switch(bullet) {
        case "triangle":
        var bullet = series.bullets.push(new am4charts.Bullet());
        bullet.width = 12;
        bullet.height = 12;
        bullet.horizontalCenter = "middle";
        bullet.verticalCenter = "middle";
        
        var triangle = bullet.createChild(am4core.Triangle);
        triangle.stroke = interfaceColors.getFor("background");
        triangle.strokeWidth = 2;
        triangle.direction = "top";
        triangle.width = 12;
        triangle.height = 12;
        break;
        case "rectangle":
        var bullet = series.bullets.push(new am4charts.Bullet());
        bullet.width = 10;
        bullet.height = 10;
        bullet.horizontalCenter = "middle";
        bullet.verticalCenter = "middle";
        
        var rectangle = bullet.createChild(am4core.Rectangle);
        rectangle.stroke = interfaceColors.getFor("background");
        rectangle.strokeWidth = 2;
        rectangle.width = 10;
        rectangle.height = 10;
        break;
        default:
        var bullet = series.bullets.push(new am4charts.CircleBullet());
        bullet.circle.stroke = interfaceColors.getFor("background");
        bullet.circle.strokeWidth = 2;
        break;
    }
    
    valueAxis.renderer.line.strokeOpacity = 1;
    valueAxis.renderer.line.strokeWidth = 2;
    valueAxis.renderer.line.stroke = series.stroke;
    valueAxis.renderer.labels.template.fill = series.stroke;
    valueAxis.renderer.opposite = opposite;
    }

    createAxisAndSeries("GDP", "GDP", false, "circle");
    createAxisAndSeries("GNI", "GNI", true, "triangle");
    createAxisAndSeries("PGNI", "PGNI", true, "rectangle");
    createAxisAndSeries("DIncome", "DIncome", true, "rectangle");

    chart.legend = new am4charts.Legend();

    chart.cursor = new am4charts.XYCursor();

    function generateChartData() {
    var chartData = [];
    var rows = gridView.getCheckedRows(true);

    for(var i = 0; i < rows.length; i++){
        chartData.push({
        date: dataProvider.getValue(rows[i],0),
        GDP: dataProvider.getValue(rows[i],1),
        GNI: dataProvider.getValue(rows[i],2),
        PGNI: dataProvider.getValue(rows[i],3),
        DIncome: dataProvider.getValue(rows[i],4)
        })
    }
    return chartData;
    }

    // 그리드 체크 이벤트
    gridView.onItemChecked = function (grid, itemIndex, checked) {
        var chartData = [];
        var rows = gridView.getCheckedRows(true);

        for(var i = 0; i < rows.length; i++){
            chartData.push({
                date: dataProvider.getValue(rows[i],0),
                GDP: dataProvider.getValue(rows[i],1),
                GNI: dataProvider.getValue(rows[i],2),
                PGNI: dataProvider.getValue(rows[i],3),
                DIncome: dataProvider.getValue(rows[i],4)
            })
        }
        chart.data = chartData;
    };

});