var mousedown_buf = false; // マウスボタン押下状態

/**
 * グラフの初期化
 * @param {number} type グラフID
 */
function draw_graph_temp(type) {
  var context = element[type].getContext('2d');
  context.clearRect(0, 0, C_WIDTH, C_HEIGHT);
}

/**
 * 表示範囲変更スライダーの目盛描画
 * @param {CanvasRenderingContext2D} context 描画コンテキスト
 */
function draw_tick(context) {
  // 表示範囲変更スライダーの目盛描画
  context.beginPath();
  context.strokeStyle = '#afafaf';
  for (i = 0; i < h_table.length; i++) {
    context.font = '9pt Arial';
    var text = '';
    var text_w = 0;
    if (i < 3) {
      text = h_table[h_table.length - 1 - i] / 24 - 1 + '日間';
      text_w = context.measureText(text).width;
    } else {
      text = h_table[h_table.length - 1 - i] + '時間';
      text_w = context.measureText(text).width;
    }
    draw_text(context, text, 150 + i * Math.round(340 / (h_table.length - 1)) - text_w / 2, 12);
    context.moveTo(150 + i * Math.round(340 / (h_table.length - 1)), 15);
    context.lineTo(150 + i * Math.round(340 / (h_table.length - 1)), 30);
    context.stroke();
  }
}

/**
 * y軸調整スライダーの目盛描画
 * @param {CanvasRenderingContext2D} context 描画コンテキスト
 */
function draw_temp_slider_tick(context) {
  for (var i = 0; i < tempList.length; i++) {
    context.strokeStyle = '#afafaf';
    context.moveTo(23, G_YMIN + i * (320 / (tempList.length - 1)));
    context.lineTo(32, G_YMIN + i * (320 / (tempList.length - 1)));
    var text = '' + tempList[tempList.length - 1 - i];
    var text_w = context.measureText(text).width;
    context.fillText(text, 20 - text_w, G_YMIN + i * (320 / (tempList.length - 1)) + 5);
  }
  context.stroke();
}

/**
 * 軸描画
 * @param {CanvasRenderingContext2D} context
 */
function drawAxis(context) {
  context.strokeStyle = '#000000';
  context.beginPath();

  // 横軸の描画
  context.moveTo(G_XMIN, G_YMAX);
  context.lineTo(G_XMAX + 20, G_YMAX);

  // 縦軸の描画
  context.moveTo(G_XMIN, G_YMIN - 25);
  context.lineTo(G_XMIN, G_YMAX);
  context.closePath();
  context.stroke();
}

/**
 * 水温の時間変化グラフの描画
 * @param {number} type グラフID
 * @param {number} graph_hour 表示期間
 */
function draw_past_graph(type, graph_hour) {
  var context = element[type].getContext('2d');
  var min = minTemp[type];
  var max = maxTemp[type];
  draw_past_gray(context, graph_hour, data_offset[type]);
  drawAxis(context); // 軸描画
  if (hh[type] < 2) {
    drawPast_grid(context, min, max, graph_hour + 1);
  } else {
    switch (hh[type]) {
      case 2:
        drawPast_grid(context, min, max, 9);
        break;
      case 3:
        drawPast_grid(context, min, max, 32);
        break;
      case 4:
        drawPast_grid(context, min, max, 62);
        break;
    }
  }
  for (var i = 0; i < deep_list['全体'].length; i++) {
    if (deep_list[suion_list[type]][i] == '') {
      continue;
    }
    if (checkList[i]) {
      if (
        Format_type[type] == 2 ||
        Format_type[type] == 4 ||
        Format_type[type] == 7 ||
        Format_type[type] == 8 ||
        Format_type[type] == 9 ||
        Format_type[type] == 10 ||
        Format_type[type] == 11 ||
        Format_type[type] == 12
      ) {
        draw_past_data(context, type, i, min, max, graph_hour * 2);
      } else if (Format_type[type] < 0 || Format_type[type] == 5 || Format_type[type] == 6) {
        draw_past_data(context, type, i, min, max, graph_hour * 6);
      } else {
        draw_past_data(context, type, i, min, max, graph_hour);
      }
    }
  }
  //    if(checkList[deep.length]) {
  //        draw_past_temp(context, type, min, max, graph_hour);
  //    }

  // グラフ描画領域から飛び出した部分の消去
  context.clearRect(0, 0, C_WIDTH - 30, 45);
  context.clearRect(0, G_YMAX + 1, C_WIDTH - 30, C_HEIGHT);

  draw_tick(context);
  //    drawY_Axis(context, min, max);
  if (hh[type] < 2) {
    drawPastX_Axis(context, graph_hour, data_offset[type]);
  } else {
    switch (hh[type]) {
      case 2:
        drawPastX_Axis_day(context, 8, data_offset[type]);
        break;
      case 3:
        drawPastX_Axis_day(context, 31, data_offset[type]);
        break;
      case 4:
        drawPastX_Axis_day(context, 61, data_offset[type]);
        break;
    }
  }
  draw_text(context, suion_list[type] + 'の海水温', 5, 20);

  //    if(type == 0) {
  context.beginPath();
  context.strokeStyle = '#afafaf';
  context.moveTo(G_XMIN, G_YMIN);
  context.lineTo(48, G_YMIN - ((max - 40) / 5) * (320 / (tempList.length - 1)));
  context.moveTo(G_XMIN, G_YMAX);
  context.lineTo(48, G_YMIN - ((min - 40) / 5) * (320 / (tempList.length - 1)));
  context.closePath();
  context.stroke();
  context.strokeStyle = '#000000';
  draw_temp_slider_tick(context);
  //    }
  drawY_Axis(context, min, max);
}

/**
 * x軸ラベル出力(時刻版)
 * @param {CanvasRenderingContext2D} context 描画コンテキスト
 * @param {number} div 刻みの数
 * @param {number} offset 右端の時刻を現在時刻から何時間前にずらすか
 */
function drawPastX_Axis(context, div, offset) {
  // x軸ラベル出力(時刻版)
  var date = new Date(load_date);
  date.setHours(date.getHours() - offset);
  date.setHours(date.getHours() - div);
  var hour = date.getHours();
  context.strokeStyle = '#000000';
  context.font = '9pt Arial';
  for (var i = 0; i <= div / 2; i++) {
    if (i == 0) {
      context.fillText(
        date.getMonth() + 1 + '月' + date.getDate() + '日',
        G_XMIN - 35 + i * ((2 * (G_XMAX - G_XMIN)) / div),
        C_HEIGHT - 5
      );
    } else if (hour == 0) {
      if (date.getDate() == 1) {
        context.fillText(
          date.getMonth() + 1 + '月' + date.getDate() + '日',
          G_XMIN - 20 + i * ((2 * (G_XMAX - G_XMIN)) / div),
          C_HEIGHT - 5
        );
      } else {
        context.fillText(date.getDate() + '日', G_XMIN - 10 + i * ((2 * (G_XMAX - G_XMIN)) / div), C_HEIGHT - 5);
      }
    }
    context.fillText(hour + '時', G_XMIN - 10 + i * ((2 * (G_XMAX - G_XMIN)) / div), C_HEIGHT - 35);
    context.moveTo(G_XMIN + i * (2 * ((G_XMAX - G_XMIN) / div)), C_HEIGHT - 52);
    context.lineTo(G_XMIN + i * (2 * ((G_XMAX - G_XMIN) / div)), C_HEIGHT - 48);
    date.setHours(date.getHours() + 2);
    hour = date.getHours();
  }
  date = new Date(load_date);
  date.setHours(date.getHours() - offset);
  date.setHours(date.getHours() + 1 - div);
  hour = date.getHours();
  for (var i = 0; i < div / 2; i++) {
    if (hour == 0) {
      if (date.getDate() == 1) {
        context.fillText(
          date.getMonth() + 1 + '月' + date.getDate() + '日',
          G_XMIN - 20 + (G_XMAX - G_XMIN) / div + i * ((2 * (G_XMAX - G_XMIN)) / div),
          C_HEIGHT - 5
        );
      } else {
        context.fillText(
          date.getDate() + '日',
          G_XMIN - 10 + (G_XMAX - G_XMIN) / div + i * ((2 * (G_XMAX - G_XMIN)) / div),
          C_HEIGHT - 5
        );
      }
    }
    context.fillText(
      hour + '時',
      G_XMIN - 10 + (G_XMAX - G_XMIN) / div + i * (2 * ((G_XMAX - G_XMIN) / div)),
      C_HEIGHT - 20
    );
    context.moveTo(G_XMIN + (G_XMAX - G_XMIN) / div + i * (2 * ((G_XMAX - G_XMIN) / div)), C_HEIGHT - 52);
    context.lineTo(G_XMIN + (G_XMAX - G_XMIN) / div + i * (2 * ((G_XMAX - G_XMIN) / div)), C_HEIGHT - 48);
    date.setHours(date.getHours() + 2);
    hour = date.getHours();
  }
  //    context.stroke();
}

/**
 * 昼夜で色を分割
 * @param {CanvasRenderingContext2D} context 描画コンテキスト
 * @param {number} div 刻みの数
 * @param {number} offset 右端の時刻を現在時刻から何時間ずらすか
 */
function draw_past_gray(context, div, offset) {
  var dt = new Date(load_date);
  dt.setHours(dt.getHours() - offset);

  if (div <= 49) {
    for (var i = div - 1; i > 0; i--) {
      if (!(dt.getHours() > 6 && dt.getHours() <= 18)) {
        context.beginPath();
        context.fillStyle = '#e6e6e6';
        context.fillRect(
          G_XMIN + i * ((G_XMAX - G_XMIN) / div),
          G_YMIN - 25,
          G_XMIN + (i + 1) * ((G_XMAX - G_XMIN) / div) - (G_XMIN + i * ((G_XMAX - G_XMIN) / div)),
          G_YMAX - (G_YMIN - 25)
        );
        context.beginPath();
        context.fillStyle = '#000000';
      }
      dt.setHours(dt.getHours() - 1);
    }
  } else {
    for (var i = 0; i < div; i++) {
      if (!(i % 24 >= 6 && i % 24 < 18)) {
        context.beginPath();
        context.fillStyle = '#e6e6e6';
        context.fillRect(
          G_XMIN + i * ((G_XMAX - G_XMIN) / div),
          G_YMIN - 25,
          G_XMIN + (i + 1) * ((G_XMAX - G_XMIN) / div) - (G_XMIN + i * ((G_XMAX - G_XMIN) / div)),
          G_YMAX - (G_YMIN - 25)
        );
        context.beginPath();
        context.fillStyle = '#000000';
      }
    }
  }
  //    context.stroke();
}

/**
 * x軸ラベル出力(日付版)
 * @param {CanvasRenderingContext2D} context 描画コンテキスト
 * @param {number} div 刻みの数
 * @param {number} offset 右端の日付を現在日より何日前にずらすか
 */
function drawPastX_Axis_day(context, div, offset) {
  // x軸ラベル出力(日付版)
  var dt = new Date(load_date);
  dt.setHours(dt.getHours() - offset);
  dt.setDate(dt.getDate() - (div - 1));
  var date = dt.getDate();
  context.strokeStyle = '#000000';
  context.font = '9pt Arial';
  for (var i = 0; i <= div / 2; i++) {
    if (i == 0) {
      context.fillText(dt.getMonth() + 1 + '月', G_XMIN - 10 + i * ((2 * (G_XMAX - G_XMIN)) / div), C_HEIGHT - 5);
    } else if (dt.getDate() == 1) {
      context.fillText(dt.getMonth() + 1 + '月', G_XMIN - 10 + i * ((2 * (G_XMAX - G_XMIN)) / div), C_HEIGHT - 5);
    }
    context.fillText(date + '日', G_XMIN - 10 + i * ((2 * (G_XMAX - G_XMIN)) / div), C_HEIGHT - 35);
    context.moveTo(G_XMIN + i * (2 * ((G_XMAX - G_XMIN) / div)), C_HEIGHT - 52);
    context.lineTo(G_XMIN + i * (2 * ((G_XMAX - G_XMIN) / div)), C_HEIGHT - 48);
    dt.setDate(dt.getDate() + 2);
    date = dt.getDate();
  }
  dt = new Date(load_date);
  dt.setHours(dt.getHours() - offset);
  dt.setDate(dt.getDate() + 1 - (div - 1));
  date = dt.getDate();
  for (i = 0; i < div / 2; i++) {
    if (dt.getDate() == 1) {
      context.fillText(
        dt.getMonth() + 1 + '月',
        G_XMIN - 10 + (G_XMAX - G_XMIN) / div + i * ((2 * (G_XMAX - G_XMIN)) / div),
        C_HEIGHT - 5
      );
    }
    context.fillText(
      date + '日',
      G_XMIN - 10 + (G_XMAX - G_XMIN) / div + i * (2 * ((G_XMAX - G_XMIN) / div)),
      C_HEIGHT - 20
    );
    context.moveTo(G_XMIN + (G_XMAX - G_XMIN) / div + i * (2 * ((G_XMAX - G_XMIN) / div)), C_HEIGHT - 52);
    context.lineTo(G_XMIN + (G_XMAX - G_XMIN) / div + i * (2 * ((G_XMAX - G_XMIN) / div)), C_HEIGHT - 48);
    dt.setDate(dt.getDate() + 2);
    date = dt.getDate();
  }
  //    context.stroke();
}

/**
 * y軸ラベルの出力
 * @param {CanvasRenderingContext2D} context 描画コンテキスト
 * @param {number} min y軸下限
 * @param {number} max y軸上限
 */
function drawY_Axis(context, min, max) {
  context.strokeStyle = '#000000';
  context.font = '9pt Arial';
  var count = 0;
  for (var i = min; i < max; i += 5) {
    count++;
  }
  if (count < 3) {
    count = 0;
    for (var i = min; i < max; i++) count++;
    for (var i = min; i < 1 + max; i++) {
      var text = '' + i;
      text_w = context.measureText(text).width;
      context.fillText(text, G_XMIN - 5 - text_w, G_YMAX - ((G_YMAX - G_YMIN) / count) * (i - min) + 5);
    }
  } else {
    for (var i = min / 5; i < 1 + max / 5; i++) {
      var text = '' + i * 5;
      text_w = context.measureText(text).width;
      context.fillText(text, G_XMIN - 5 - text_w, G_YMAX - ((G_YMAX - G_YMIN) / count) * (i - min / 5) + 5);
    }
  }
}

/**
 * グリッドの出力
 * @param {CanvasRenderingContext2D} context 描画コンテキスト
 * @param {number} min y軸下限
 * @param {number} max y軸上限
 * @param {number} pt 目盛の数
 */
function drawPast_grid(context, min, max, pt) {
  context.strokeStyle = '#afafaf';
  var count = 0;
  for (var i = min; i < max; i += 5) count++;
  for (var i = 0; i < pt; i++) {
    context.beginPath();
    context.moveTo(G_XMIN + (i * (G_XMAX - G_XMIN)) / (pt - 1), G_YMIN - 25);
    context.lineTo(G_XMIN + (i * (G_XMAX - G_XMIN)) / (pt - 1), G_YMAX);
    context.closePath();
    context.stroke();
  }
  if (count < 3) {
    count = 0;
    for (var i = min; i < max; i++) count++;
    for (var i = 1 + min; i <= max; i++) {
      context.beginPath();
      context.moveTo(G_XMIN, G_YMAX - ((G_YMAX - G_YMIN) / count) * (i - min));
      context.lineTo(G_XMAX + 20, G_YMAX - ((G_YMAX - G_YMIN) / count) * (i - min));
      context.closePath();
      context.stroke();
    }
    for (var i = 0.1 + min; i <= 1 + max; i += 0.1) {
      if (i % 1 != 0) {
        context.beginPath();
        context.setLineDash([2, 2]);
        context.moveTo(G_XMIN, G_YMAX - ((G_YMAX - G_YMIN) / count) * (i - min));
        context.lineTo(G_XMAX + 20, G_YMAX - ((G_YMAX - G_YMIN) / count) * (i - min));
        context.closePath();
        context.stroke();
      }
    }
    context.setLineDash([0, 0]);
  } else {
    for (var i = 1 + min / 5; i < 1 + max / 5; i++) {
      context.beginPath();
      context.moveTo(G_XMIN, G_YMAX - ((G_YMAX - G_YMIN) / count) * (i - min / 5));
      context.lineTo(G_XMAX + 20, G_YMAX - ((G_YMAX - G_YMIN) / count) * (i - min / 5));
      context.closePath();
      context.stroke();
    }
    for (var i = 0.2 + min / 5; i <= max / 5; i += 0.2) {
      if (i % 5 != 0) {
        context.beginPath();
        context.setLineDash([2, 2]);
        context.moveTo(G_XMIN, G_YMAX - ((G_YMAX - G_YMIN) / count) * (i - min / 5));
        context.lineTo(G_XMAX + 20, G_YMAX - ((G_YMAX - G_YMIN) / count) * (i - min / 5));
        context.closePath();
        context.stroke();
      }
    }
    context.setLineDash([0, 0]);
  }
}

/**
 * 折れ線描画(水温)
 * @param {CanvasRenderingContext2D} context 描画コンテキスト
 * @param {number} type グラフID
 * @param {number} num カラム番号(配列の添え字)
 * @param {number} min y軸下限
 * @param {number} max y軸上限
 * @param {number} div 点の数
 */
function draw_past_data(context, type, num, min, max, div) {
  // 折れ線描画(水温)
  var count = 0;
  for (var i = min; i < max; i++) count++;

  var pos1 = { x: -1, y: -1 };
  var pos2 = { x: -1, y: -1 };

  for (var i = 0; i < hp[type].length; i++) {
    if (hp[type][i] == -1) {
      continue;
    }
    if (i >= 1 && i < hp[type].length - 1) {
      if (
        Math.abs(parseFloat(get_suion(hp, type, num + 2, i - 1)) - parseFloat(get_suion(hp, type, num + 2, i))) >= 2 &&
        Math.abs(parseFloat(get_suion(hp, type, num + 2, i + 1)) - parseFloat(get_suion(hp, type, num + 2, i))) >= 2
      ) {
        continue;
      }
    }
    /*
        if(num == 1 && Format_type[type] < 3) {
            continue;
        }
        */
    if (num >= 2 && Format_type[type] == 3) {
      continue;
    }
    //if(num >= 2 && Format_type[type] < 3) {
    //if(get_suion(hp, type, num + 1, i) == "-") continue;
    //} else {
    if (get_suion(hp, type, num + 2, i) == '-') continue;
    //}
    if (Format_type[type] == 4 && get_suion(hp, type, num + 2, i) == 'Err') {
      continue;
    }
    context.beginPath();
    context.strokeStyle = color_table[num];
    pos1.x = G_XMIN + i * ((G_XMAX - G_XMIN) / div);
    //if(num >= 2 && Format_type[type] < 3) {
    //pos1.y = G_YMAX - ((G_YMAX - G_YMIN) / count) * (get_suion(hp, type, num + 1, i) - min);
    //} else {
    pos1.y = G_YMAX - ((G_YMAX - G_YMIN) / count) * (get_suion(hp, type, num + 2, i) - min);
    //}
    if (pos2.x == -1 && pos2.y == -1) {
      context.moveTo(pos1.x, pos1.y);
      if (hh[type] < 2) {
        drawPoint(context, pos1.x, pos1.y, 1.7 - (0.2 * div) / 24);
      }
    } else {
      context.moveTo(pos2.x, pos2.y);
      context.lineTo(pos1.x, pos1.y);
      context.stroke();
      if (hh[type] < 2) {
        drawPoint(context, pos1.x, pos1.y, 1.7 - (0.2 * div) / 24);
      }
    }
    if (i < hp[type].length - 1) {
      pos2.x = pos1.x;
      pos2.y = pos1.y;
    }
  }
}

/**
 * 折れ線描画(気温)
 * @param {CanvasRenderingContext2D} context 描画コンテキスト
 * @param {number} type グラフID
 * @param {number} min y軸下限
 * @param {number} max y軸上限
 * @param {number} div 点の数
 */
function draw_past_temp(context, type, min, max, div) {
  var count = 0;
  for (var i = min; i < max; i++) count++;

  var pos1 = { x: -1, y: -1 };
  var pos2 = { x: -1, y: -1 };

  for (var i = 0; i < h_temp[type].length; i++) {
    if (h_temp[type][i] == -1) {
      continue;
    }
    context.beginPath();
    context.strokeStyle = color_table2[type];
    pos1.x = G_XMIN + i * ((G_XMAX - G_XMIN) / div);
    pos1.y = G_YMAX - ((G_YMAX - G_YMIN) / count) * (h_temp[type][i][1] - min);
    if (pos2.x == -1 && pos2.y == -1) {
      context.moveTo(pos1.x, pos1.y);
      drawPoint(context, pos1.x, pos1.y, 1.7 - (0.2 * div) / 24);
    } else {
      context.moveTo(pos2.x, pos2.y);
      context.lineTo(pos1.x, pos1.y);
      context.stroke();
      drawPoint(context, pos1.x, pos1.y, 1.7 - (0.2 * div) / 24);
    }
    if (i < h_temp[type].length - 1) {
      pos2.x = pos1.x;
      pos2.y = pos1.y;
    }
  }
}

/**
 * 点の描画
 * @param {CanvasRenderingContext2D} context 描画コンテキスト
 * @param {number} x x座標
 * @param {number} y y座標
 * @param {number} radius 点の半径
 */
function drawPoint(context, x, y, radius) {
  if (radius < 0) {
    radius = 0;
  }
  context.beginPath();
  context.fillStyle = '#000000';
  context.arc(x, y, radius, 0, Math.PI * 2, true);
  context.fill();
}

/**
 * テキストの描画
 * @param {CanvasRenderingContext2D} context 描画コンテキスト
 * @param {string} text 表示するテキスト
 * @param {number} x x座標
 * @param {number} y y座標
 */
function draw_text(context, text, x, y) {
  context.beginPath();
  context.strokeStyle = '#000000';
  context.font = '9pt Arial';
  context.fillText(text, x, y);
}

/**
 * 最新の海水温グラフの描画
 */
function draw_now_graph() {
  var canvas = document.getElementById('now');
  var context = canvas.getContext('2d');
  min = now_minTemp;
  max = now_maxTemp;
  context.clearRect(0, 0, C_WIDTH4, C_HEIGHT4);
  context.beginPath();
  drawNow_Axis(context); // 軸描画
  //    draw_temp_slider_tick(context);
  drawNow_grid(context, min, max, suion_list.length + 2);
  //    draw_now_data(context, type, min, max, suion_list.length);
  for (var i = 0; i < deep_list['全体'].length; i++) {
    if (checkList2[i]) {
      draw_now_data_line(context, i, min, max, suion_list.length);
    }
  }

  // グラフ描画領域から飛び出した部分の消去
  context.clearRect(0, 0, C_WIDTH4 - 30, 45);
  context.clearRect(0, G_YMAX4 + 1, C_WIDTH4 - 30, C_HEIGHT4);

  drawNowX_Axis(context, suion_list.length);
  draw_text(context, '最新の海水温', 5, 20);
  context.clearRect(G_XMAX4, 0, C_WIDTH4, C_HEIGHT4);

  context.beginPath();
  context.strokeStyle = '#afafaf';
  context.moveTo(G_XMIN4, G_YMIN4);
  context.lineTo(48, G_YMIN4 - ((max - 40) / 5) * (320 / (tempList.length - 1)));
  context.moveTo(G_XMIN4, G_YMAX4);
  context.lineTo(48, G_YMIN4 - ((min - 40) / 5) * (320 / (tempList.length - 1)));
  context.closePath();
  context.stroke();
  context.strokeStyle = '#000000';
  draw_temp_slider_tick(context);
  drawY_Axis(context, min, max);
}

/**
 * 最新の海水温グラフの軸描画
 * @param {CanvasRenderingContext2D} context 描画コンテキスト
 */
function drawNow_Axis(context) {
  // 軸描画
  context.strokeStyle = '#000000';
  context.beginPath();

  // 横軸の描画
  context.moveTo(G_XMIN4, G_YMAX4);
  context.lineTo(G_XMAX4 + 20, G_YMAX4);

  // 縦軸の描画
  context.moveTo(G_XMIN4, G_YMIN4 - 25);
  context.lineTo(G_XMIN4, G_YMAX4);
  context.closePath();
  context.stroke();
}

/**
 * 最新の海水温グラフのグリッド出力
 * @param {CanvasRenderingContext2D} context 描画コンテキスト
 * @param {number} min y軸下限
 * @param {number} max y軸上限
 * @param {number} pt 目盛の数
 */
function drawNow_grid(context, min, max, pt) {
  context.strokeStyle = '#afafaf';
  var count = 0;
  for (var i = min; i < max; i += 5) count++;
  for (var i = 0; i < pt; i++) {
    context.beginPath();
    context.moveTo(G_XMIN4 + (i * (G_XMAX4 - G_XMIN4)) / (pt - 1), G_YMIN4 - 25);
    context.lineTo(G_XMIN4 + (i * (G_XMAX4 - G_XMIN4)) / (pt - 1), G_YMAX4);
    context.closePath();
    context.stroke();
  }
  if (count < 3) {
    count = 0;
    for (var i = min; i < max; i++) count++;
    for (var i = 1 + min; i <= max; i++) {
      context.beginPath();
      context.moveTo(G_XMIN4, G_YMAX4 - ((G_YMAX4 - G_YMIN4) / count) * (i - min));
      context.lineTo(G_XMAX4 + 20, G_YMAX4 - ((G_YMAX4 - G_YMIN4) / count) * (i - min));
      context.closePath();
      context.stroke();
    }
    for (var i = 0.1 + min; i <= 1 + max; i += 0.1) {
      if (i % 1 != 0) {
        context.beginPath();
        context.setLineDash([2, 2]);
        context.moveTo(G_XMIN4, G_YMAX4 - ((G_YMAX4 - G_YMIN4) / count) * (i - min));
        context.lineTo(G_XMAX4 + 20, G_YMAX4 - ((G_YMAX4 - G_YMIN4) / count) * (i - min));
        context.closePath();
        context.stroke();
      }
    }
    context.setLineDash([0, 0]);
  } else {
    for (var i = 1 + min / 5; i < 1 + max / 5; i++) {
      context.beginPath();
      context.moveTo(G_XMIN4, G_YMAX4 - ((G_YMAX4 - G_YMIN4) / count) * (i - min / 5));
      context.lineTo(G_XMAX4 + 20, G_YMAX4 - ((G_YMAX4 - G_YMIN4) / count) * (i - min / 5));
      context.closePath();
      context.stroke();
    }
    for (var i = 0.2 + min / 5; i <= max / 5; i += 0.2) {
      if (i % 5 != 0) {
        context.beginPath();
        context.setLineDash([2, 2]);
        context.moveTo(G_XMIN4, G_YMAX4 - ((G_YMAX4 - G_YMIN4) / count) * (i - min / 5));
        context.lineTo(G_XMAX4 + 20, G_YMAX4 - ((G_YMAX4 - G_YMIN4) / count) * (i - min / 5));
        context.closePath();
        context.stroke();
      }
    }
    context.setLineDash([0, 0]);
  }
}

/**
 * x軸ラベル出力(最新のデータ)
 * @param {CanvasRenderingContext2D} context 描画コンテキスト
 * @param {number} div 測点数
 */
function drawNowX_Axis(context, div) {
  context.beginPath();
  context.strokeStyle = '#000000';
  context.font = '9pt Arial';
  for (var i = 1; i <= div; i++) {
    var name = suion_list[i - 1];
    if (suion_list[i - 1] == '塩子島') {
      name = '油袋沖';
    }
    const text = blank_insert('' + name);
    draw_text(context, text, G_XMIN4 - 18 + (i * (G_XMAX4 - G_XMIN4)) / (div + 1), C_HEIGHT4 - 30);
    //        context.moveTo(G_XMIN + i * ((G_XMAX-G_XMIN)/(div + 1)), C_HEIGHT - 52);
    //        context.lineTo(G_XMIN + i * ((G_XMAX-G_XMIN)/(div + 1)), C_HEIGHT - 48);
  }
  context.stroke();
}

/**
 * グラフの軸ラベルの微調整
 * @param {string} text 調整するテキスト
 * @return {string} 調整後のテキスト
 */
function blank_insert(text) {
  for (var i = 0; i < 3 - text.length; i++) {
    text = ' ' + text;
  }
  return text;
}

/**
 * 折れ線描画(最新データ)
 * @param {CanvasRenderingContext2D} context 描画コンテキスト
 * @param {number} type データID
 * @param {number} min y軸下限
 * @param {number} max y軸上限
 * @param {number} div 点の数
 */
function draw_now_data_line(context, type, min, max, div) {
  var count = 0;
  for (var i = min; i < max; i++) count++;

  var pos1 = { x: -1, y: -1 };
  var pos2 = { x: -1, y: -1 };

  for (var i = 0; i < p.length; i++) {
    var measure_date = '';
    switch (Format_type[i]) {
      case 0:
      case 4:
        measure_date = p[i][0] + ' ' + p[i][1];
        break;
      case 1:
      case 2:
        measure_date =
          p[i][0].slice(0, 4) +
          '/' +
          p[i][0].slice(4, 6) +
          '/' +
          p[i][0].slice(6, 8) +
          ' ' +
          p[i][0].slice(8, 10) +
          ':' +
          p[i][0].slice(10, 12) +
          ':00';
        break;
      case 3:
        measure_date = '20' + p[i][0] + ' ' + p[i][1];
        break;
      default:
        measure_date = p[i][0] + ' ' + p[i][1];
        break;
    }
    var year = load_date.getFullYear();
    var month = load_date.getMonth() + 1;
    var day = load_date.getDate();
    var hour = load_date.getHours();
    var lated_date = '' + year + '/' + ('0' + month).slice(-2) + '/' + ('0' + day).slice(-2) + ' ' + hour + ':00:00';
    var l_dt = new Date(lated_date);
    var m_dt = new Date(measure_date);
    if ((l_dt - m_dt) / (3600 * 1000) > 1) {
      continue;
    }
    if (deep_list[suion_list[i]][type] == '') {
      continue;
    }
    if (suion_list[i] == '三浦' && deep_list['三浦'][type] == '5m') continue;
    //if(type >= 2 && Format_type[i] < 3) {
    //var value = get_now_data(i, type + 1);
    //} else {
    var value = get_now_data(i, type + 2);
    //}
    if (value == '-' || value == 'Err') {
      continue;
    }
    context.beginPath();
    context.strokeStyle = color_table[type];
    pos1.x = G_XMIN4 + (i + 1) * ((G_XMAX4 - G_XMIN4) / (div + 1));
    pos1.y = G_YMAX4 - ((G_YMAX4 - G_YMIN4) / count) * (value - min);
    if (pos2.x == -1 && pos2.y == -1) {
      context.moveTo(pos1.x, pos1.y);
      drawPoint(context, pos1.x, pos1.y, 1.7 - (0.2 * div) / 24);
    } else {
      context.moveTo(pos2.x, pos2.y);
      context.lineTo(pos1.x, pos1.y);
      context.closePath();
      context.stroke();
      drawPoint(context, pos1.x, pos1.y, 1.7 - (0.2 * div) / 24);
    }
    if (i < p.length - 1) {
      pos2.x = pos1.x;
      pos2.y = pos1.y;
    }
  }
}

/**
 * 気温の時間変化グラフの描画
 * @param {number} graph_hour 表示期間
 */
function draw_temp_graph(graph_hour) {
  var c_name = 'past' + suion_list.length;
  var canvas = document.getElementById(c_name);
  var context = canvas.getContext('2d');
  min = kion_minTemp;
  max = kion_maxTemp;
  context.beginPath();
  context.clearRect(0, 0, C_WIDTH, C_HEIGHT);
  draw_past_gray(context, graph_hour, data_offset[suion_list.length]);
  drawAxis(context); // 軸描画
  if (hh[suion_list.length] < 2) {
    drawPast_grid(context, min, max, graph_hour + 1);
  } else {
    switch (hh[suion_list.length]) {
      case 2:
        drawPast_grid(context, min, max, 9);
        break;
      case 3:
        drawPast_grid(context, min, max, 32);
        break;
      case 4:
        drawPast_grid(context, min, max, 62);
        break;
    }
  }
  for (var i = 0; i < checkList3.length; i++) {
    if (checkList3[i]) {
      draw_past_temp(context, i, min, max, graph_hour * 6);
    }
  }

  // グラフ描画領域から飛び出した部分の消去
  context.clearRect(0, 0, C_WIDTH - 30, 45);
  context.clearRect(0, G_YMAX + 1, C_WIDTH - 30, C_HEIGHT);

  draw_tick(context);
  if (hh[suion_list.length] < 2) {
    drawPastX_Axis(context, graph_hour, data_offset[suion_list.length]);
  } else {
    switch (hh[suion_list.length]) {
      case 2:
        drawPastX_Axis_day(context, 8, data_offset[suion_list.length]);
        break;
      case 3:
        drawPastX_Axis_day(context, 31, data_offset[suion_list.length]);
        break;
      case 4:
        drawPastX_Axis_day(context, 61, data_offset[suion_list.length]);
        break;
    }
  }
  draw_text(context, '気温の時間変化', 5, 20);
  context.beginPath();
  context.strokeStyle = '#afafaf';
  context.moveTo(G_XMIN, G_YMIN);
  context.lineTo(48, G_YMIN - ((max - 40) / 5) * (320 / (tempList.length - 1)));
  context.moveTo(G_XMIN, G_YMAX);
  context.lineTo(48, G_YMIN - ((min - 40) / 5) * (320 / (tempList.length - 1)));
  context.closePath();
  context.stroke();
  context.strokeStyle = '#000000';
  draw_temp_slider_tick(context);
  drawY_Axis(context, min, max);
}

/**
 * 表示設定変更によるグラフの再描画
 */
function change_graph() {
  var dt = new Date(load_date);
  var n_hour = 0;
  for (i = 0; i < hp.length; i++) {
    if (data_offset[i] <= dt.getHours()) {
      if (hh[i] > 1) {
        n_hour = 24 - dt.getHours();
      }
    }
    hp[i] = past_suion_set(Format_type[i], data[i], graph_hour[i][hh[i]] - n_hour, data_offset[i]);
    n_hour = 0;
  }
  //    for(var i = 0; i < h_temp.length; i++) {
  //        if(hh[i] > 1) {
  //            n_hour = 24 - dt.getHours();
  //        } else {
  //            n_hour = 0;
  //        }
  //        switch(i) {
  //            case 0:
  //            case 1:
  //            case 2:
  //                h_temp[i] = past_temp_set(temp[2], (graph_hour[i][hh[i]] - n_hour), data_offset[i]);
  //                break;
  //            case 3:
  //            case 4:
  //                h_temp[i] = past_temp_set(temp[1], (graph_hour[i][hh[i]] - n_hour), data_offset[i]);
  //                break;
  //            case 5:
  //                h_temp[i] = past_temp_set(temp[0], (graph_hour[i][hh[i]] - n_hour), data_offset[i]);
  //        }
  //    }
  for (var i = 0; i < hp.length; i++) {
    draw_graph_temp(i);
    draw_past_graph(i, graph_hour[i][hh[i]]);
  }
}

/**
 * 指定idのスライダーの値を変更
 * @param {string} id id名
 * @param {number} flag スライダーID
 */
function change_value(id, flag) {
  var value = jQuery(id).slider('value') + flag;
  jQuery(id).slider('value', value);
}

/**
 * 表示期間の変更
 * @param {number} type グラフID
 * @param {number} value 変動させる値
 */
function slide_time_range(type, value) {
  var context = element[type].getContext('2d');
  var dt = new Date(load_date);
  hh[type] = h_table.length - 1 + value;
  var n_hour = 0;
  if (data_offset[type] <= dt.getHours()) {
    if (hh[type] > 1) {
      //dt.setHours(dt.getHours() - data_offset[type]);
      n_hour = 24 - dt.getHours();
    }
  }
  if (type >= suion_list.length) {
    for (var i = 0; i < temp_list.length; i++) {
      h_temp[i] = past_temp_set(temp[i], graph_hour[type][hh[type]] - n_hour, data_offset[type]);
    }
    draw_temp_graph(graph_hour[type][hh[type]]);
    return;
  }
  hp[type] = past_suion_set(Format_type[type], data[type], graph_hour[type][hh[type]] - n_hour, data_offset[type]);
  draw_graph_temp(type);
  draw_past_graph(type, graph_hour[type][hh[type]]);
  var cookie = '';
  for (var i = 0; i < hh.length; i++) {
    if (i == hh.length - 1) {
      cookie += hh[i];
    } else {
      cookie += hh[i] + ',';
    }
  }
  set_cookie('hh', cookie, 365);
}

/**
 * イベントリスナーの追加
 * @param {number} i DOM要素配列の添え字
 */
function canvas_addEventListener(i) {
  // イベントリスナーの追加
  if (naibu == 0 && test == 0) return;
  //    if(window.WheelEvent) {
  //        element[i].addEventListener("wheel" , function (e) {
  //            e.preventDefault();
  //            if(e.deltaY < 0) {
  //                change_time_range(i, -1);
  //            } else if(e.deltaY > 0) {
  //                change_time_range(i, 1);
  //            }
  //        });
  //    }
  if (window.addEventListener) {
    element[i].addEventListener('mousedown', mousedown_event);
    //        element[i].addEventListener("mousemove", mousemove_event);
    //        element[i].addEventListener("mouseup", mouseup_event);
  }
  element[i].onmousemove = mousemove_event;
}

// function mousedown_event(e) {
//   // マウスボタンが押下された時の処理
//   var sp = e.target.id.split('t');
//   var type = parseInt(sp[1]);
//   var rect = e.target.getBoundingClientRect();
//   //    if(hh[type] < 2) {
//   if (e.buttons == 1) {
//     e.preventDefault();
//     cursor_x[0] = e.clientX - rect.left;
//     cursor_y[0] = e.clientY - rect.top;
//     if (cursor_x[0] >= G_XMIN && cursor_x[0] <= G_XMAX && cursor_y[0] >= G_YMIN && cursor_y[0] <= G_YMAX) {
//       e.target.style.cursor = 'ew-resize';
//       draw_long_graph(type);
//       var canvas = document.getElementById('hidden');
//       data_url = canvas.toDataURL();
//       //                var image = document.getElementById('image');
//       //                image.src = data_url;
//       img.src = data_url;
//       img_draw(e.target, 0);
//       mousedown_buf = true;
//     } else {
//       e.target.style.cursor = 'default';
//     }
//   }
//   //    }
// }

// function mousemove_event(e) {
//   // ドラッグ時の処理
//   var sp = e.target.id.split('t');
//   var type = parseInt(sp[1]);
//   var rect = e.target.getBoundingClientRect();
//   //    if(hh[type] < 2) {
//   if (e.buttons == 1) {
//     var x = 0;
//     var y = 0;
//     e.preventDefault();
//     if (cursor_x[0] >= G_XMIN && cursor_x[0] <= G_XMAX && cursor_y[0] >= G_YMIN && cursor_y[0] <= G_YMAX) {
//       e.target.style.cursor = 'ew-resize';
//       x = e.clientX - rect.left;
//       y = e.clientY - rect.top;
//       if (mousedown_buf) {
//         if (x >= G_XMIN && x <= G_XMAX && y >= G_YMIN && y <= G_YMAX) {
//           img_draw(e.target, x - cursor_x[0]);
//         } else {
//           e.target.style.cursor = 'default';
//           var rect = e.target.getBoundingClientRect();
//           if (e.clientX - rect.left < G_XMIN) {
//             x = G_XMIN;
//           } else if (e.clientX - rect.left > G_XMAX) {
//             x = G_XMAX;
//           } else {
//             x = e.clientX - rect.left;
//           }
//           var sp = e.target.id.split('t');
//           var type = parseInt(sp[1]);
//           var div = graph_hour[type][hh[type]];
//           var d = Math.round((x - cursor_x[0]) / ((G_XMAX - G_XMIN) / div));
//           graph_scroll(e.target.id, d);
//           mousedown_buf = false;
//         }
//       }
//     }
//   } else if (e.buttons == 0) {
//     e.target.style.cursor = 'default';
//     if (mousedown_buf) {
//       var rect = e.target.getBoundingClientRect();
//       var x = e.clientX - rect.left;
//       var y = e.clientY - rect.top;
//       var sp = e.target.id.split('t');
//       var type = parseInt(sp[1]);
//       var div = graph_hour[type][hh[type]];
//       if (x >= G_XMIN && x <= G_XMAX && y >= G_YMIN && y <= G_YMAX) {
//         var d = Math.round((x - cursor_x[0]) / ((G_XMAX - G_XMIN) / div));
//         graph_scroll(e.target.id, d);
//       }
//       mousedown_buf = false;
//     }
//   }
//   //    }
// }

// function img_draw(canvas, delta) {
//   // グラフスクロール時の画像描画(切り抜き)
//   context = canvas.getContext('2d');
//   var sp = canvas.id.split('t');
//   var type = parseInt(sp[1]);
//   var div = graph_hour[type][hh[type]] * 3;
//   sx = G_XMIN2 + (div / 3) * ((G_XMAX2 - G_XMIN2) / div) - delta;
//   context.drawImage(img, sx, 0, G_XMAX + 20 - G_XMIN, G_YMAX - 25, G_XMIN, 45, G_XMAX + 20 - G_XMIN, G_YMAX - 25);
//   context.drawImage(
//     img,
//     sx - 10,
//     G_YMAX2,
//     G_XMAX + 20 - G_XMIN + 10,
//     C_HEIGHT - G_YMAX,
//     G_XMIN - 10,
//     G_YMAX,
//     G_XMAX + 20 - G_XMIN + 10,
//     C_HEIGHT - G_YMAX
//   );
// }

// function graph_scroll(c_name, delta) {
//   // グラフのスクロール後の処理
//   var dt = new Date(load_date);
//   var sp = c_name.split('t');
//   var type = parseInt(sp[1]);
//   if (data_offset[type] + delta >= 0) {
//     data_offset[type] += delta;
//   } else {
//     data_offset[type] = 0;
//   }
//   //dt.setHours(dt.getHours() - data_offset[type]);
//   var n_hour = 0;
//   if (data_offset[type] <= dt.getHours()) {
//     if (hh[type] > 1) {
//       n_hour = 24 - dt.getHours();
//     }
//   }
//   if (type < suion_list.length) {
//     hp[type] = past_suion_set(Format_type[type], data[type], graph_hour[type][hh[type]] - n_hour, data_offset[type]);
//     draw_graph_temp(type);
//     draw_past_graph(type, graph_hour[type][hh[type]]);
//   } else {
//     for (var i = 0; i < temp_list.length; i++) {
//       h_temp[i] = past_temp_set(
//         temp[i],
//         graph_hour[suion_list.length][hh[suion_list.length]] - n_hour,
//         data_offset[suion_list.length]
//       );
//     }
//     draw_temp_graph(graph_hour[suion_list.length][hh[suion_list.length]]);
//   }
// }

// function graph_scroll_reset(type) {
//   // スクロールリセット
//   var dt = new Date(load_date);
//   data_offset[type] = 0;
//   dt.setHours(dt.getHours() - data_offset[type]);
//   var n_hour = 0;
//   if (hh[type] > 1) {
//     n_hour = 24 - dt.getHours();
//   }
//   if (type >= suion_list.length) {
//     for (var i = 0; i < temp_list.length; i++) {
//       h_temp[i] = past_temp_set(temp[i], graph_hour[type][hh[type]] - n_hour, data_offset[type]);
//     }
//     draw_temp_graph(graph_hour[type][hh[type]]);
//     return;
//   }
//   hp[type] = past_suion_set(Format_type[type], data[type], graph_hour[type][hh[type]] - n_hour, data_offset[type]);
//   draw_graph_temp(type);
//   draw_past_graph(type, graph_hour[type][hh[type]]);
// }

/**
 * 表の表示測定時刻スライダーの目盛描画
 */
function draw_time_tick() {
  var canvas = document.getElementById('time_tick');
  var context = canvas.getContext('2d');
  context.strokeStyle = '#afafaf';
  for (i = 0; i < 31; i++) {
    context.moveTo(2 + i * Math.round(510 / 30), 0);
    context.lineTo(2 + i * Math.round(510 / 30), 15);
    context.stroke();
  }
}

/**
 * 表示温度範囲の適用
 * @param {number} min y軸下限
 * @param {number} max y軸上限
 * @param {number} type グラフの種類
 */
function limit_temp_set(min, max, type) {
  switch (type) {
    case 0: // 海水温の時間変化
      for (i = 0; i < suion_list.length; i++) {
        minTemp[i] = min;
        maxTemp[i] = max;
      }
      change_graph();
      set_cookie('past_minTemp', min, 365);
      set_cookie('past_maxTemp', max, 365);
      break;
    case 1: // 最新の海水温
      now_minTemp = min;
      now_maxTemp = max;
      draw_now_graph();
      set_cookie('now_minTemp', min, 365);
      set_cookie('now_maxTemp', max, 365);
      break;
    case 2: // 気温の時間変化
      kion_minTemp = min;
      kion_maxTemp = max;
      draw_temp_graph(graph_hour[suion_list.length][hh[suion_list.length]]);
      set_cookie('kion_minTemp', min, 365);
      set_cookie('kion_maxTemp', max, 365);
      break;
  }
}

/**
 * 表示温度範囲の自動調整(過去のデータ)
 */
function regulate_temp() {
  setTemp_all();
  temp_bool = false;
  for (var i = 0; i < suion_list.length; i++) {
    jQuery('#past_temp_range' + i).slider('values', [minTemp[0], maxTemp[0]]);
    temp_bool = false;
  }
  limit_temp_set(minTemp[0], maxTemp[0], 0);
}

/**
 * 表示温度範囲の自動調整(最新データ)
 */
function regulate_temp_now() {
  setTemp_now();
  jQuery('#now_temp_range').slider('values', [now_minTemp, now_maxTemp]);
}

/**
 * 表示温度範囲の自動調整(気温)
 */
function regulate_temp_kion() {
  setTemp_kion();
  jQuery('#temp_range2').slider('values', [kion_minTemp, kion_maxTemp]);
}

function draw_preview_now_graph_mod(num) {
  // 最新の海水温グラフ プレビュー表示用(大きさそのまま)
  var canvas_id = 'now_preview' + num;
  var canvas = document.getElementById(canvas_id);
  var context = canvas.getContext('2d');
  min = now_minTemp_setting[num];
  max = now_maxTemp_setting[num];
  context.clearRect(0, 0, C_WIDTH, C_HEIGHT);
  drawAxis(context);
  drawPast_grid(context, min, max, suion_list.length + 2);
  for (var i = 0; i < deep_list['全体'].length; i++) {
    if (now_check_list[num][i]) {
      draw_now_data_line_preview(context, i, min, max, suion_list.length);
    }
  }

  //グラフ描画領域から飛び出した部分の消去
  context.clearRect(0, 0, C_WIDTH - 30, 45);
  context.clearRect(0, G_YMAX + 1, C_WIDTH - 30, C_HEIGHT);
  drawNowX_Axis_preview(context, suion_list.length);
  context.clearRect(G_XMAX, 0, C_WIDTH, C_HEIGHT);

  context.beginPath();
  context.strokeStyle = '#afafaf';
  context.moveTo(G_XMIN, G_YMIN);
  context.lineTo(48, G_YMIN - ((max - 40) / 5) * (320 / (tempList.length - 1)));
  context.moveTo(G_XMIN, G_YMAX);
  context.lineTo(48, G_YMIN - ((min - 40) / 5) * (320 / (tempList.length - 1)));
  context.closePath();
  context.stroke();
  drawY_Axis(context, min, max);
  draw_temp_slider_tick(context);
}

function drawAxis_preview(context) {
  // 軸描画
  context.strokeStyle = '#000000';

  // 横軸の描画
  context.moveTo(G_XMIN3, G_YMAX3);
  context.lineTo(C_WIDTH3, G_YMAX3);

  // 縦軸の描画
  context.moveTo(G_XMIN3, 0);
  context.lineTo(G_XMIN3, G_YMAX3);
  context.stroke();
}

function drawY_Axis_preview(context, min, max) {
  // y軸ラベル出力
  context.strokeStyle = '#000000';
  context.font = '6pt Arial';
  var count = 0;
  for (var i = min; i < max; i += 5) {
    count++;
  }
  if (count < 3) {
    count = 0;
    for (var i = min; i < max; i++) count++;
    for (var i = min; i < 1 + max; i++) {
      var text = '' + i;
      text_w = context.measureText(text).width;
      context.fillText(text, G_XMIN3 - 1 - text_w, G_YMAX3 - ((G_YMAX3 - G_YMIN3) / count) * (i - min) + 5);
    }
  } else {
    for (var i = min / 5; i < 1 + max / 5; i++) {
      var text = '' + i * 5;
      text_w = context.measureText(text).width;
      context.fillText(text, G_XMIN3 - 1 - text_w, G_YMAX3 - ((G_YMAX3 - G_YMIN3) / count) * (i - min / 5) + 5);
    }
  }
}

function drawNowX_Axis_preview(context, div) {
  context.beginPath();
  context.strokeStyle = '#000000';
  context.font = '9pt Arial';
  for (var i = 1; i <= div; i++) {
    text = blank_insert('' + suion_list[i - 1]);
    draw_text(context, text, G_XMIN - 18 + (i * (G_XMAX - G_XMIN4)) / (div + 1), C_HEIGHT - 30);
  }
  context.stroke();
}

function drawNow_tick_preview(context, min, max) {
  // 未使用
  context.strokeStyle = '#afafaf';
  var count = 0;
  for (var i = min; i < max; i += 5) count++;
  for (var i = 1 + min / 5; i < 1 + max / 5; i++) {
    context.moveTo(G_XMIN3, G_YMAX3 - ((G_YMAX3 - G_YMIN3) / count) * (i - min / 5));
    context.lineTo(C_WIDTH3, G_YMAX3 - ((G_YMAX3 - G_YMIN3) / count) * (i - min / 5));
  }
  for (var i = 0; i < p.length; i++) {
    context.moveTo(G_XMIN3 + ((i + 1) * (G_XMAX3 - G_XMIN3)) / (p.length + 1), 0);
    context.lineTo(G_XMIN3 + ((i + 1) * (G_XMAX3 - G_XMIN3)) / (p.length + 1), G_YMAX3);
  }
  context.stroke();
  context.beginPath();
  for (var i = 0.2 + min / 5; i <= max / 5; i += 0.2) {
    if (i % 5 != 0) {
      context.setLineDash([2, 2]);
      context.moveTo(G_XMIN3, G_YMAX3 - ((G_YMAX3 - G_YMIN3) / count) * (i - min / 5));
      context.lineTo(C_WIDTH3, G_YMAX3 - ((G_YMAX3 - G_YMIN3) / count) * (i - min / 5));
    }
  }
  context.stroke();
  context.setLineDash([0, 0]);
}

function draw_now_data_line_preview(context, type, min, max, div) {
  var count = 0;
  for (var i = min; i < max; i++) count++;

  var pos1 = { x: -1, y: -1 };
  var pos2 = { x: -1, y: -1 };

  for (var i = 0; i < p.length; i++) {
    var measure_date = '';
    switch (Format_type[i]) {
      case 0:
      case 4:
        measure_date = p[i][0] + ' ' + p[i][1];
        break;
      case 1:
      case 2:
        measure_date =
          p[i][0].slice(0, 4) +
          '/' +
          p[i][0].slice(4, 6) +
          '/' +
          p[i][0].slice(6, 8) +
          ' ' +
          p[i][0].slice(8, 10) +
          ':' +
          p[i][0].slice(10, 12) +
          ':00';
        break;
      case 3:
        measure_date = '20' + p[i][0] + ' ' + p[i][1];
        break;
    }
    var year = load_date.getFullYear();
    var month = load_date.getMonth() + 1;
    var day = load_date.getDate();
    var hour = load_date.getHours();
    var lated_date = '' + year + '/' + ('0' + month).slice(-2) + '/' + ('0' + day).slice(-2) + ' ' + hour + ':00:00';
    var l_dt = new Date(lated_date);
    var m_dt = new Date(measure_date);
    if ((l_dt - m_dt) / (3600 * 1000) > 1) {
      continue;
    }
    if (deep_list[suion_list[i]][type] == '') {
      continue;
    }
    if (type >= 2 && Format_type[i] < 3) {
      var value = get_now_data(i, type + 1);
    } else {
      var value = get_now_data(i, type + 2);
    }
    if (value == '-' || value == 'Err') {
      continue;
    }
    context.beginPath();
    context.strokeStyle = color_table[type];
    pos1.x = G_XMIN + (i + 1) * ((G_XMAX - G_XMIN) / (div + 1));
    pos1.y = G_YMAX - ((G_YMAX - G_YMIN) / count) * (value - min);
    if (pos2.x == -1 && pos2.y == -1) {
      context.moveTo(pos1.x, pos1.y);
      drawPoint(context, pos1.x, pos1.y, 1.7 - (0.2 * div) / 24);
    } else {
      context.moveTo(pos2.x, pos2.y);
      context.lineTo(pos1.x, pos1.y);
      context.closePath();
      context.stroke();
      drawPoint(context, pos1.x, pos1.y, 1.7 - (0.2 * div) / 24);
    }
    if (i < p.length - 1) {
      pos2.x = pos1.x;
      pos2.y = pos1.y;
    }
  }
}

function draw_past_graph_preview(num) {
  // 折れ線グラフの描画
  var canvas_id = 'past_preview' + num;
  var canvas = document.getElementById(canvas_id);
  var context = canvas.getContext('2d');
  var min = past_minTemp_setting[num];
  var max = past_maxTemp_setting[num];
  context.clearRect(0, 0, C_WIDTH3, C_HEIGHT3);
  context.beginPath();
  drawAxis_preview(context);
  drawPast_grid_preview(context, min, max, 25);
  context.strokeStyle = '#000000';
  for (var i = 0; i < deep_list['全体'].length; i++) {
    if (past_check_list[num][i]) {
      draw_past_data_preview(context, 0, i, min, max, 24);
    }
  }
  //    if(past_check_list[num][deep.length]) {
  //        draw_past_temp_preview(context, 0, min, max, 24);
  //    }
  context.clearRect(0, G_YMAX3 + 1, C_WIDTH3, C_HEIGHT3 - G_YMIN3 - 1);
  drawY_Axis_preview(context, min, max);
}

function drawPast_grid_preview(context, min, max, pt) {
  // グリッド出力
  context.strokeStyle = '#afafaf';
  var count = 0;
  for (var i = min; i < max; i += 5) count++;
  for (var i = 0; i < pt; i++) {
    context.beginPath();
    context.moveTo(G_XMIN3 + (i * (G_XMAX3 - G_XMIN3)) / (pt - 1), 0);
    context.lineTo(G_XMIN3 + (i * (G_XMAX3 - G_XMIN3)) / (pt - 1), G_YMAX3);
    context.closePath();
    context.stroke();
  }
  if (count < 3) {
    count = 0;
    for (var i = min; i < max; i++) count++;
    for (var i = 1 + min; i <= max; i++) {
      context.beginPath();
      context.moveTo(G_XMIN3, G_YMAX3 - ((G_YMAX3 - G_YMIN3) / count) * (i - min));
      context.lineTo(C_WIDTH3, G_YMAX3 - ((G_YMAX3 - G_YMIN3) / count) * (i - min));
      context.closePath();
      context.stroke();
    }
    for (var i = 0.1 + min; i <= 1 + max; i += 0.1) {
      if (i % 1 != 0) {
        context.beginPath();
        context.setLineDash([2, 2]);
        context.moveTo(G_XMIN3, G_YMAX3 - ((G_YMAX3 - G_YMIN3) / count) * (i - min));
        context.lineTo(C_WIDTH3, G_YMAX3 - ((G_YMAX3 - G_YMIN3) / count) * (i - min));
        context.closePath();
        context.stroke();
      }
    }
    context.setLineDash([0, 0]);
  } else {
    for (var i = 1 + min / 5; i < 1 + max / 5; i++) {
      context.beginPath();
      context.moveTo(G_XMIN3, G_YMAX3 - ((G_YMAX3 - G_YMIN3) / count) * (i - min / 5));
      context.lineTo(C_WIDTH3, G_YMAX3 - ((G_YMAX3 - G_YMIN3) / count) * (i - min / 5));
      context.closePath();
      context.stroke();
    }
    for (var i = 0.2 + min / 5; i <= max / 5; i += 0.2) {
      if (i % 5 != 0) {
        context.beginPath();
        context.setLineDash([2, 2]);
        context.moveTo(G_XMIN3, G_YMAX3 - ((G_YMAX3 - G_YMIN3) / count) * (i - min / 5));
        context.lineTo(C_WIDTH3, G_YMAX3 - ((G_YMAX3 - G_YMIN3) / count) * (i - min / 5));
        context.closePath();
        context.stroke();
      }
    }
    context.setLineDash([0, 0]);
  }
}

function draw_past_data_preview(context, type, num, min, max, div) {
  // 折れ線描画(水温)
  var count = 0;
  for (var i = min; i < max; i++) count++;

  var pos1 = { x: -1, y: -1 };
  var pos2 = { x: -1, y: -1 };

  if (num == 1) {
    for (var i = 0; i < Format_type.length; i++) {
      if (Format_type[i] == 3) {
        type = i;
        break;
      }
    }
  }

  for (var i = 0; i < hp[type].length; i++) {
    if (hp[type][i] == -1) {
      continue;
    }
    if (num >= 2 && Format_type[type] != 3) {
      if (get_suion(hp, type, num + 1, i) == '-') continue;
    } else {
      if (get_suion(hp, type, num + 2, i) == '-') continue;
    }
    context.beginPath();
    context.strokeStyle = color_table[num];
    pos1.x = G_XMIN3 + i * ((G_XMAX3 - G_XMIN3) / div);
    if (num >= 2 && Format_type[type] != 3) {
      pos1.y = G_YMAX3 - ((G_YMAX3 - G_YMIN3) / count) * (get_suion(hp, type, num + 1, i) - min);
    } else {
      pos1.y = G_YMAX3 - ((G_YMAX3 - G_YMIN3) / count) * (get_suion(hp, type, num + 2, i) - min);
    }
    if (pos2.x == -1 && pos2.y == -1) {
      context.moveTo(pos1.x, pos1.y);
      if (hh[type] < 2) {
        drawPoint(context, pos1.x, pos1.y, (1.7 - (0.2 * div) / 24) / 2);
      }
    } else {
      context.moveTo(pos2.x, pos2.y);
      context.lineTo(pos1.x, pos1.y);
      context.stroke();
      if (hh[type] < 2) {
        drawPoint(context, pos1.x, pos1.y, (1.7 - (0.2 * div) / 24) / 2);
      }
    }
    if (i < hp[type].length - 1) {
      pos2.x = pos1.x;
      pos2.y = pos1.y;
    }
  }
}

function draw_past_temp_preview(context, type, min, max, div) {
  // 折れ線描画(気温)
  var count = 0;
  for (var i = min; i < max; i++) count++;

  var pos1 = { x: -1, y: -1 };
  var pos2 = { x: -1, y: -1 };

  for (var i = 0; i < h_temp[type].length; i++) {
    if (h_temp[type][i] == -1) {
      continue;
    }
    context.beginPath();
    context.strokeStyle = color_table2[type];
    pos1.x = G_XMIN3 + i * ((G_XMAX3 - G_XMIN3) / div);
    pos1.y = G_YMAX3 - ((G_YMAX3 - G_YMIN3) / count) * (h_temp[type][i][1] - min);
    if (pos2.x == -1 && pos2.y == -1) {
      context.moveTo(pos1.x, pos1.y);
      drawPoint(context, pos1.x, pos1.y, (1.7 - (0.2 * div) / 24) / 2);
    } else {
      context.moveTo(pos2.x, pos2.y);
      context.lineTo(pos1.x, pos1.y);
      context.stroke();
      drawPoint(context, pos1.x, pos1.y, (1.7 - (0.2 * div) / 24) / 2);
    }
    if (i < h_temp[type].length - 1) {
      pos2.x = pos1.x;
      pos2.y = pos1.y;
    }
  }
}

function draw_temp_graph_preview(num) {
  var canvas_id = 'kion_preview' + num;
  var canvas = document.getElementById(canvas_id);
  var context = canvas.getContext('2d');
  var min = kion_minTemp_setting[num];
  var max = kion_maxTemp_setting[num];
  context.clearRect(0, 0, C_WIDTH3, C_HEIGHT3);
  context.beginPath();
  drawAxis_preview(context);
  drawPast_grid_preview(context, min, max, 25);
  context.strokeStyle = '#000000';
  for (var i = 0; i < temp_list.length; i++) {
    if (kion_check_list[num][i]) {
      draw_past_temp_preview(context, i, min, max, 24);
    }
  }
  context.clearRect(0, G_YMAX3 + 1, C_WIDTH3, C_HEIGHT3 - G_YMIN3 - 1);
  drawY_Axis_preview(context, min, max);
}

/**
 * 数値データを画像に変換
 *
 * @param {Number} value 数値データ
 * @return {String} 画像データURI
 */
function val2Image(value) {
  const canvas = document.getElementById('value');
  const context = canvas.getContext('2d');
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.font = '12pt Arial';
  context.textAlign = 'right';
  context.textBaseline = 'bottom';
  if (value == 'Err') {
    context.fillStyle = '#ff0000';
  } else {
    context.fillStyle = '#000000';
    value += '℃';
  }

  context.fillText(value, canvas.width, canvas.height - 2);
  const uri = canvas.toDataURL();

  return uri;
}