$(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(2024, 05, 09, 08, 36, 25), 10], [Date.UTC(2024, 05, 09, 08, 41, 33), 58], [Date.UTC(2024, 05, 09, 08, 46, 41), 10], [Date.UTC(2024, 05, 09, 18, 16, 08), 10], [Date.UTC(2024, 05, 09, 18, 19, 56), 21], [Date.UTC(2024, 05, 09, 18, 23, 45), 10], [Date.UTC(2024, 05, 09, 19, 54, 20), 10], [Date.UTC(2024, 05, 09, 19, 59, 19), 45], [Date.UTC(2024, 05, 09, 20, 04, 21), 10]]},
{name: "NOAA18", type: 'area', color: '#ffd321', fillOpacity: '0.3', data: [[Date.UTC(2024, 05, 09, 10, 55, 41), 10], [Date.UTC(2024, 05, 09, 11, 00, 46), 39], [Date.UTC(2024, 05, 09, 11, 05, 49), 10], [Date.UTC(2024, 05, 09, 12, 36, 47), 10], [Date.UTC(2024, 05, 09, 12, 41, 10), 25], [Date.UTC(2024, 05, 09, 12, 45, 31), 10], [Date.UTC(2024, 05, 09, 22, 19, 26), 10], [Date.UTC(2024, 05, 09, 22, 24, 51), 60], [Date.UTC(2024, 05, 09, 22, 30, 17), 10]]},
{name: "NOAA19", type: 'area', color: '#ff9f37', fillOpacity: '0.3', data: [[Date.UTC(2024, 05, 09, 09, 37, 26), 10], [Date.UTC(2024, 05, 09, 09, 42, 44), 48], [Date.UTC(2024, 05, 09, 09, 48, 03), 10], [Date.UTC(2024, 05, 09, 11, 18, 57), 10], [Date.UTC(2024, 05, 09, 11, 23, 00), 22], [Date.UTC(2024, 05, 09, 11, 27, 04), 10], [Date.UTC(2024, 05, 09, 21, 01, 28), 10], [Date.UTC(2024, 05, 09, 21, 06, 53), 74], [Date.UTC(2024, 05, 09, 21, 12, 19), 10]]},
{name: "METEOR-M2 3", type: 'area', color: '#e100e4', fillOpacity: '0.3', data: [[Date.UTC(2024, 05, 09, 09, 00, 48), 10], [Date.UTC(2024, 05, 09, 09, 04, 50), 22], [Date.UTC(2024, 05, 09, 09, 08, 49), 10], [Date.UTC(2024, 05, 09, 10, 39, 52), 10], [Date.UTC(2024, 05, 09, 10, 44, 53), 42], [Date.UTC(2024, 05, 09, 10, 49, 51), 10], [Date.UTC(2024, 05, 09, 20, 19, 39), 10], [Date.UTC(2024, 05, 09, 20, 24, 11), 30], [Date.UTC(2024, 05, 09, 20, 28, 45), 10], [Date.UTC(2024, 05, 09, 21, 59, 17), 10], [Date.UTC(2024, 05, 09, 22, 03, 59), 32], [Date.UTC(2024, 05, 09, 22, 08, 43), 10]]}] }); });