forked from blueaccounting/charts
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathErieStat_Chart_LakeErieSeverityIndex.html
110 lines (101 loc) · 4.07 KB
/
ErieStat_Chart_LakeErieSeverityIndex.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lake Erie Severity Index</title>
<script src="https://code.jquery.com/jquery-3.1.1.js"></script>
<script src="//code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="js/ba_chart2.js"></script>
<script src="js/export-csv_glc.js"></script>
<link rel="stylesheet" href="css/BA_Style.css">
</head>
<body>
<div id="chart-canvas">
<div id="chart" style="margin-right: 20px">
</div>
<div id="chart2" style="margin-right: 20px">
</div>
<div id="chart3">
</div>
</div>
<script>
var x_axis = [2001, 2002, 2003, 2004, 2005, 2006, 2007, 2008, 2009, 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017];
var data = [null , 0.3, 4.1, 2.7, 0.3, 1.3, 0.9, 6.2, 5.1, 5.8, 10, 2.9, 8.5, 6.6, 10.5, 3.2, 8];
Highcharts.chart("chart2", {
chart: {
type: "column",
events: {
load: function () {
var logoX = 15;
var size = this.plotBox.y;
size -= 5;
if(this.chartWidth < 500){
logoX = 10;
// size = this.chartWidth / 10;
}
var img_width = (this.chartWidth - 350)/2 - logoX;
var img_height = size;
// var img_url = "";
if(img_width >= img_height*4){
// wide logo
this.renderer.image("https://c1.staticflickr.com/1/826/26966705327_f80fcd7af1_o.png", logoX, 0, size * 4, size ).add();
// ErieStat logo. Change factor to 3
// this.renderer.image("https://c1.staticflickr.com/1/956/27966542108_a46fd4fa96_o.png", logoX, 0, size*3 , size).add();
}else{
// cube logo
this.renderer.image("https://c1.staticflickr.com/1/868/40969378165_8bd2c065b9_o.png", logoX, 0, size, size).add();
}
// var w = this.chartWidth - this.title.alignAttr.x;
// Blue Accounting Cube logo
// this.renderer.image("https://c1.staticflickr.com/1/868/40969378165_8bd2c065b9_o.png", logoX, 0, size, size).add();
// Blue Accouting Logo
// this.renderer.image("https://c1.staticflickr.com/1/826/26966705327_f80fcd7af1_o.png", logoX, 0, size * 4, size ).add();
// Blue Accounting ErieStat Logo
// this.renderer.image("https://c1.staticflickr.com/1/956/27966542108_a46fd4fa96_o.png", logoX, 0, size*3 , size).add();
// this.renderer.image("https://c1.staticflickr.com/5/4382/36578347693_3c6032000b_o.png", 0, 0, chart_width, chart_height).add(); //red watermark
// if (isBgImg) {
// this.renderer.image("img/background_draft.png", this.plotLeft, this.plotTop, this.plotWidth, this.plotHeight).add(); //grey watermark
// }
}
}
},
title: {
text: 'Lake Erie Severity Index'
},
yAxis: {
title: {
text: 'Bloom Severity'
}
},
credits: {
enabled: true,
href: 'javascript:window.open("https://tidesandcurrents.noaa.gov/hab/lakeerie.html", "_blank")',
text: "Source: NOAA",
},
plotOptions: {
series: {
label: {
connectorAllowed: false
},
pointStart: 2001
}
},
series: [{
name: 'CI Severity',
data: data,
color: ColorPicker.blue7
},{
type: "line",
name: "Target",
data: createTargetSeries(2.9, x_axis),
color: ColorPicker.target_red,
lineWidth: 3,
marker: {
radius: 0
},
}],
});
</script>
</body>
</html>