Total and Subtotal

You can print totals and subtotals in rows and columns.
You can print values such as minimum, maximum, average, and total in the footer area.
Calculate required values and output maximum values using valueCallback in summary and footer areas.
//summary 영역 최고사용량
var headerSummaryCallback = [{
  numberFormat: "#,##0.0",
  valueCallback: function (grid, column, childIndex, summary, value) {
    if(dataProvider.getRowCount() > 0){
      var fuel = 0;
      for(var i = 0; i < dataProvider.getRowCount(); i++){
        if(dataProvider.getValue(i, "연료명") == "가스/디젤 오일(경유)"){
          if(fuel < dataProvider.getValue(i, summary.column.fieldName)){
            fuel = dataProvider.getValue(i, summary.column.fieldName)
          }
        }
      }
      return fuel;
    }
  }
},{
  numberFormat: "#,##0.0",
  valueCallback: function (grid, column, childIndex, summary, value) {
    if(dataProvider.getRowCount() > 0){
      var fuel = 0;
      for(var i = 0; i < dataProvider.getRowCount(); i++){
        if(dataProvider.getValue(i, "연료명") == "휘발유"){
          if(fuel < dataProvider.getValue(i, summary.column.fieldName)){
            fuel = dataProvider.getValue(i, summary.column.fieldName)
          }
        }
      }
      return fuel;
    }
  }
}];
 
//footerCallback 공통
var footersValueCallback = [
  { 
  valueCallback: function (grid, column, footerIndex, columnFooter, value) {
    var sum = 0;
    for(var i = 0; i < dataProvider.getRowCount(); i++){
      if(dataProvider.getValue(i, "연료명") == "도시가스(LNG)"){
        sum += dataProvider.getValue(i, columnFooter.column.fieldName);
      }
    }
    return sum;
  }, numberFormat: "#,##0.0" },
  { 
    valueCallback: function (grid, column, footerIndex, columnFooter, value) {
      var sum = 0;
    for(var i = 0; i < dataProvider.getRowCount(); i++){
      if(dataProvider.getValue(i, "연료명") == "전기"){
        sum += dataProvider.getValue(i, columnFooter.column.fieldName);
      }
    }
    return sum;
    }, numberFormat: "#,##0.0" 
  },
  { 
    valueCallback: function (grid, column, footerIndex, columnFooter, value) {
      var sum = 0;
      for(var i = 0; i < dataProvider.getRowCount(); i++){
        if(dataProvider.getValue(i, "연료명") == "가스/디젤 오일(경유)"){
          sum += dataProvider.getValue(i, columnFooter.column.fieldName);
        }
      }
      return sum;
      }, numberFormat: "#,##0.0" 
  },
  { 
    valueCallback: function (grid, column, footerIndex, columnFooter, value) {
      var sum = 0;
      for(var i = 0; i < dataProvider.getRowCount(); i++){
        if(dataProvider.getValue(i, "연료명") == "휘발유"){
          sum += dataProvider.getValue(i, columnFooter.column.fieldName);
        }
      }
      return sum;
    }, numberFormat: "#,##0.0" 
  }
]
 
//컬럼 설정
var columns = [{ name: "구분", fieldName: "구분", "width": 85 },
  { name: "조사년도", fieldName: "조사년도", "width": 60 },
  { name: "소속기관명", fieldName: "소속기관명", "width": 85 },
  { name: "시설명", fieldName: "시설명", wdith: 85 },
  { name: "연료명", fieldName: "연료명", "width": 90 },
  {
      name: "colLine", "type": "series", "fieldNames": "A01월..A12월", "width": 120,
      renderer: {
          "type": "sparkcolumn",
          "highFill": "#ff008800",
          "lowFill": "#ffff0000",
          "lastFill": "#ff888888"
      },
      header: { "text": "그래프" },
      headerSummary:[{ text: "경유 최고 사용량"},{text: "휘발유 최고 사용량"}],
      footers: [{text:"도시가스(LNG)"},{text:"전기"},{text:"가스/디젤 오일(경유)"},{text:"휘발유"}]
  },
  { name: "A01월", fieldName: "A01월",  header: { text: "01월" }, "width": 70,  styleName: "right-column", headerSummary: headerSummaryCallback, footers: footersValueCallback, numberFormat: "#,##0.0" },
  { name: "A02월", fieldName: "A02월",  header: { text: "02월" }, "width": 70,  styleName: "right-column", headerSummary: headerSummaryCallback, footers: footersValueCallback, numberFormat: "#,##0.0" },
  { name: "A03월", fieldName: "A03월",  header: { text: "03월" }, "width": 70,  styleName: "right-column", headerSummary: headerSummaryCallback, footers: footersValueCallback, numberFormat: "#,##0.0" },
  { name: "A04월", fieldName: "A04월",  header: { text: "04월" }, "width": 70,  styleName: "right-column", headerSummary: headerSummaryCallback, footers: footersValueCallback, numberFormat: "#,##0.0" },
  { name: "A05월", fieldName: "A05월",  header: { text: "05월" }, "width": 70,  styleName: "right-column", headerSummary: headerSummaryCallback, footers: footersValueCallback, numberFormat: "#,##0.0" },
  { name: "A06월", fieldName: "A06월",  header: { text: "06월" }, "width": 70,  styleName: "right-column", headerSummary: headerSummaryCallback, footers: footersValueCallback, numberFormat: "#,##0.0" },
  { name: "A07월", fieldName: "A07월",  header: { text: "07월" }, "width": 70,  styleName: "right-column", headerSummary: headerSummaryCallback, footers: footersValueCallback, numberFormat: "#,##0.0" },
  { name: "A08월", fieldName: "A08월",  header: { text: "08월" }, "width": 70,  styleName: "right-column", headerSummary: headerSummaryCallback, footers: footersValueCallback, numberFormat: "#,##0.0" },
  { name: "A09월", fieldName: "A09월",  header: { text: "09월" }, "width": 70,  styleName: "right-column", headerSummary: headerSummaryCallback, footers: footersValueCallback, numberFormat: "#,##0.0" },
  { name: "A10월", fieldName: "A10월",  header: { text: "10월" }, "width": 70,  styleName: "right-column", headerSummary: headerSummaryCallback, footers: footersValueCallback, numberFormat: "#,##0.0" },
  { name: "A11월", fieldName: "A11월",  header: { text: "11월" }, "width": 70,  styleName: "right-column", headerSummary: headerSummaryCallback, footers: footersValueCallback, numberFormat: "#,##0.0" },
  { name: "A12월", fieldName: "A12월",  header: { text: "12월" }, "width": 70,  styleName: "right-column", headerSummary: headerSummaryCallback, footers: footersValueCallback, numberFormat: "#,##0.0" },
  { name: "합계", fieldName: "합계", width: 75, styleName: "right-column", footers: footersValueCallback }
];
Column layout (group column) header HTML Template row height