$(function () {  
        $('#alt_graph').highcharts({
    chart: {
        type: 'spline',
		backgroundColor: '#1d2132',
										marginTop: 30,
										marginBottom: 30,
										marginLeft: 50,
										marginRight: 10
    },
    title: {
			text: null
			},
    subtitle: {
			text: null
			},
    xAxis: {
		lineColor: '#535353',
        type: 'datetime',
        dateTimeLabelFormats: { // don't display the dummy year
           second: '%H,%M,%S'
        },
        title: {
            text: null
        },
		labels: {
            style: {
                color: '#6e8e99' // 원하는 색상으로 설정
            }
        },
    },
    yAxis: {
        title: {
            text: 'Alt. ( °)',
			style: {
                fontSize: '12px', // 크기 설정
                color: '#6e8e99'    // 색상 설정
            },
			x: 9
        },
		labels: {
            style: {
                color: '#6e8e99' // 원하는 색상으로 설정
            }
        },
		gridLineColor: '#535353',
		tickPositions: [10, 40, 70, 90]
    },
	legend: {
										itemStyle: {
														fontSize: '9pt',
														fontWeight: 'normal',
														color: '#6e8e99'
													},
										itemHoverStyle: {
															color: '#6e8e99' // 마우스 오버 시 글자 색상
														},
										floating: true,
										align: 'right',											
											x: 15,
											y: -5,
										verticalAlign: 'top',
										borderWidth: 0
									},
	tooltip: {
									shared: true,
									crosshairs: true,
									headerFormat: '<b>{series.name}</b><br>',
									pointFormat: '{point.x:%H:%M:%S}: Alt.{point.y:,.0f}°',
									backgroundColor: {
										linearGradient: { x1: 0, y1: 0, x2: 0, y2: 1 },
										stops: [
											[0, 'rgba(96, 96, 96, .8)'],
											[1, 'rgba(16, 16, 16, .8)']
										]
									},
									borderWidth: 0,
									style: {
										color: '#FFF'
									}
								},





plotOptions: {
        series: {
            marker: {
                enabled: false // 선에 마커를 표시하지 않음
            },
            lineWidth: 0, // 선 굵기
			dataLabels: {
						enabled: true,
						format: '<div style="text-align:center;line-height:100%"><span style="font-size:12px;color:#88b8c8">{y}</span></div>'
			},
            states: {
                hover: {
                    enabled: true,
                    lineWidthPlus: 1 // 호버 상태에서 선 굵기 추가
                }
            }
        },

    },
	credits: {
				enabled: false
				},
	navigation: {
				buttonOptions: {
				enabled: false
				}
				},




series: [{name: "NOAA15",type: 'area',color: '#83e41c',fillOpacity: '0.3',data: [[Date.UTC(2025, 07, 01, 07, 35, 22), 10], [Date.UTC(2025, 07, 01, 07, 40, 30), 49], [Date.UTC(2025, 07, 01, 07, 45, 36), 10], [Date.UTC(2025, 07, 01, 18, 52, 48), 10], [Date.UTC(2025, 07, 01, 18, 57, 58), 62], [Date.UTC(2025, 07, 01, 19, 03, 11), 10]]},
{name: "NOAA18", type: 'area', color: '#ffd321', fillOpacity: '0.3', data: [[Date.UTC(2025, 07, 01, 11, 13, 46), 10], [Date.UTC(2025, 07, 01, 11, 19, 03), 49], [Date.UTC(2025, 07, 01, 11, 24, 21), 10], [Date.UTC(2025, 07, 01, 22, 37, 31), 10], [Date.UTC(2025, 07, 01, 22, 42, 55), 74], [Date.UTC(2025, 07, 01, 22, 48, 21), 10]]},
{name: "NOAA19", type: 'area', color: '#ff9f37', fillOpacity: '0.3', data: [[Date.UTC(2025, 07, 01, 11, 27, 22), 10], [Date.UTC(2025, 07, 01, 11, 32, 26), 38], [Date.UTC(2025, 07, 01, 11, 37, 29), 10], [Date.UTC(2025, 07, 01, 21, 10, 52), 10], [Date.UTC(2025, 07, 01, 21, 15, 56), 40], [Date.UTC(2025, 07, 01, 21, 21, 02), 10]]},
{name: "METEOR M2-4", type: 'area', color: '#e100e4', fillOpacity: '0.3', data: [[Date.UTC(2025, 07, 01, 03, 31, 29), 10], [Date.UTC(2025, 07, 01, 03, 36, 48), 70], [Date.UTC(2025, 07, 01, 03, 42, 05), 10], [Date.UTC(2025, 07, 01, 14, 51, 06), 10], [Date.UTC(2025, 07, 01, 14, 56, 26), 88], [Date.UTC(2025, 07, 01, 15, 01, 48), 10]]}] }); });