코로나19 백신 접종 현황 차트 페이지 만들기 - (6) column chart

 

칼럼 차트는 각 항목들이 지닌 값을 직접 비교를 하는 데에 사용된다. 여기에서는 백신 접종 완료자수 백분율 상위 10개국에 대한 데이터를 사용하였다. 그러나 인구가 적은 국가가 백신 접종 속도에 상대적으로 유리하여 대부분 상위권을 차지하여 의미 있는 데이터 확인이 불가능했기 때문에 백신 접종자수 10만명 이상인 국가라는 조건을 추가하였다.

"백신 접종자수 10만명 이상 국가" 조건을 제외하고 조회한 결과. csv 데이터의 국가 항목에는 속령도 포함되어있기 때문에  지브롤터나 세이셸 등과 같은 나라의 데이터가 상위권을 차지한다.

 

router.post("/column", async (req, res) => {
  const query = `
    SELECT country, MAX(people_fully_vaccinated_per_hundred) as value
    FROM "country-vaccinations"
    WHERE people_fully_vaccinated_per_hundred > 0
    AND people_fully_vaccinated > 100000
    GROUP BY country
    ORDER BY value DESC
    LIMIT 10
  `;
  try {
    const data = await getDataUsingSql(query);
    const resData = data.rows.map(el => {
      return {
        name: el[0],
        y: el[1]
      }
    })
    res.json(resData);
  } catch (err) {
    console.error(err);
  }
});

국가별 백신 접종자 백분율 데이터는 사용한 csv 데이터에서 별도의 칼럼 항목으로 제공하기 때문에 따로 가공할 필요 없이 해당 칼럼을 조회하기만 하면 된다. 누적 데이터이므로 집계 함수 MAX를 사용하고 where 절에서 백신 접종자수 10만명 이상이라는 조건을 추가하였다. 또 데이터가 없는 경우 null로 조회되기 때문에 0 이상이라는 조건을 추가하여 공백 데이터를 조회하지 않게 하였다.

 

 

쿼리 조회 데이터를 console.log로 출력하면 위와 같이 나온다. 이 중 rows를 차트에서 요구하는 형식에 맞게 가공하여 클라이언트 단으로 전달한다. map 함수를 사용하여 카테고리(name)와 데이터(y)가 담긴 object 형태로 변환하였다. 

 

column.js

function drawColumnChart() {
  $.ajax({
    url: "column",
    type: "POST",
    dataType: "json",
    success: function (result) {      
      Highcharts.chart('column', {
        chart: {
          type: 'column'
        },
        title: {
          text: 'Fully Vaccinated Per Hundred TOP10<br>(Countries over 100,000 Fully Vaccinated)'
        },
        credits: {
          enabled: false
        },
        exporting: {
          enabled: false
        },
        subtitle: {
          text: ''
        },
        accessibility: {
          announceNewData: {
            enabled: true
          }
        },
        xAxis: {
          type: 'category'
        },
        yAxis: {
          title: {
            text: ''
          }

        },
        legend: {
          enabled: false
        },
        plotOptions: {
          series: {
            borderWidth: 0,
            dataLabels: {
              enabled: true,
              format: '{point.y:.1f}%'
            }
          }
        },

        tooltip: {
          headerFormat: '<span style="font-size:11px">{series.name}</span><br>',
          pointFormat: '<span style="color:{point.color}">{point.name}</span>: <b>{point.y:.2f}%</b><br/>'
        },

        series: [
          {
            name: "Fully Vaccinated",
            colorByPoint: true,
            data: result
          }
        ],
      });
    },
    error: function (request, status, error) {
      console.error(error);
    }
  });
}

차트에서 요구하는 데이터가 단순하기 때문에 서버에서 전달받은 데이터를 클라이언트에서 추가적으로 가공할 필요는 없다. 이미 서버 단에서 차트에서 요구하는 형식으로 가공을 완료하여 전달하였기 때문에 클라이언트 단에서는 받은 데이터를 차트에 그대로 전달하기만 하면 된다. series의 data의 값으로 전달받은 배열 데이터(result)를 그대로 사용한다.