$(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, 14, 08, 07, 38), 10], [Date.UTC(2024, 05, 14, 08, 12, 55), 76], [Date.UTC(2024, 05, 14, 08, 18, 10), 10], [Date.UTC(2024, 05, 14, 19, 25, 21), 10], [Date.UTC(2024, 05, 14, 19, 30, 35), 86], [Date.UTC(2024, 05, 14, 19, 35, 51), 10]]},
{name: "NOAA18", type: 'area', color: '#ffd321', fillOpacity: '0.3', data: [[Date.UTC(2024, 05, 14, 11, 33, 33), 10], [Date.UTC(2024, 05, 14, 11, 39, 02), 89], [Date.UTC(2024, 05, 14, 11, 44, 29), 10], [Date.UTC(2024, 05, 14, 22, 57, 33), 10], [Date.UTC(2024, 05, 14, 23, 03, 01), 62], [Date.UTC(2024, 05, 14, 23, 08, 29), 10]]},
{name: "NOAA19", type: 'area', color: '#ff9f37', fillOpacity: '0.3', data: [[Date.UTC(2024, 05, 14, 10, 16, 27), 10], [Date.UTC(2024, 05, 14, 10, 21, 58), 76], [Date.UTC(2024, 05, 14, 10, 27, 28), 10], [Date.UTC(2024, 05, 14, 21, 40, 51), 10], [Date.UTC(2024, 05, 14, 21, 46, 04), 49], [Date.UTC(2024, 05, 14, 21, 51, 22), 10]]},
{name: "METEOR M2-4", type: 'area', color: '#e100e4', fillOpacity: '0.3', data: []}] }); });