https://gma2.org/js/allWaterLevelChart.js

1function callChartAllWaterLevel(disNum) {
2    // console.log(disNum)
3    let url = `https://map1.hpwd.org/php/dockumstudy.php?query=waterlevels&districtnumber=${disNum}`;
4    console.log("Call 1");
5     function getData() {
6         waterlevelData = [];
7         return $.ajax({   
8                 url: url,   
9                 dataType: 'json',   
10                 //async: false,   
11                 data: waterlevelData,
12         })
13     }
14     $.when(getData()).done(function parseData(waterlevelData){
15        // console.log("call 2");
16        console.log(waterlevelData);
17        let firstYear = waterlevelData[0][2];
18        let lastYear;
19        let totalDepth = waterlevelData[0][5];
20        let chartWaterLevels = [];
21        let xAxis = [];
22        for(let i=0; i<waterlevelData.length; i++){
23            lastYear = waterlevelData[i][2];
24            let getEpochTime = new Date(waterlevelData[i][3]).getTime(); //Convert Year to Epoch Time
25            xAxis.push(getEpochTime);
26            chartWaterLevels.push([getEpochTime,waterlevelData[i][4]]);
27            
28        };
29        console.log(chartWaterLevels);
30        console.log(xAxis);
31        createChart(chartWaterLevels, firstYear, lastYear, totalDepth, xAxis);
32     })
33     function createChart(chartWaterLevels, firstYear, lastYear, base, xAxis){
34        // console.log("Call 3");
35        // console.log(chartWaterLevels);
36        $('#modalChartBody').highcharts('chart', {
37            // navigator: {
38            //     enabled: false,
39			// 	maskInside: false
40            // },
41            // rangeSelector: {
42            //     enabled: false
43            // },
44            scrollbar: {
45               enabled: false
46            },
47            title : {
48                 text: firstYear+'-'+lastYear+' Water Levels'
49            },
50			tooltip: {
51				formatter: function () {
52                    if(base > 0 ){
53                        return Highcharts.dateFormat("%e-%b-%Y", this.x)+'<br/>'+'Depth to Water: <b>'+(this.y).toFixed(2)+' ft.</b><br/> Saturated Thickness: <b>'+(base- this.y).toFixed(2)+' ft.</b>';
54                    }else{
55                        return Highcharts.dateFormat("%e-%b-%Y", this.x)+'<br/>'+'Depth to Water <b>'+(this.y).toFixed(2)+' ft.</b><br/> Saturated Thickness: <b>Unknown Base</b>';
56                    }
57				},
58			},
59            xAxis: {
60                type: 'datetime',
61                tickInterval: 24 * 3600 * 1000 * 365, // mills in a year. 
62                labels: {
63                    formatter: function () {
64                        return Highcharts.dateFormat("%b-%Y", this.value);
65                    }
66                },
67            },
68            // xAxis: {
69            //     // type: 'datetime',
70            //     categories: xAxis,
71            //     // alignTicks: true,
72            //     // minPadding: 0,
73            //     // maxPadding: 0,
74            //     // pointPlacement: 0,
75            //     labels: {
76            //         formatter: function () {
77            //             return Highcharts.dateFormat("%e-%b-%Y", this.value);
78            //         }
79            //     },
80            // },
81			yAxis:{
82				title: {
83					text: 'Depth to Water (ft)',
84					style: {
85						color: '#2f7ed8',
86					}
87				},
88				labels: {
89					style: {
90						color: '#2f7ed8',
91					}
92				},
93				reversed: true,
94				opposite: false
95			},
96			exporting: {
97				filename: disNum,
98				width: 800
99			},
100			credits: {
101				enabled: false
102			},
103            series : [{
104                
105				type: 'areaspline',
106				connectNulls: false,
107                name : 'Depth to Water',
108				threshold: base,
109                data : chartWaterLevels,
110				dataGrouping: {
111                    enabled: false
112				},
113				fillColor: {
114                    linearGradient: {
115                        x1: 0,
116                        y1: 1,
117                        x2: 0,
118                        y2: 0
119                    },
120                    stops: [
121                        [0, Highcharts.getOptions().colors[0]],
122                        [1, Highcharts.Color(Highcharts.getOptions().colors[0]).setOpacity(0).get('rgba')]
123                    ]
124                }
125			}] 
126        });
127        openModal();
128     }
129     function openModal(){
130        let title = document.getElementById("modalChartTitle");
131        title.innerHTML = `District Number: ${disNum}`;
132        $('#modalChart').appendTo("body").modal('show');
133     }
134}