FB.login(
  function (login_result) {
    if (login_result.status === "connected") {
      getFbAccessToken();
    } else if (login_result.status === "not_authorized") {
      alert("페이스북 인증에 실패했습니다");
    } else {
      alert("페이스북 API 호출에 실패했습니다");
    }
  },
  { scope: "publish_pages,manage_pages" }
);

function getFbAccessToken() {
  FB.api(
    "/나의 페이지 아이디/",
    "GET",
    { fields: "access_token" },
    function (token_result) {
      postFbPage(token_result);
    }
  );
}

function postFbPage(token_result) {
  FB.api(
    "/나의 페이지 아이디/feed",
    "POST",
    {
      access_token: token_result.access_token,
      message: "내용",
      link: "링크 걸 주소",
      picture: "링크 이미지",
      name: "링크 제목",
      description: "링크 설명",
      caption: "링크 하단 캡션",
    },
    function (page_result) {
      if (page_result && !page_result.error) {
        alert("성공");
      }
    }
  );
}

Highcharts.setOptions({
  lang: {
    // 전체보기 버튼을 한글로 바꾼다
    resetZoom: "전체보기",
  },
});

var chartCallback = function (data) {
  var chart = $("#chart").highcharts();

  if (chart) {
    // 차트가 있을경우 제거한다.
    chart.destroy();
  }

  if (data) {
    var categoriesData = []; // 여기에 x축 데이터를 넣는다.
    var seriesData = {}; // 여기에 data를 파싱해 y축 구조를 만들어준다.

    var options = {
      chart: {
        renderTo: "chart", // 다시 그려질 영역 설정
        zoomType: "x", // X축이 줌인이 가능하게 설정
        panning: true,
        panKey: "shift",
      },
      title: {
        text: null,
      },
      xAxis: {
        categories: categoriesData,
      },
      yAxis: {
        min: 0, // 0이상의 값만 표기
        allowDecimals: false, // 정수로만 표기
        title: {
          text: null,
        },
        labels: {},
      },
      credits: {
        text: "Graceful Light", // 로고 표시
        href: "https://gracefullight.github.io", // 로고 클릭시 URL
      },
      tooltip: {
        // hover시 나오는 tooltip
        shared: true, // 하나의 영역을 공유
        pointFormatter: function () {
          if (this.y >= 0) {
            // 표시되는 tooltip을 마음대로 설정
            return (
              '<span style="color:' +
              this.series.color +
              ';">●</span> ' +
              this.series.name +
              ": " +
              "<b>" +
              Utils.comma(this.y) +
              "</b><br/>"
            );
          }
        },
      },
      plotOptions: {
        column: {
          pointPadding: 0.2,
          borderWidth: 0,
        },
      },
      legend: {
        borderWidth: 0,
      },
      series: seriesData,
    };

    chart = new Highcharts.Chart(options);
    chart.redraw();
  } else {
    $("#chart").html("no data");
  }
};