google chart linechart

by Tsuneo Yoshioka

HTML

<html>
    
    <head>
        <script type="text/javascript" src="https://www.google.com/jsapi"></script>
        </script>
    </head>
    <body>
        <div id="multipleTrendChart"></div>
    </body>
</html>

JavaScript

function drawGlickoRatingChart(/*History[]*/histories, element){
  function paizaRankToColor(rank){
    return ['red', 'yellow', 'lightcyan', 'lightgreen', 'green', '#54bdc4', '#999'][rank - 1800];
  }
  function getRatingTooltipHtml(history){
    const rating_updated_at = new Date(history.rating_updated_at);
    return `レーティング: <b>${Math.floor(history.rating)}</b> ±${Math.floor(history.rd)}<br/>` +
        `問題: <b>${history.problem.title} (${Math.floor(history.problem.rating)}±${Math.floor(history.problem.rd)})</b><br/>` +
        `スコア: <b>${history.score}</b><br/>` +
      `日時: <b>${rating_updated_at.toLocaleString()}</b><br/>`;
  }
  const dataTableRows = histories.map((history) => {
    let fillColor;
    if(history.score === 100){
      fillColor = paizaRankToColor(history.problem.rank);
    }else{
      fillColor = 'gray';
    }
    return [
      new Date(history.rating_updated_at),
      750,
      250,
      250,
      250,
      250,
      250,
      250,
      history.rating,
      getRatingTooltipHtml(history),
      `point { size: 7; shape-type: circle; stroke-color: black; stroke-width: 1; fill-color: ${fillColor}; }`,
    ]
  });
  const ratingValues = histories.map((history) => history.rating);

  const minRating = Math.min(Math.min(...ratingValues) - 100, 1250);
  const maxRating = Math.max(Math.max(...ratingValues) + 100, 2250);
  // const minRating = 1250;
  // const maxRating = 2250;
  const BAND_NUM = 7;

  // arr.forEach((point, i) => {point.unshift(i); point.pop()});
  // const chart = new google.visualization.LineChart(element);
  const chart = new window.google.visualization.ComboChart(element);
  let options = {
    // title: 'paiza Rating History',
    hAxis: {
      title: 'Time',
    },
    vAxis: {
      title: 'paiza Rating',
      viewWindow: {
        min: minRating, // 750,
        max: maxRating, // 2250,
      },
    },
    chartArea: {
      left: '15%',
      top: '5%',
      width: '80%',
      height: '80%',
    },
   ...