Merge branch 'developing' into 'algorithm'
# Conflicts: # package-lock.json
Showing
11 changed files
with
2241 additions
and
161 deletions
This diff could not be displayed because it is too large.
... | @@ -6,24 +6,588 @@ | ... | @@ -6,24 +6,588 @@ |
6 | 6 | ||
7 | License: www.highcharts.com/license | 7 | License: www.highcharts.com/license |
8 | */ | 8 | */ |
9 | -(function(g){"object"===typeof module&&module.exports?module.exports=g:"function"===typeof define&&define.amd?define(function(){return g}):g(Highcharts)})(function(g){(function(f){var g=f.defaultOptions,y=f.doc,z=f.Chart,q=f.addEvent,H=f.removeEvent,B=f.fireEvent,r=f.createElement,C=f.discardElement,u=f.css,p=f.merge,A=f.pick,l=f.each,E=f.objectEach,t=f.extend,I=f.isTouchDevice,D=f.win,F=D.navigator.userAgent,J=f.Renderer.prototype.symbols;/Edge\/|Trident\/|MSIE /.test(F);/firefox/i.test(F);t(g.lang, | 9 | +(function(g) { |
10 | -{printChart:"Print chart",downloadPNG:"Download PNG image",downloadJPEG:"Download JPEG image",downloadPDF:"Download PDF document",downloadSVG:"Download SVG vector image",contextButtonTitle:"Chart context menu"});g.navigation={buttonOptions:{theme:{},symbolSize:14,symbolX:12.5,symbolY:10.5,align:"right",buttonSpacing:3,height:22,verticalAlign:"top",width:24}};p(!0,g.navigation,{menuStyle:{border:"1px solid #999999",background:"#ffffff",padding:"5px 0"},menuItemStyle:{padding:"0.5em 1em",background:"none", | 10 | + "object" === typeof module && module.exports |
11 | -color:"#333333",fontSize:I?"14px":"11px",transition:"background 250ms, color 250ms"},menuItemHoverStyle:{background:"#335cad",color:"#ffffff"},buttonOptions:{symbolFill:"#666666",symbolStroke:"#666666",symbolStrokeWidth:3,theme:{fill:"#ffffff",stroke:"none",padding:5}}});g.exporting={type:"image/png",url:"https://export.highcharts.com/",printMaxWidth:780,scale:2,buttons:{contextButton:{className:"highcharts-contextbutton",menuClassName:"highcharts-contextmenu",symbol:"menu",titleKey:"contextButtonTitle", | 11 | + ? (module.exports = g) |
12 | -menuItems:"printChart separator downloadPNG downloadJPEG downloadPDF downloadSVG".split(" ")}},menuItemDefinitions:{printChart:{textKey:"printChart",onclick:function(){this.print()}},separator:{separator:!0},downloadPNG:{textKey:"downloadPNG",onclick:function(){this.exportChart()}},downloadJPEG:{textKey:"downloadJPEG",onclick:function(){this.exportChart({type:"image/jpeg"})}},downloadPDF:{textKey:"downloadPDF",onclick:function(){this.exportChart({type:"application/pdf"})}},downloadSVG:{textKey:"downloadSVG", | 12 | + : "function" === typeof define && define.amd |
13 | -onclick:function(){this.exportChart({type:"image/svg+xml"})}}}};f.post=function(a,b,e){var c=r("form",p({method:"post",action:a,enctype:"multipart/form-data"},e),{display:"none"},y.body);E(b,function(a,b){r("input",{type:"hidden",name:b,value:a},null,c)});c.submit();C(c)};t(z.prototype,{sanitizeSVG:function(a,b){if(b&&b.exporting&&b.exporting.allowHTML){var e=a.match(/<\/svg>(.*?$)/);e&&e[1]&&(e='\x3cforeignObject x\x3d"0" y\x3d"0" width\x3d"'+b.chart.width+'" height\x3d"'+b.chart.height+'"\x3e\x3cbody xmlns\x3d"http://www.w3.org/1999/xhtml"\x3e'+ | 13 | + ? define(function() { |
14 | -e[1]+"\x3c/body\x3e\x3c/foreignObject\x3e",a=a.replace("\x3c/svg\x3e",e+"\x3c/svg\x3e"))}a=a.replace(/zIndex="[^"]+"/g,"").replace(/symbolName="[^"]+"/g,"").replace(/jQuery[0-9]+="[^"]+"/g,"").replace(/url\(("|")(\S+)("|")\)/g,"url($2)").replace(/url\([^#]+#/g,"url(#").replace(/<svg /,'\x3csvg xmlns:xlink\x3d"http://www.w3.org/1999/xlink" ').replace(/ (|NS[0-9]+\:)href=/g," xlink:href\x3d").replace(/\n/," ").replace(/<\/svg>.*?$/,"\x3c/svg\x3e").replace(/(fill|stroke)="rgba\(([ 0-9]+,[ 0-9]+,[ 0-9]+),([ 0-9\.]+)\)"/g, | 14 | + return g; |
15 | -'$1\x3d"rgb($2)" $1-opacity\x3d"$3"').replace(/ /g,"\u00a0").replace(/­/g,"\u00ad");this.ieSanitizeSVG&&(a=this.ieSanitizeSVG(a));return a},getChartHTML:function(){return this.container.innerHTML},getSVG:function(a){var b,e,c,v,m,h=p(this.options,a);e=r("div",null,{position:"absolute",top:"-9999em",width:this.chartWidth+"px",height:this.chartHeight+"px"},y.body);c=this.renderTo.style.width;m=this.renderTo.style.height;c=h.exporting.sourceWidth||h.chart.width||/px$/.test(c)&&parseInt(c,10)|| | 15 | + }) |
16 | -600;m=h.exporting.sourceHeight||h.chart.height||/px$/.test(m)&&parseInt(m,10)||400;t(h.chart,{animation:!1,renderTo:e,forExport:!0,renderer:"SVGRenderer",width:c,height:m});h.exporting.enabled=!1;delete h.data;h.series=[];l(this.series,function(a){v=p(a.userOptions,{animation:!1,enableMouseTracking:!1,showCheckbox:!1,visible:a.visible});v.isInternal||h.series.push(v)});l(this.axes,function(a){a.userOptions.internalKey||(a.userOptions.internalKey=f.uniqueKey())});b=new f.Chart(h,this.callback);a&& | 16 | + : g(Highcharts); |
17 | -l(["xAxis","yAxis","series"],function(c){var d={};a[c]&&(d[c]=a[c],b.update(d))});l(this.axes,function(a){var c=f.find(b.axes,function(b){return b.options.internalKey===a.userOptions.internalKey}),d=a.getExtremes(),e=d.userMin,d=d.userMax;c&&(void 0!==e&&e!==c.min||void 0!==d&&d!==c.max)&&c.setExtremes(e,d,!0,!1)});c=b.getChartHTML();B(this,"getSVG",{chartCopy:b});c=this.sanitizeSVG(c,h);h=null;b.destroy();C(e);return c},getSVGForExport:function(a,b){var e=this.options.exporting;return this.getSVG(p({chart:{borderRadius:0}}, | 17 | +})(function(g) { |
18 | -e.chartOptions,b,{exporting:{sourceWidth:a&&a.sourceWidth||e.sourceWidth,sourceHeight:a&&a.sourceHeight||e.sourceHeight}}))},exportChart:function(a,b){b=this.getSVGForExport(a,b);a=p(this.options.exporting,a);f.post(a.url,{filename:a.filename||"chart",type:a.type,width:a.width||0,scale:a.scale,svg:b},a.formAttributes)},print:function(){var a=this,b=a.container,e=[],c=b.parentNode,f=y.body,m=f.childNodes,h=a.options.exporting.printMaxWidth,d,n;if(!a.isPrinting){a.isPrinting=!0;a.pointer.reset(null, | 18 | + (function(f) { |
19 | -0);B(a,"beforePrint");if(n=h&&a.chartWidth>h)d=[a.options.chart.width,void 0,!1],a.setSize(h,void 0,!1);l(m,function(a,b){1===a.nodeType&&(e[b]=a.style.display,a.style.display="none")});f.appendChild(b);setTimeout(function(){D.focus();D.print();setTimeout(function(){c.appendChild(b);l(m,function(a,b){1===a.nodeType&&(a.style.display=e[b])});a.isPrinting=!1;n&&a.setSize.apply(a,d);B(a,"afterPrint")},1E3)},1)}},contextMenu:function(a,b,e,c,v,m,h){var d=this,n=d.options.navigation,g=d.chartWidth,G=d.chartHeight, | 19 | + var g = f.defaultOptions, |
20 | -p="cache-"+a,k=d[p],w=Math.max(v,m),x;k||(d.exportContextMenu=d[p]=k=r("div",{className:a},{position:"absolute",zIndex:1E3,padding:w+"px",pointerEvents:"auto"},d.fixedDiv||d.container),x=r("div",{className:"highcharts-menu"},null,k),u(x,t({MozBoxShadow:"3px 3px 10px #888",WebkitBoxShadow:"3px 3px 10px #888",boxShadow:"3px 3px 10px #888"},n.menuStyle)),k.hideMenu=function(){u(k,{display:"none"});h&&h.setState(0);d.openMenu=!1;f.clearTimeout(k.hideTimer)},d.exportEvents.push(q(k,"mouseleave",function(){k.hideTimer= | 20 | + y = f.doc, |
21 | -setTimeout(k.hideMenu,500)}),q(k,"mouseenter",function(){f.clearTimeout(k.hideTimer)}),q(y,"mouseup",function(b){d.pointer.inClass(b.target,a)||k.hideMenu()}),q(k,"click",function(){d.openMenu&&k.hideMenu()})),l(b,function(a){"string"===typeof a&&(a=d.options.exporting.menuItemDefinitions[a]);if(f.isObject(a,!0)){var b;a.separator?b=r("hr",null,null,x):(b=r("div",{className:"highcharts-menu-item",onclick:function(b){b&&b.stopPropagation();k.hideMenu();a.onclick&&a.onclick.apply(d,arguments)},innerHTML:a.text|| | 21 | + z = f.Chart, |
22 | -d.options.lang[a.textKey]},null,x),b.onmouseover=function(){u(this,n.menuItemHoverStyle)},b.onmouseout=function(){u(this,n.menuItemStyle)},u(b,t({cursor:"pointer"},n.menuItemStyle)));d.exportDivElements.push(b)}}),d.exportDivElements.push(x,k),d.exportMenuWidth=k.offsetWidth,d.exportMenuHeight=k.offsetHeight);b={display:"block"};e+d.exportMenuWidth>g?b.right=g-e-v-w+"px":b.left=e-w+"px";c+m+d.exportMenuHeight>G&&"top"!==h.alignOptions.verticalAlign?b.bottom=G-c-w+"px":b.top=c+m-w+"px";u(k,b);d.openMenu= | 22 | + q = f.addEvent, |
23 | -!0},addButton:function(a){var b=this,e=b.renderer,c=p(b.options.navigation.buttonOptions,a),f=c.onclick,m=c.menuItems,h,d,n=c.symbolSize||12;b.btnCount||(b.btnCount=0);b.exportDivElements||(b.exportDivElements=[],b.exportSVGElements=[]);if(!1!==c.enabled){var g=c.theme,l=g.states,q=l&&l.hover,l=l&&l.select,k;delete g.states;f?k=function(a){a&&a.stopPropagation();f.call(b,a)}:m&&(k=function(a){a&&a.stopPropagation();b.contextMenu(d.menuClassName,m,d.translateX,d.translateY,d.width,d.height,d);d.setState(2)}); | 23 | + H = f.removeEvent, |
24 | -c.text&&c.symbol?g.paddingLeft=A(g.paddingLeft,25):c.text||t(g,{width:c.width,height:c.height,padding:0});d=e.button(c.text,0,0,k,g,q,l).addClass(a.className).attr({"stroke-linecap":"round",title:A(b.options.lang[c._titleKey||c.titleKey],"")});d.menuClassName=a.menuClassName||"highcharts-menu-"+b.btnCount++;c.symbol&&(h=e.symbol(c.symbol,c.symbolX-n/2,c.symbolY-n/2,n,n,{width:n,height:n}).addClass("highcharts-button-symbol").attr({zIndex:1}).add(d),h.attr({stroke:c.symbolStroke,fill:c.symbolFill, | 24 | + B = f.fireEvent, |
25 | -"stroke-width":c.symbolStrokeWidth||1}));d.add(b.exportingGroup).align(t(c,{width:d.width,x:A(c.x,b.buttonOffset)}),!0,"spacingBox");b.buttonOffset+=(d.width+c.buttonSpacing)*("right"===c.align?-1:1);b.exportSVGElements.push(d,h)}},destroyExport:function(a){var b=a?a.target:this;a=b.exportSVGElements;var e=b.exportDivElements,c=b.exportEvents,g;a&&(l(a,function(a,c){a&&(a.onclick=a.ontouchstart=null,g="cache-"+a.menuClassName,b[g]&&delete b[g],b.exportSVGElements[c]=a.destroy())}),a.length=0);b.exportingGroup&& | 25 | + r = f.createElement, |
26 | -(b.exportingGroup.destroy(),delete b.exportingGroup);e&&(l(e,function(a,c){f.clearTimeout(a.hideTimer);H(a,"mouseleave");b.exportDivElements[c]=a.onmouseout=a.onmouseover=a.ontouchstart=a.onclick=null;C(a)}),e.length=0);c&&(l(c,function(a){a()}),c.length=0)}});J.menu=function(a,b,e,c){return["M",a,b+2.5,"L",a+e,b+2.5,"M",a,b+c/2+.5,"L",a+e,b+c/2+.5,"M",a,b+c-1.5,"L",a+e,b+c-1.5]};z.prototype.renderExporting=function(){var a=this,b=a.options.exporting,e=b.buttons,c=a.isDirtyExporting||!a.exportSVGElements; | 26 | + C = f.discardElement, |
27 | -a.buttonOffset=0;a.isDirtyExporting&&a.destroyExport();c&&!1!==b.enabled&&(a.exportEvents=[],a.exportingGroup=a.exportingGroup||a.renderer.g("exporting-group").attr({zIndex:3}).add(),E(e,function(b){a.addButton(b)}),a.isDirtyExporting=!1);q(a,"destroy",a.destroyExport)};q(z,"init",function(){var a=this;l(["exporting","navigation"],function(b){a[b]={update:function(e,c){a.isDirtyExporting=!0;p(!0,a.options[b],e);A(c,!0)&&a.redraw()}}})});z.prototype.callbacks.push(function(a){a.renderExporting();q(a, | 27 | + u = f.css, |
28 | -"redraw",a.renderExporting)})})(g)}); | 28 | + p = f.merge, |
29 | + A = f.pick, | ||
30 | + l = f.each, | ||
31 | + E = f.objectEach, | ||
32 | + t = f.extend, | ||
33 | + I = f.isTouchDevice, | ||
34 | + D = f.win, | ||
35 | + F = D.navigator.userAgent, | ||
36 | + J = f.Renderer.prototype.symbols; | ||
37 | + /Edge\/|Trident\/|MSIE /.test(F); | ||
38 | + /firefox/i.test(F); | ||
39 | + t(g.lang, { | ||
40 | + printChart: "Print chart", | ||
41 | + downloadPNG: "Download PNG image", | ||
42 | + downloadJPEG: "Download JPEG image", | ||
43 | + downloadPDF: "Download PDF document", | ||
44 | + downloadSVG: "Download SVG vector image", | ||
45 | + contextButtonTitle: "Chart context menu" | ||
46 | + }); | ||
47 | + g.navigation = { | ||
48 | + buttonOptions: { | ||
49 | + theme: {}, | ||
50 | + symbolSize: 14, | ||
51 | + symbolX: 12.5, | ||
52 | + symbolY: 10.5, | ||
53 | + align: "right", | ||
54 | + buttonSpacing: 3, | ||
55 | + height: 22, | ||
56 | + verticalAlign: "top", | ||
57 | + width: 24 | ||
58 | + } | ||
59 | + }; | ||
60 | + p(!0, g.navigation, { | ||
61 | + menuStyle: { | ||
62 | + border: "1px solid #999999", | ||
63 | + background: "#ffffff", | ||
64 | + padding: "5px 0" | ||
65 | + }, | ||
66 | + menuItemStyle: { | ||
67 | + padding: "0.5em 1em", | ||
68 | + background: "none", | ||
69 | + color: "#333333", | ||
70 | + fontSize: I ? "14px" : "11px", | ||
71 | + transition: "background 250ms, color 250ms" | ||
72 | + }, | ||
73 | + menuItemHoverStyle: { background: "#335cad", color: "#ffffff" }, | ||
74 | + buttonOptions: { | ||
75 | + symbolFill: "#666666", | ||
76 | + symbolStroke: "#666666", | ||
77 | + symbolStrokeWidth: 3, | ||
78 | + theme: { fill: "#ffffff", stroke: "none", padding: 5 } | ||
79 | + } | ||
80 | + }); | ||
81 | + g.exporting = { | ||
82 | + type: "image/png", | ||
83 | + url: "https://export.highcharts.com/", | ||
84 | + printMaxWidth: 780, | ||
85 | + scale: 2, | ||
86 | + buttons: { | ||
87 | + contextButton: { | ||
88 | + className: "highcharts-contextbutton", | ||
89 | + menuClassName: "highcharts-contextmenu", | ||
90 | + symbol: "menu", | ||
91 | + titleKey: "contextButtonTitle", | ||
92 | + menuItems: "printChart separator downloadPNG downloadJPEG downloadPDF downloadSVG".split( | ||
93 | + " " | ||
94 | + ) | ||
95 | + } | ||
96 | + }, | ||
97 | + menuItemDefinitions: { | ||
98 | + printChart: { | ||
99 | + textKey: "printChart", | ||
100 | + onclick: function() { | ||
101 | + this.print(); | ||
102 | + } | ||
103 | + }, | ||
104 | + separator: { separator: !0 }, | ||
105 | + downloadPNG: { | ||
106 | + textKey: "downloadPNG", | ||
107 | + onclick: function() { | ||
108 | + this.exportChart(); | ||
109 | + } | ||
110 | + }, | ||
111 | + downloadJPEG: { | ||
112 | + textKey: "downloadJPEG", | ||
113 | + onclick: function() { | ||
114 | + this.exportChart({ type: "image/jpeg" }); | ||
115 | + } | ||
116 | + }, | ||
117 | + downloadPDF: { | ||
118 | + textKey: "downloadPDF", | ||
119 | + onclick: function() { | ||
120 | + this.exportChart({ type: "application/pdf" }); | ||
121 | + } | ||
122 | + }, | ||
123 | + downloadSVG: { | ||
124 | + textKey: "downloadSVG", | ||
125 | + onclick: function() { | ||
126 | + this.exportChart({ type: "image/svg+xml" }); | ||
127 | + } | ||
128 | + } | ||
129 | + } | ||
130 | + }; | ||
131 | + f.post = function(a, b, e) { | ||
132 | + var c = r( | ||
133 | + "form", | ||
134 | + p({ method: "post", action: a, enctype: "multipart/form-data" }, e), | ||
135 | + { display: "none" }, | ||
136 | + y.body | ||
137 | + ); | ||
138 | + E(b, function(a, b) { | ||
139 | + r("input", { type: "hidden", name: b, value: a }, null, c); | ||
140 | + }); | ||
141 | + c.submit(); | ||
142 | + C(c); | ||
143 | + }; | ||
144 | + t(z.prototype, { | ||
145 | + sanitizeSVG: function(a, b) { | ||
146 | + if (b && b.exporting && b.exporting.allowHTML) { | ||
147 | + var e = a.match(/<\/svg>(.*?$)/); | ||
148 | + e && | ||
149 | + e[1] && | ||
150 | + ((e = | ||
151 | + '\x3cforeignObject x\x3d"0" y\x3d"0" width\x3d"' + | ||
152 | + b.chart.width + | ||
153 | + '" height\x3d"' + | ||
154 | + b.chart.height + | ||
155 | + '"\x3e\x3cbody xmlns\x3d"http://www.w3.org/1999/xhtml"\x3e' + | ||
156 | + e[1] + | ||
157 | + "\x3c/body\x3e\x3c/foreignObject\x3e"), | ||
158 | + (a = a.replace("\x3c/svg\x3e", e + "\x3c/svg\x3e"))); | ||
159 | + } | ||
160 | + a = a | ||
161 | + .replace(/zIndex="[^"]+"/g, "") | ||
162 | + .replace(/symbolName="[^"]+"/g, "") | ||
163 | + .replace(/jQuery[0-9]+="[^"]+"/g, "") | ||
164 | + .replace(/url\(("|")(\S+)("|")\)/g, "url($2)") | ||
165 | + .replace(/url\([^#]+#/g, "url(#") | ||
166 | + .replace( | ||
167 | + /<svg /, | ||
168 | + '\x3csvg xmlns:xlink\x3d"http://www.w3.org/1999/xlink" ' | ||
169 | + ) | ||
170 | + .replace(/ (|NS[0-9]+\:)href=/g, " xlink:href\x3d") | ||
171 | + .replace(/\n/, " ") | ||
172 | + .replace(/<\/svg>.*?$/, "\x3c/svg\x3e") | ||
173 | + .replace( | ||
174 | + /(fill|stroke)="rgba\(([ 0-9]+,[ 0-9]+,[ 0-9]+),([ 0-9\.]+)\)"/g, | ||
175 | + '$1\x3d"rgb($2)" $1-opacity\x3d"$3"' | ||
176 | + ) | ||
177 | + .replace(/ /g, "\u00a0") | ||
178 | + .replace(/­/g, "\u00ad"); | ||
179 | + this.ieSanitizeSVG && (a = this.ieSanitizeSVG(a)); | ||
180 | + return a; | ||
181 | + }, | ||
182 | + getChartHTML: function() { | ||
183 | + return this.container.innerHTML; | ||
184 | + }, | ||
185 | + getSVG: function(a) { | ||
186 | + var b, | ||
187 | + e, | ||
188 | + c, | ||
189 | + v, | ||
190 | + m, | ||
191 | + h = p(this.options, a); | ||
192 | + e = r( | ||
193 | + "div", | ||
194 | + null, | ||
195 | + { | ||
196 | + position: "absolute", | ||
197 | + top: "-9999em", | ||
198 | + width: this.chartWidth + "px", | ||
199 | + height: this.chartHeight + "px" | ||
200 | + }, | ||
201 | + y.body | ||
202 | + ); | ||
203 | + c = this.renderTo.style.width; | ||
204 | + m = this.renderTo.style.height; | ||
205 | + c = | ||
206 | + h.exporting.sourceWidth || | ||
207 | + h.chart.width || | ||
208 | + (/px$/.test(c) && parseInt(c, 10)) || | ||
209 | + 600; | ||
210 | + m = | ||
211 | + h.exporting.sourceHeight || | ||
212 | + h.chart.height || | ||
213 | + (/px$/.test(m) && parseInt(m, 10)) || | ||
214 | + 400; | ||
215 | + t(h.chart, { | ||
216 | + animation: !1, | ||
217 | + renderTo: e, | ||
218 | + forExport: !0, | ||
219 | + renderer: "SVGRenderer", | ||
220 | + width: c, | ||
221 | + height: m | ||
222 | + }); | ||
223 | + h.exporting.enabled = !1; | ||
224 | + delete h.data; | ||
225 | + h.series = []; | ||
226 | + l(this.series, function(a) { | ||
227 | + v = p(a.userOptions, { | ||
228 | + animation: !1, | ||
229 | + enableMouseTracking: !1, | ||
230 | + showCheckbox: !1, | ||
231 | + visible: a.visible | ||
232 | + }); | ||
233 | + v.isInternal || h.series.push(v); | ||
234 | + }); | ||
235 | + l(this.axes, function(a) { | ||
236 | + a.userOptions.internalKey || | ||
237 | + (a.userOptions.internalKey = f.uniqueKey()); | ||
238 | + }); | ||
239 | + b = new f.Chart(h, this.callback); | ||
240 | + a && | ||
241 | + l(["xAxis", "yAxis", "series"], function(c) { | ||
242 | + var d = {}; | ||
243 | + a[c] && ((d[c] = a[c]), b.update(d)); | ||
244 | + }); | ||
245 | + l(this.axes, function(a) { | ||
246 | + var c = f.find(b.axes, function(b) { | ||
247 | + return b.options.internalKey === a.userOptions.internalKey; | ||
248 | + }), | ||
249 | + d = a.getExtremes(), | ||
250 | + e = d.userMin, | ||
251 | + d = d.userMax; | ||
252 | + c && | ||
253 | + ((void 0 !== e && e !== c.min) || (void 0 !== d && d !== c.max)) && | ||
254 | + c.setExtremes(e, d, !0, !1); | ||
255 | + }); | ||
256 | + c = b.getChartHTML(); | ||
257 | + B(this, "getSVG", { chartCopy: b }); | ||
258 | + c = this.sanitizeSVG(c, h); | ||
259 | + h = null; | ||
260 | + b.destroy(); | ||
261 | + C(e); | ||
262 | + return c; | ||
263 | + }, | ||
264 | + getSVGForExport: function(a, b) { | ||
265 | + var e = this.options.exporting; | ||
266 | + return this.getSVG( | ||
267 | + p({ chart: { borderRadius: 0 } }, e.chartOptions, b, { | ||
268 | + exporting: { | ||
269 | + sourceWidth: (a && a.sourceWidth) || e.sourceWidth, | ||
270 | + sourceHeight: (a && a.sourceHeight) || e.sourceHeight | ||
271 | + } | ||
272 | + }) | ||
273 | + ); | ||
274 | + }, | ||
275 | + exportChart: function(a, b) { | ||
276 | + b = this.getSVGForExport(a, b); | ||
277 | + a = p(this.options.exporting, a); | ||
278 | + f.post( | ||
279 | + a.url, | ||
280 | + { | ||
281 | + filename: a.filename || "chart", | ||
282 | + type: a.type, | ||
283 | + width: a.width || 0, | ||
284 | + scale: a.scale, | ||
285 | + svg: b | ||
286 | + }, | ||
287 | + a.formAttributes | ||
288 | + ); | ||
289 | + }, | ||
290 | + print: function() { | ||
291 | + var a = this, | ||
292 | + b = a.container, | ||
293 | + e = [], | ||
294 | + c = b.parentNode, | ||
295 | + f = y.body, | ||
296 | + m = f.childNodes, | ||
297 | + h = a.options.exporting.printMaxWidth, | ||
298 | + d, | ||
299 | + n; | ||
300 | + if (!a.isPrinting) { | ||
301 | + a.isPrinting = !0; | ||
302 | + a.pointer.reset(null, 0); | ||
303 | + B(a, "beforePrint"); | ||
304 | + if ((n = h && a.chartWidth > h)) | ||
305 | + (d = [a.options.chart.width, void 0, !1]), a.setSize(h, void 0, !1); | ||
306 | + l(m, function(a, b) { | ||
307 | + 1 === a.nodeType && | ||
308 | + ((e[b] = a.style.display), (a.style.display = "none")); | ||
309 | + }); | ||
310 | + f.appendChild(b); | ||
311 | + setTimeout(function() { | ||
312 | + D.focus(); | ||
313 | + D.print(); | ||
314 | + setTimeout(function() { | ||
315 | + c.appendChild(b); | ||
316 | + l(m, function(a, b) { | ||
317 | + 1 === a.nodeType && (a.style.display = e[b]); | ||
318 | + }); | ||
319 | + a.isPrinting = !1; | ||
320 | + n && a.setSize.apply(a, d); | ||
321 | + B(a, "afterPrint"); | ||
322 | + }, 1e3); | ||
323 | + }, 1); | ||
324 | + } | ||
325 | + }, | ||
326 | + contextMenu: function(a, b, e, c, v, m, h) { | ||
327 | + var d = this, | ||
328 | + n = d.options.navigation, | ||
329 | + g = d.chartWidth, | ||
330 | + G = d.chartHeight, | ||
331 | + p = "cache-" + a, | ||
332 | + k = d[p], | ||
333 | + w = Math.max(v, m), | ||
334 | + x; | ||
335 | + k || | ||
336 | + ((d.exportContextMenu = d[p] = k = r( | ||
337 | + "div", | ||
338 | + { className: a }, | ||
339 | + { | ||
340 | + position: "absolute", | ||
341 | + zIndex: 1e3, | ||
342 | + padding: w + "px", | ||
343 | + pointerEvents: "auto" | ||
344 | + }, | ||
345 | + d.fixedDiv || d.container | ||
346 | + )), | ||
347 | + (x = r("div", { className: "highcharts-menu" }, null, k)), | ||
348 | + u( | ||
349 | + x, | ||
350 | + t( | ||
351 | + { | ||
352 | + MozBoxShadow: "3px 3px 10px #888", | ||
353 | + WebkitBoxShadow: "3px 3px 10px #888", | ||
354 | + boxShadow: "3px 3px 10px #888" | ||
355 | + }, | ||
356 | + n.menuStyle | ||
357 | + ) | ||
358 | + ), | ||
359 | + (k.hideMenu = function() { | ||
360 | + u(k, { display: "none" }); | ||
361 | + h && h.setState(0); | ||
362 | + d.openMenu = !1; | ||
363 | + f.clearTimeout(k.hideTimer); | ||
364 | + }), | ||
365 | + d.exportEvents.push( | ||
366 | + q(k, "mouseleave", function() { | ||
367 | + k.hideTimer = setTimeout(k.hideMenu, 500); | ||
368 | + }), | ||
369 | + q(k, "mouseenter", function() { | ||
370 | + f.clearTimeout(k.hideTimer); | ||
371 | + }), | ||
372 | + q(y, "mouseup", function(b) { | ||
373 | + d.pointer.inClass(b.target, a) || k.hideMenu(); | ||
374 | + }), | ||
375 | + q(k, "click", function() { | ||
376 | + d.openMenu && k.hideMenu(); | ||
377 | + }) | ||
378 | + ), | ||
379 | + l(b, function(a) { | ||
380 | + "string" === typeof a && | ||
381 | + (a = d.options.exporting.menuItemDefinitions[a]); | ||
382 | + if (f.isObject(a, !0)) { | ||
383 | + var b; | ||
384 | + a.separator | ||
385 | + ? (b = r("hr", null, null, x)) | ||
386 | + : ((b = r( | ||
387 | + "div", | ||
388 | + { | ||
389 | + className: "highcharts-menu-item", | ||
390 | + onclick: function(b) { | ||
391 | + b && b.stopPropagation(); | ||
392 | + k.hideMenu(); | ||
393 | + a.onclick && a.onclick.apply(d, arguments); | ||
394 | + }, | ||
395 | + innerHTML: a.text || d.options.lang[a.textKey] | ||
396 | + }, | ||
397 | + null, | ||
398 | + x | ||
399 | + )), | ||
400 | + (b.onmouseover = function() { | ||
401 | + u(this, n.menuItemHoverStyle); | ||
402 | + }), | ||
403 | + (b.onmouseout = function() { | ||
404 | + u(this, n.menuItemStyle); | ||
405 | + }), | ||
406 | + u(b, t({ cursor: "pointer" }, n.menuItemStyle))); | ||
407 | + d.exportDivElements.push(b); | ||
408 | + } | ||
409 | + }), | ||
410 | + d.exportDivElements.push(x, k), | ||
411 | + (d.exportMenuWidth = k.offsetWidth), | ||
412 | + (d.exportMenuHeight = k.offsetHeight)); | ||
413 | + b = { display: "block" }; | ||
414 | + e + d.exportMenuWidth > g | ||
415 | + ? (b.right = g - e - v - w + "px") | ||
416 | + : (b.left = e - w + "px"); | ||
417 | + c + m + d.exportMenuHeight > G && "top" !== h.alignOptions.verticalAlign | ||
418 | + ? (b.bottom = G - c - w + "px") | ||
419 | + : (b.top = c + m - w + "px"); | ||
420 | + u(k, b); | ||
421 | + d.openMenu = !0; | ||
422 | + }, | ||
423 | + addButton: function(a) { | ||
424 | + var b = this, | ||
425 | + e = b.renderer, | ||
426 | + c = p(b.options.navigation.buttonOptions, a), | ||
427 | + f = c.onclick, | ||
428 | + m = c.menuItems, | ||
429 | + h, | ||
430 | + d, | ||
431 | + n = c.symbolSize || 12; | ||
432 | + b.btnCount || (b.btnCount = 0); | ||
433 | + b.exportDivElements || | ||
434 | + ((b.exportDivElements = []), (b.exportSVGElements = [])); | ||
435 | + if (!1 !== c.enabled) { | ||
436 | + var g = c.theme, | ||
437 | + l = g.states, | ||
438 | + q = l && l.hover, | ||
439 | + l = l && l.select, | ||
440 | + k; | ||
441 | + delete g.states; | ||
442 | + f | ||
443 | + ? (k = function(a) { | ||
444 | + a && a.stopPropagation(); | ||
445 | + f.call(b, a); | ||
446 | + }) | ||
447 | + : m && | ||
448 | + (k = function(a) { | ||
449 | + a && a.stopPropagation(); | ||
450 | + b.contextMenu( | ||
451 | + d.menuClassName, | ||
452 | + m, | ||
453 | + d.translateX, | ||
454 | + d.translateY, | ||
455 | + d.width, | ||
456 | + d.height, | ||
457 | + d | ||
458 | + ); | ||
459 | + d.setState(2); | ||
460 | + }); | ||
461 | + c.text && c.symbol | ||
462 | + ? (g.paddingLeft = A(g.paddingLeft, 25)) | ||
463 | + : c.text || t(g, { width: c.width, height: c.height, padding: 0 }); | ||
464 | + d = e | ||
465 | + .button(c.text, 0, 0, k, g, q, l) | ||
466 | + .addClass(a.className) | ||
467 | + .attr({ | ||
468 | + "stroke-linecap": "round", | ||
469 | + title: A(b.options.lang[c._titleKey || c.titleKey], "") | ||
470 | + }); | ||
471 | + d.menuClassName = | ||
472 | + a.menuClassName || "highcharts-menu-" + b.btnCount++; | ||
473 | + c.symbol && | ||
474 | + ((h = e | ||
475 | + .symbol(c.symbol, c.symbolX - n / 2, c.symbolY - n / 2, n, n, { | ||
476 | + width: n, | ||
477 | + height: n | ||
478 | + }) | ||
479 | + .addClass("highcharts-button-symbol") | ||
480 | + .attr({ zIndex: 1 }) | ||
481 | + .add(d)), | ||
482 | + h.attr({ | ||
483 | + stroke: c.symbolStroke, | ||
484 | + fill: c.symbolFill, | ||
485 | + "stroke-width": c.symbolStrokeWidth || 1 | ||
486 | + })); | ||
487 | + d.add(b.exportingGroup).align( | ||
488 | + t(c, { width: d.width, x: A(c.x, b.buttonOffset) }), | ||
489 | + !0, | ||
490 | + "spacingBox" | ||
491 | + ); | ||
492 | + b.buttonOffset += | ||
493 | + (d.width + c.buttonSpacing) * ("right" === c.align ? -1 : 1); | ||
494 | + b.exportSVGElements.push(d, h); | ||
495 | + } | ||
496 | + }, | ||
497 | + destroyExport: function(a) { | ||
498 | + var b = a ? a.target : this; | ||
499 | + a = b.exportSVGElements; | ||
500 | + var e = b.exportDivElements, | ||
501 | + c = b.exportEvents, | ||
502 | + g; | ||
503 | + a && | ||
504 | + (l(a, function(a, c) { | ||
505 | + a && | ||
506 | + ((a.onclick = a.ontouchstart = null), | ||
507 | + (g = "cache-" + a.menuClassName), | ||
508 | + b[g] && delete b[g], | ||
509 | + (b.exportSVGElements[c] = a.destroy())); | ||
510 | + }), | ||
511 | + (a.length = 0)); | ||
512 | + b.exportingGroup && | ||
513 | + (b.exportingGroup.destroy(), delete b.exportingGroup); | ||
514 | + e && | ||
515 | + (l(e, function(a, c) { | ||
516 | + f.clearTimeout(a.hideTimer); | ||
517 | + H(a, "mouseleave"); | ||
518 | + b.exportDivElements[ | ||
519 | + c | ||
520 | + ] = a.onmouseout = a.onmouseover = a.ontouchstart = a.onclick = null; | ||
521 | + C(a); | ||
522 | + }), | ||
523 | + (e.length = 0)); | ||
524 | + c && | ||
525 | + (l(c, function(a) { | ||
526 | + a(); | ||
527 | + }), | ||
528 | + (c.length = 0)); | ||
529 | + } | ||
530 | + }); | ||
531 | + J.menu = function(a, b, e, c) { | ||
532 | + return [ | ||
533 | + "M", | ||
534 | + a, | ||
535 | + b + 2.5, | ||
536 | + "L", | ||
537 | + a + e, | ||
538 | + b + 2.5, | ||
539 | + "M", | ||
540 | + a, | ||
541 | + b + c / 2 + 0.5, | ||
542 | + "L", | ||
543 | + a + e, | ||
544 | + b + c / 2 + 0.5, | ||
545 | + "M", | ||
546 | + a, | ||
547 | + b + c - 1.5, | ||
548 | + "L", | ||
549 | + a + e, | ||
550 | + b + c - 1.5 | ||
551 | + ]; | ||
552 | + }; | ||
553 | + z.prototype.renderExporting = function() { | ||
554 | + var a = this, | ||
555 | + b = a.options.exporting, | ||
556 | + e = b.buttons, | ||
557 | + c = a.isDirtyExporting || !a.exportSVGElements; | ||
558 | + a.buttonOffset = 0; | ||
559 | + a.isDirtyExporting && a.destroyExport(); | ||
560 | + c && | ||
561 | + !1 !== b.enabled && | ||
562 | + ((a.exportEvents = []), | ||
563 | + (a.exportingGroup = | ||
564 | + a.exportingGroup || | ||
565 | + a.renderer | ||
566 | + .g("exporting-group") | ||
567 | + .attr({ zIndex: 3 }) | ||
568 | + .add()), | ||
569 | + E(e, function(b) { | ||
570 | + a.addButton(b); | ||
571 | + }), | ||
572 | + (a.isDirtyExporting = !1)); | ||
573 | + q(a, "destroy", a.destroyExport); | ||
574 | + }; | ||
575 | + q(z, "init", function() { | ||
576 | + var a = this; | ||
577 | + l(["exporting", "navigation"], function(b) { | ||
578 | + a[b] = { | ||
579 | + update: function(e, c) { | ||
580 | + a.isDirtyExporting = !0; | ||
581 | + p(!0, a.options[b], e); | ||
582 | + A(c, !0) && a.redraw(); | ||
583 | + } | ||
584 | + }; | ||
585 | + }); | ||
586 | + }); | ||
587 | + z.prototype.callbacks.push(function(a) { | ||
588 | + a.renderExporting(); | ||
589 | + q(a, "redraw", a.renderExporting); | ||
590 | + }); | ||
591 | + })(g); | ||
592 | +}); | ||
29 | //# sourceMappingURL=exporting.js.map | 593 | //# sourceMappingURL=exporting.js.map | ... | ... |
graph/areaspline/3sec_update.htm
0 → 100644
1 | +<!DOCTYPE html> | ||
2 | +<html> | ||
3 | + <head> | ||
4 | + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | ||
5 | + <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
6 | + <title>Highcharts Example</title> | ||
7 | + | ||
8 | + <style type="text/css"></style> | ||
9 | + </head> | ||
10 | + <body> | ||
11 | + <script src="../../code/highcharts.js"></script> | ||
12 | + <script src="../../code/modules/exporting.js"></script> | ||
13 | + <script src="../../code/modules/export-data.js"></script> | ||
14 | + | ||
15 | + <div | ||
16 | + id="container1" | ||
17 | + style="width:1260px; height: 400px; margin: 0 auto" | ||
18 | + ></div> | ||
19 | + | ||
20 | +<div style="width:1275px; margin:0 auto;"> | ||
21 | + <div style="display: inline-block;"> | ||
22 | + <div | ||
23 | + id="container2" | ||
24 | + style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;" | ||
25 | + ></div> | ||
26 | + </div> | ||
27 | + <div style="display: inline-block;"> | ||
28 | + <div | ||
29 | + id="container3" | ||
30 | + style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;" | ||
31 | + ></div> | ||
32 | + </div> | ||
33 | + | ||
34 | + <div style="display: inline-block;"> | ||
35 | + <div | ||
36 | + id="container4" | ||
37 | + style="width:400px; height: 300px; padding:0; margin-left:0px;" | ||
38 | + ></div> | ||
39 | + </div> | ||
40 | + | ||
41 | +</div> | ||
42 | + | ||
43 | + <script type="text/javascript"> | ||
44 | + Highcharts.chart("container1", { | ||
45 | + chart: { | ||
46 | + type: "areaspline", | ||
47 | + animation: Highcharts.svg, // don't animate in old IE | ||
48 | + marginRight: 10, | ||
49 | + events: { | ||
50 | + load: function() { | ||
51 | + // set up the updating of the chart each second | ||
52 | + var series = this.series[0]; | ||
53 | + setInterval(function() { | ||
54 | + var x = new Date().getTime(), // 현재 시간 | ||
55 | + y = 0.7 | ||
56 | + series.addPoint([x, y], true, true); | ||
57 | + }, 3000); //1000=1초 | ||
58 | + } | ||
59 | + } | ||
60 | + }, | ||
61 | + | ||
62 | + time: { | ||
63 | + useUTC: false | ||
64 | + }, | ||
65 | + | ||
66 | + title: { | ||
67 | + text: "실시간 사망률" | ||
68 | + }, | ||
69 | + xAxis: { | ||
70 | + type: "datetime", | ||
71 | + tickPixelInterval: 150 | ||
72 | + }, | ||
73 | + yAxis: { | ||
74 | + title: { | ||
75 | + text: "Value" | ||
76 | + }, | ||
77 | + plotLines: [ | ||
78 | + { | ||
79 | + value: 0, | ||
80 | + width: 1, | ||
81 | + color: "#808080" | ||
82 | + } | ||
83 | + ] | ||
84 | + }, | ||
85 | + tooltip: { | ||
86 | + headerFormat: "<b>{series.name}</b><br/>", | ||
87 | + pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}" | ||
88 | + }, | ||
89 | + legend: { | ||
90 | + //enabled: false | ||
91 | + layout: "vertical", | ||
92 | + align: "left", | ||
93 | + verticalAlign: "top", | ||
94 | + x: 120, | ||
95 | + y: 70, | ||
96 | + floating: true, | ||
97 | + borderWidth: 1, | ||
98 | + backgroundColor: | ||
99 | + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || | ||
100 | + "#FFFFFF" | ||
101 | + }, | ||
102 | + exporting: { | ||
103 | + enabled: false | ||
104 | + }, | ||
105 | + series: [ | ||
106 | + { | ||
107 | + name: "사망률(%)", | ||
108 | + data: (function() { | ||
109 | + // generate an array of random data | ||
110 | + var data = [], | ||
111 | + time = new Date().getTime(), | ||
112 | + i; | ||
113 | + | ||
114 | + for (i = -19; i <= 0; i += 1) { | ||
115 | + data.push({ | ||
116 | + x: time + i * 3000, | ||
117 | + y: 0 | ||
118 | + }); | ||
119 | + } | ||
120 | + return data; | ||
121 | + })() | ||
122 | + } | ||
123 | + ] | ||
124 | + }); | ||
125 | + | ||
126 | + Highcharts.chart("container2", { | ||
127 | + chart: { | ||
128 | + type: "spline", | ||
129 | + animation: Highcharts.svg, // don't animate in old IE | ||
130 | + marginRight: 10, | ||
131 | + events: { | ||
132 | + load: function() { | ||
133 | + // set up the updating of the chart each second | ||
134 | + var series = this.series[0]; | ||
135 | + setInterval(function() { | ||
136 | + var x = new Date().getTime(), // 현재 시간 | ||
137 | + y = Math.random(); // | ||
138 | + series.addPoint([x, y], true, true); | ||
139 | + }, 3000); //1000=1초 | ||
140 | + } | ||
141 | + } | ||
142 | + }, | ||
143 | + | ||
144 | + time: { | ||
145 | + useUTC: false | ||
146 | + }, | ||
147 | + | ||
148 | + title: { | ||
149 | + text: "실시간 사망률" | ||
150 | + }, | ||
151 | + xAxis: { | ||
152 | + type: "datetime", | ||
153 | + tickPixelInterval: 150 | ||
154 | + }, | ||
155 | + yAxis: { | ||
156 | + title: { | ||
157 | + text: "Value" | ||
158 | + }, | ||
159 | + plotLines: [ | ||
160 | + { | ||
161 | + value: 0, | ||
162 | + width: 1, | ||
163 | + color: "#808080" | ||
164 | + } | ||
165 | + ] | ||
166 | + }, | ||
167 | + tooltip: { | ||
168 | + headerFormat: "<b>{series.name}</b><br/>", | ||
169 | + pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}" | ||
170 | + }, | ||
171 | + legend: { | ||
172 | + //enabled: false | ||
173 | + layout: "vertical", | ||
174 | + align: "left", | ||
175 | + verticalAlign: "top", | ||
176 | + x: 120, | ||
177 | + y: 70, | ||
178 | + floating: true, | ||
179 | + borderWidth: 1, | ||
180 | + backgroundColor: | ||
181 | + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || | ||
182 | + "#FFFFFF" | ||
183 | + }, | ||
184 | + exporting: { | ||
185 | + enabled: false | ||
186 | + }, | ||
187 | + series: [ | ||
188 | + { | ||
189 | + name: "사망률(%)", | ||
190 | + data: (function() { | ||
191 | + // generate an array of random data | ||
192 | + var data = [], | ||
193 | + time = new Date().getTime(), | ||
194 | + i; | ||
195 | + | ||
196 | + for (i = -19; i <= 0; i += 1) { | ||
197 | + data.push({ | ||
198 | + x: time + i * 3000, | ||
199 | + y: 0 | ||
200 | + }); | ||
201 | + } | ||
202 | + return data; | ||
203 | + })() | ||
204 | + } | ||
205 | + ] | ||
206 | + }); | ||
207 | + | ||
208 | + Highcharts.chart("container3", { | ||
209 | + chart: { | ||
210 | + type: "spline", | ||
211 | + animation: Highcharts.svg, // don't animate in old IE | ||
212 | + marginRight: 10, | ||
213 | + events: { | ||
214 | + load: function() { | ||
215 | + // set up the updating of the chart each second | ||
216 | + var series = this.series[0]; | ||
217 | + setInterval(function() { | ||
218 | + var x = new Date().getTime(), // 현재 시간 | ||
219 | + y = Math.random(); // | ||
220 | + series.addPoint([x, y], true, true); | ||
221 | + }, 3000); //1000=1초 | ||
222 | + } | ||
223 | + } | ||
224 | + }, | ||
225 | + | ||
226 | + time: { | ||
227 | + useUTC: false | ||
228 | + }, | ||
229 | + | ||
230 | + title: { | ||
231 | + text: "실시간 사망률" | ||
232 | + }, | ||
233 | + xAxis: { | ||
234 | + type: "datetime", | ||
235 | + tickPixelInterval: 150 | ||
236 | + }, | ||
237 | + yAxis: { | ||
238 | + title: { | ||
239 | + text: "Value" | ||
240 | + }, | ||
241 | + plotLines: [ | ||
242 | + { | ||
243 | + value: 0, | ||
244 | + width: 1, | ||
245 | + color: "#808080" | ||
246 | + } | ||
247 | + ] | ||
248 | + }, | ||
249 | + tooltip: { | ||
250 | + headerFormat: "<b>{series.name}</b><br/>", | ||
251 | + pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}" | ||
252 | + }, | ||
253 | + legend: { | ||
254 | + //enabled: false | ||
255 | + layout: "vertical", | ||
256 | + align: "left", | ||
257 | + verticalAlign: "top", | ||
258 | + x: 120, | ||
259 | + y: 70, | ||
260 | + floating: true, | ||
261 | + borderWidth: 1, | ||
262 | + backgroundColor: | ||
263 | + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || | ||
264 | + "#FFFFFF" | ||
265 | + }, | ||
266 | + exporting: { | ||
267 | + enabled: false | ||
268 | + }, | ||
269 | + series: [ | ||
270 | + { | ||
271 | + name: "사망률(%)", | ||
272 | + data: (function() { | ||
273 | + // generate an array of random data | ||
274 | + var data = [], | ||
275 | + time = new Date().getTime(), | ||
276 | + i; | ||
277 | + | ||
278 | + for (i = -19; i <= 0; i += 1) { | ||
279 | + data.push({ | ||
280 | + x: time + i * 3000, | ||
281 | + y: 0 | ||
282 | + }); | ||
283 | + } | ||
284 | + return data; | ||
285 | + })() | ||
286 | + } | ||
287 | + ] | ||
288 | + }); | ||
289 | + | ||
290 | + Highcharts.chart("container4", { | ||
291 | + chart: { | ||
292 | + type: "spline", | ||
293 | + animation: Highcharts.svg, // don't animate in old IE | ||
294 | + marginRight: 10, | ||
295 | + events: { | ||
296 | + load: function() { | ||
297 | + // set up the updating of the chart each second | ||
298 | + var series = this.series[0]; | ||
299 | + setInterval(function() { | ||
300 | + var x = new Date().getTime(), // 현재 시간 | ||
301 | + y = Math.random(); // | ||
302 | + series.addPoint([x, y], true, true); | ||
303 | + }, 3000); //1000=1초 | ||
304 | + } | ||
305 | + } | ||
306 | + }, | ||
307 | + | ||
308 | + time: { | ||
309 | + useUTC: false | ||
310 | + }, | ||
311 | + | ||
312 | + title: { | ||
313 | + text: "실시간 사망률" | ||
314 | + }, | ||
315 | + xAxis: { | ||
316 | + type: "datetime", | ||
317 | + tickPixelInterval: 150 | ||
318 | + }, | ||
319 | + yAxis: { | ||
320 | + title: { | ||
321 | + text: "Value" | ||
322 | + }, | ||
323 | + plotLines: [ | ||
324 | + { | ||
325 | + value: 0, | ||
326 | + width: 1, | ||
327 | + color: "#808080" | ||
328 | + } | ||
329 | + ] | ||
330 | + }, | ||
331 | + tooltip: { | ||
332 | + headerFormat: "<b>{series.name}</b><br/>", | ||
333 | + pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}" | ||
334 | + }, | ||
335 | + legend: { | ||
336 | + //enabled: false | ||
337 | + layout: "vertical", | ||
338 | + align: "left", | ||
339 | + verticalAlign: "top", | ||
340 | + x: 120, | ||
341 | + y: 70, | ||
342 | + floating: true, | ||
343 | + borderWidth: 1, | ||
344 | + backgroundColor: | ||
345 | + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || | ||
346 | + "#FFFFFF" | ||
347 | + }, | ||
348 | + exporting: { | ||
349 | + enabled: false | ||
350 | + }, | ||
351 | + series: [ | ||
352 | + { | ||
353 | + name: "사망률(%)", | ||
354 | + data: (function() { | ||
355 | + // generate an array of random data | ||
356 | + var data = [], | ||
357 | + time = new Date().getTime(), | ||
358 | + i; | ||
359 | + | ||
360 | + for (i = -19; i <= 0; i += 1) { | ||
361 | + data.push({ | ||
362 | + x: time + i * 3000, | ||
363 | + y: 0 | ||
364 | + }); | ||
365 | + } | ||
366 | + return data; | ||
367 | + })() | ||
368 | + } | ||
369 | + ] | ||
370 | + }); | ||
371 | + | ||
372 | + Highcharts.chart("container1", { | ||
373 | + chart: { | ||
374 | + type: "areaspline", | ||
375 | + animation: Highcharts.svg, // don't animate in old IE | ||
376 | + marginRight: 10, | ||
377 | + events: { | ||
378 | + load: function() { | ||
379 | + // set up the updating of the chart each second | ||
380 | + var series = this.series[0]; | ||
381 | + setInterval(function() { | ||
382 | + var x = new Date().getTime(), // 현재 시간 | ||
383 | + y = Math.random(); // | ||
384 | + series.addPoint([x, y], true, true); | ||
385 | + }, 3000); //1000=1초 | ||
386 | + } | ||
387 | + } | ||
388 | + }, | ||
389 | + | ||
390 | + time: { | ||
391 | + useUTC: false | ||
392 | + }, | ||
393 | + | ||
394 | + title: { | ||
395 | + text: "실시간 사망률" | ||
396 | + }, | ||
397 | + xAxis: { | ||
398 | + type: "datetime", | ||
399 | + tickPixelInterval: 150 | ||
400 | + }, | ||
401 | + yAxis: { | ||
402 | + title: { | ||
403 | + text: "Value" | ||
404 | + }, | ||
405 | + plotLines: [ | ||
406 | + { | ||
407 | + value: 0, | ||
408 | + width: 1, | ||
409 | + color: "#808080" | ||
410 | + } | ||
411 | + ] | ||
412 | + }, | ||
413 | + tooltip: { | ||
414 | + headerFormat: "<b>{series.name}</b><br/>", | ||
415 | + pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}" | ||
416 | + }, | ||
417 | + legend: { | ||
418 | + //enabled: false | ||
419 | + layout: "vertical", | ||
420 | + align: "left", | ||
421 | + verticalAlign: "top", | ||
422 | + x: 120, | ||
423 | + y: 70, | ||
424 | + floating: true, | ||
425 | + borderWidth: 1, | ||
426 | + backgroundColor: | ||
427 | + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || | ||
428 | + "#FFFFFF" | ||
429 | + }, | ||
430 | + exporting: { | ||
431 | + enabled: false | ||
432 | + }, | ||
433 | + series: [ | ||
434 | + { | ||
435 | + name: "사망률(%)", | ||
436 | + data: (function() { | ||
437 | + // generate an array of random data | ||
438 | + var data = [], | ||
439 | + time = new Date().getTime(), | ||
440 | + i; | ||
441 | + | ||
442 | + for (i = -19; i <= 0; i += 1) { | ||
443 | + data.push({ | ||
444 | + x: time + i * 3000, | ||
445 | + y: 0 | ||
446 | + }); | ||
447 | + } | ||
448 | + return data; | ||
449 | + })() | ||
450 | + } | ||
451 | + ] | ||
452 | + }); | ||
453 | + </script> | ||
454 | + </body> | ||
455 | +</html> |
graph/areaspline/areaspline.htm
0 → 100644
1 | +<!DOCTYPE html> | ||
2 | +<html> | ||
3 | + <head> | ||
4 | + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | ||
5 | + <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
6 | + <title>Highcharts Example</title> | ||
7 | + | ||
8 | + <style type="text/css"></style> | ||
9 | + </head> | ||
10 | + <body> | ||
11 | + <script src="../../code/highcharts.js"></script> | ||
12 | + <script src="../../code/modules/exporting.js"></script> | ||
13 | + <script src="../../code/modules/export-data.js"></script> | ||
14 | + | ||
15 | + <div | ||
16 | + id="container" | ||
17 | + style="min-width: 310px; height: 400px; margin: 0 auto" | ||
18 | + ></div> | ||
19 | + | ||
20 | + <script type="text/javascript"> | ||
21 | + var death = [3, 4, 3, 5, 4, 10, 12,1,2,3]; | ||
22 | + var temp = [1, 3, 10, 3, 11, 5, 8,4,5,6]; | ||
23 | + | ||
24 | + var chart = Highcharts.chart("container", { | ||
25 | + chart: { | ||
26 | + type: "areaspline" | ||
27 | + }, | ||
28 | + title: { | ||
29 | + text: "실시간 사망률" | ||
30 | + }, | ||
31 | + legend: { | ||
32 | + layout: "vertical", | ||
33 | + align: "left", | ||
34 | + verticalAlign: "top", | ||
35 | + x: 120, | ||
36 | + y: 70, | ||
37 | + floating: true, | ||
38 | + borderWidth: 1, | ||
39 | + backgroundColor: | ||
40 | + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || | ||
41 | + "#FFFFFF" | ||
42 | + }, | ||
43 | + xAxis: { | ||
44 | + categories: [ | ||
45 | + "Monday", | ||
46 | + "Tuesday", | ||
47 | + "Wednesday", | ||
48 | + "Thursday", | ||
49 | + "Friday", | ||
50 | + "Saturday", | ||
51 | + "Sunday", | ||
52 | + "Sunday", | ||
53 | + "Sunday", | ||
54 | + "Sunday" | ||
55 | + ], | ||
56 | + plotBands: [ | ||
57 | + { | ||
58 | + // 색칠되는 구간 | ||
59 | + from: 7.5, | ||
60 | + to: 10.5, | ||
61 | + color: "rgba(68, 170, 213, .2)" | ||
62 | + } | ||
63 | + ] | ||
64 | + }, | ||
65 | + yAxis: { | ||
66 | + title: { | ||
67 | + text: "Fruit units" | ||
68 | + } | ||
69 | + }, | ||
70 | + tooltip: { | ||
71 | + shared: true, | ||
72 | + valueSuffix: " %", //point mouseover 단위 | ||
73 | + }, | ||
74 | + credits: { | ||
75 | + enabled: false | ||
76 | + }, | ||
77 | + plotOptions: { | ||
78 | + areaspline: { | ||
79 | + fillOpacity: 0.5 | ||
80 | + } | ||
81 | + }, | ||
82 | + series: [ | ||
83 | + { | ||
84 | + name: "사망률(%)", | ||
85 | + data: [] | ||
86 | + }, | ||
87 | + { | ||
88 | + name: "기온('C)", | ||
89 | + data: [] | ||
90 | + } | ||
91 | + ] | ||
92 | + }); | ||
93 | + | ||
94 | + death.shift(); | ||
95 | + temp.shift(); | ||
96 | + | ||
97 | + death.push(11); | ||
98 | + temp.push(3); | ||
99 | + | ||
100 | + chart.series[0].setData(death); | ||
101 | + chart.series[1].setData(temp); | ||
102 | + | ||
103 | + </script> | ||
104 | + </body> | ||
105 | +</html> | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
graph/areaspline/dual_graph.html
0 → 100644
1 | +<!DOCTYPE html> | ||
2 | +<html> | ||
3 | + <head> | ||
4 | + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | ||
5 | + <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
6 | + <title>Highcharts Example</title> | ||
7 | + | ||
8 | + <style type="text/css"></style> | ||
9 | + </head> | ||
10 | + <body> | ||
11 | + <script src="../../code/highcharts.js"></script> | ||
12 | + <script src="../../code/modules/exporting.js"></script> | ||
13 | + <script src="../../code/modules/export-data.js"></script> | ||
14 | + | ||
15 | + <div | ||
16 | + id="container" | ||
17 | + style="min-width: 310px; height: 400px; margin: 0 auto" | ||
18 | + ></div> | ||
19 | + | ||
20 | + <script type="text/javascript"> | ||
21 | + | ||
22 | +Highcharts.chart('container', { | ||
23 | + chart: { | ||
24 | + zoomType: 'xy' | ||
25 | + }, | ||
26 | + title: { | ||
27 | + text: 'Average Monthly Temperature and Rainfall in Tokyo' | ||
28 | + }, | ||
29 | + subtitle: { | ||
30 | + text: 'Source: WorldClimate.com' | ||
31 | + }, | ||
32 | + xAxis: [{ | ||
33 | + categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', | ||
34 | + 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'], | ||
35 | + crosshair: true | ||
36 | + }], | ||
37 | + yAxis: [{ // Primary yAxis | ||
38 | + labels: { | ||
39 | + format: '{value}°C', | ||
40 | + style: { | ||
41 | + color: Highcharts.getOptions().colors[1] | ||
42 | + } | ||
43 | + }, | ||
44 | + title: { | ||
45 | + text: 'Temperature', | ||
46 | + style: { | ||
47 | + color: Highcharts.getOptions().colors[1] | ||
48 | + } | ||
49 | + } | ||
50 | + }, { // Secondary yAxis | ||
51 | + title: { | ||
52 | + text: 'Rainfall', | ||
53 | + style: { | ||
54 | + color: Highcharts.getOptions().colors[0] | ||
55 | + } | ||
56 | + }, | ||
57 | + labels: { | ||
58 | + format: '{value} mm', | ||
59 | + style: { | ||
60 | + color: Highcharts.getOptions().colors[0] | ||
61 | + } | ||
62 | + }, | ||
63 | + opposite: true | ||
64 | + }], | ||
65 | + tooltip: { | ||
66 | + shared: true | ||
67 | + }, | ||
68 | + legend: { | ||
69 | + layout: 'vertical', | ||
70 | + align: 'left', | ||
71 | + x: 120, | ||
72 | + verticalAlign: 'top', | ||
73 | + y: 100, | ||
74 | + floating: true, | ||
75 | + backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || 'rgba(255,255,255,0.25)' | ||
76 | + }, | ||
77 | + series: [{ | ||
78 | + name: 'Rainfall', | ||
79 | + type: 'areaspline', | ||
80 | + yAxis: 1, | ||
81 | + data: [49.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4], | ||
82 | + tooltip: { | ||
83 | + valueSuffix: ' mm' | ||
84 | + } | ||
85 | + | ||
86 | + }, { | ||
87 | + name: 'Temperature', | ||
88 | + type: 'spline', | ||
89 | + data: [7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2, 26.5, 23.3, 18.3, 13.9, 9.6], | ||
90 | + tooltip: { | ||
91 | + valueSuffix: '°C' | ||
92 | + } | ||
93 | + }] | ||
94 | +}); | ||
95 | + </script> | ||
96 | + </body> | ||
97 | +</html> | ||
... | \ No newline at end of file | ... | \ No newline at end of file |
graph/areaspline/index.htm
deleted
100644 → 0
1 | -<!DOCTYPE HTML> | ||
2 | -<html> | ||
3 | - <head> | ||
4 | - <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> | ||
5 | - <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
6 | - <title>Highcharts Example</title> | ||
7 | - | ||
8 | - <style type="text/css"> | ||
9 | - | ||
10 | - </style> | ||
11 | - </head> | ||
12 | - <body> | ||
13 | -<script src="../../code/highcharts.js"></script> | ||
14 | -<script src="../../code/modules/exporting.js"></script> | ||
15 | -<script src="../../code/modules/export-data.js"></script> | ||
16 | - | ||
17 | -<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div> | ||
18 | - | ||
19 | - | ||
20 | - | ||
21 | - <script type="text/javascript"> | ||
22 | - | ||
23 | -Highcharts.chart('container', { | ||
24 | - chart: { | ||
25 | - type: 'areaspline' | ||
26 | - }, | ||
27 | - title: { | ||
28 | - text: '실시간 사망률' | ||
29 | - }, | ||
30 | - legend: { | ||
31 | - layout: 'vertical', | ||
32 | - align: 'left', | ||
33 | - verticalAlign: 'top', | ||
34 | - x: 150, | ||
35 | - y: 100, | ||
36 | - floating: true, | ||
37 | - borderWidth: 1, | ||
38 | - backgroundColor: (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || '#FFFFFF' | ||
39 | - }, | ||
40 | - xAxis: { | ||
41 | - categories: [ | ||
42 | - 'Monday', | ||
43 | - 'Tuesday', | ||
44 | - 'Wednesday', | ||
45 | - 'Thursday', | ||
46 | - 'Friday', | ||
47 | - 'Saturday', | ||
48 | - 'Sunday' | ||
49 | - ], | ||
50 | - plotBands: [{ // visualize the weekend | ||
51 | - from: 4.5, | ||
52 | - to: 6.5, | ||
53 | - color: 'rgba(68, 170, 213, .2)' | ||
54 | - }] | ||
55 | - }, | ||
56 | - yAxis: { | ||
57 | - title: { | ||
58 | - text: 'Fruit units' | ||
59 | - } | ||
60 | - }, | ||
61 | - tooltip: { | ||
62 | - shared: true, | ||
63 | - valueSuffix: ' units' | ||
64 | - }, | ||
65 | - credits: { | ||
66 | - enabled: false | ||
67 | - }, | ||
68 | - plotOptions: { | ||
69 | - areaspline: { | ||
70 | - fillOpacity: 0.5 | ||
71 | - } | ||
72 | - }, | ||
73 | - series: [{ | ||
74 | - name: '사망률', | ||
75 | - data: [3, 4, 3, 5, 4, 10, 12] | ||
76 | - }, { | ||
77 | - name: '기온', | ||
78 | - data: [1, 3, 4, 3, 3, 5, 4] | ||
79 | - }] | ||
80 | -}); | ||
81 | - </script> | ||
82 | - </body> | ||
83 | -</html> |
graph/areaspline/index.html
0 → 100644
1 | +<!DOCTYPE html> | ||
2 | +<html> | ||
3 | + <head> | ||
4 | + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> | ||
5 | + <meta name="viewport" content="width=device-width, initial-scale=1" /> | ||
6 | + <title>Highcharts Example</title> | ||
7 | + | ||
8 | + <style type="text/css"></style> | ||
9 | + </head> | ||
10 | + <body> | ||
11 | + <script src="../../code/highcharts.js"></script> | ||
12 | + <script src="../../code/modules/exporting.js"></script> | ||
13 | + <script src="../../code/modules/export-data.js"></script> | ||
14 | + | ||
15 | + <div | ||
16 | + id="container1" | ||
17 | + style="width:1260px; height: 400px; margin: 0 auto" | ||
18 | + ></div> | ||
19 | + | ||
20 | +<div style="width:1275px; margin:0 auto;"> | ||
21 | + <div style="display: inline-block;"> | ||
22 | + <div | ||
23 | + id="container2" | ||
24 | + style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;" | ||
25 | + ></div> | ||
26 | + </div> | ||
27 | + <div style="display: inline-block;"> | ||
28 | + <div | ||
29 | + id="container3" | ||
30 | + style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;" | ||
31 | + ></div> | ||
32 | + </div> | ||
33 | + | ||
34 | + <div style="display: inline-block;"> | ||
35 | + <div | ||
36 | + id="container4" | ||
37 | + style="width:400px; height: 300px; padding:0; margin-left:0px;" | ||
38 | + ></div> | ||
39 | + </div> | ||
40 | + | ||
41 | +</div> | ||
42 | + | ||
43 | + <script type="text/javascript"> | ||
44 | + Highcharts.chart("container1", { | ||
45 | + chart: { | ||
46 | + type: "areaspline", | ||
47 | + animation: Highcharts.svg, // don't animate in old IE | ||
48 | + marginRight: 10, | ||
49 | + events: { | ||
50 | + load: function() { | ||
51 | + // set up the updating of the chart each second | ||
52 | + var series = this.series[0]; | ||
53 | + setInterval(function() { | ||
54 | + var x = new Date().getTime(), // 현재 시간 | ||
55 | + y = 0.7 //여기에 새로 넣을 값 | ||
56 | + series.addPoint([x, y], true, true); | ||
57 | + }, 1000); //1000=1초 -> 1분=60000 | ||
58 | + } | ||
59 | + } | ||
60 | + }, | ||
61 | + | ||
62 | + time: { | ||
63 | + useUTC: false | ||
64 | + }, | ||
65 | + | ||
66 | + title: { | ||
67 | + text: "실시간 사망률" | ||
68 | + }, | ||
69 | + xAxis: { | ||
70 | + type: "datetime", | ||
71 | + tickPixelInterval: 150 | ||
72 | + }, | ||
73 | + yAxis: { | ||
74 | + title: { | ||
75 | + text: "Value" | ||
76 | + }, | ||
77 | + plotLines: [ | ||
78 | + { | ||
79 | + value: 0, | ||
80 | + width: 1, | ||
81 | + color: "#808080" | ||
82 | + } | ||
83 | + ] | ||
84 | + }, | ||
85 | + tooltip: { | ||
86 | + headerFormat: "<b>{series.name}</b><br/>", | ||
87 | + pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}" | ||
88 | + }, | ||
89 | + legend: { | ||
90 | + //enabled: false | ||
91 | + layout: "vertical", | ||
92 | + align: "left", | ||
93 | + verticalAlign: "top", | ||
94 | + x: 120, | ||
95 | + y: 70, | ||
96 | + floating: true, | ||
97 | + borderWidth: 1, | ||
98 | + backgroundColor: | ||
99 | + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || | ||
100 | + "#FFFFFF" | ||
101 | + }, | ||
102 | + exporting: { | ||
103 | + enabled: false | ||
104 | + }, | ||
105 | + series: [ | ||
106 | + { | ||
107 | + name: "사망률(%)", | ||
108 | + data: (function() { | ||
109 | + // generate an array of random data | ||
110 | + var data = [], | ||
111 | + time = new Date().getTime(), | ||
112 | + i; | ||
113 | + | ||
114 | + for (i = -19; i <= 0; i += 1) { | ||
115 | + data.push({ | ||
116 | + x: time + i * 1000, | ||
117 | + y: 0 | ||
118 | + }); | ||
119 | + } | ||
120 | + return data; | ||
121 | + })() | ||
122 | + } | ||
123 | + ] | ||
124 | + }); | ||
125 | + | ||
126 | + Highcharts.chart("container2", { | ||
127 | + chart: { | ||
128 | + type: "spline", | ||
129 | + animation: Highcharts.svg, // don't animate in old IE | ||
130 | + marginRight: 10, | ||
131 | + events: { | ||
132 | + load: function() { | ||
133 | + // set up the updating of the chart each second | ||
134 | + var series = this.series[0]; | ||
135 | + setInterval(function() { | ||
136 | + var x = new Date().getTime(), // 현재 시간 | ||
137 | + y = Math.random(); // | ||
138 | + series.addPoint([x, y], true, true); | ||
139 | + }, 3000); //1000=1초 | ||
140 | + } | ||
141 | + } | ||
142 | + }, | ||
143 | + | ||
144 | + time: { | ||
145 | + useUTC: false | ||
146 | + }, | ||
147 | + | ||
148 | + title: { | ||
149 | + text: "실시간 사망률" | ||
150 | + }, | ||
151 | + xAxis: { | ||
152 | + type: "datetime", | ||
153 | + tickPixelInterval: 150 | ||
154 | + }, | ||
155 | + yAxis: { | ||
156 | + title: { | ||
157 | + text: "Value" | ||
158 | + }, | ||
159 | + plotLines: [ | ||
160 | + { | ||
161 | + value: 0, | ||
162 | + width: 1, | ||
163 | + color: "#808080" | ||
164 | + } | ||
165 | + ] | ||
166 | + }, | ||
167 | + tooltip: { | ||
168 | + headerFormat: "<b>{series.name}</b><br/>", | ||
169 | + pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}" | ||
170 | + }, | ||
171 | + legend: { | ||
172 | + //enabled: false | ||
173 | + layout: "vertical", | ||
174 | + align: "left", | ||
175 | + verticalAlign: "top", | ||
176 | + x: 120, | ||
177 | + y: 70, | ||
178 | + floating: true, | ||
179 | + borderWidth: 1, | ||
180 | + backgroundColor: | ||
181 | + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || | ||
182 | + "#FFFFFF" | ||
183 | + }, | ||
184 | + exporting: { | ||
185 | + enabled: false | ||
186 | + }, | ||
187 | + series: [ | ||
188 | + { | ||
189 | + name: "사망률(%)", | ||
190 | + data: (function() { | ||
191 | + // generate an array of random data | ||
192 | + var data = [], | ||
193 | + time = new Date().getTime(), | ||
194 | + i; | ||
195 | + | ||
196 | + for (i = -19; i <= 0; i += 1) { | ||
197 | + data.push({ | ||
198 | + x: time + i * 3000, | ||
199 | + y: 0 | ||
200 | + }); | ||
201 | + } | ||
202 | + return data; | ||
203 | + })() | ||
204 | + } | ||
205 | + ] | ||
206 | + }); | ||
207 | + | ||
208 | + Highcharts.chart("container3", { | ||
209 | + chart: { | ||
210 | + type: "spline", | ||
211 | + animation: Highcharts.svg, // don't animate in old IE | ||
212 | + marginRight: 10, | ||
213 | + events: { | ||
214 | + load: function() { | ||
215 | + // set up the updating of the chart each second | ||
216 | + var series = this.series[0]; | ||
217 | + setInterval(function() { | ||
218 | + var x = new Date().getTime(), // 현재 시간 | ||
219 | + y = Math.random(); // | ||
220 | + series.addPoint([x, y], true, true); | ||
221 | + }, 3000); //1000=1초 | ||
222 | + } | ||
223 | + } | ||
224 | + }, | ||
225 | + | ||
226 | + time: { | ||
227 | + useUTC: false | ||
228 | + }, | ||
229 | + | ||
230 | + title: { | ||
231 | + text: "실시간 사망률" | ||
232 | + }, | ||
233 | + xAxis: { | ||
234 | + type: "datetime", | ||
235 | + tickPixelInterval: 150 | ||
236 | + }, | ||
237 | + yAxis: { | ||
238 | + title: { | ||
239 | + text: "Value" | ||
240 | + }, | ||
241 | + plotLines: [ | ||
242 | + { | ||
243 | + value: 0, | ||
244 | + width: 1, | ||
245 | + color: "#808080" | ||
246 | + } | ||
247 | + ] | ||
248 | + }, | ||
249 | + tooltip: { | ||
250 | + headerFormat: "<b>{series.name}</b><br/>", | ||
251 | + pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}" | ||
252 | + }, | ||
253 | + legend: { | ||
254 | + //enabled: false | ||
255 | + layout: "vertical", | ||
256 | + align: "left", | ||
257 | + verticalAlign: "top", | ||
258 | + x: 120, | ||
259 | + y: 70, | ||
260 | + floating: true, | ||
261 | + borderWidth: 1, | ||
262 | + backgroundColor: | ||
263 | + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || | ||
264 | + "#FFFFFF" | ||
265 | + }, | ||
266 | + exporting: { | ||
267 | + enabled: false | ||
268 | + }, | ||
269 | + series: [ | ||
270 | + { | ||
271 | + name: "사망률(%)", | ||
272 | + data: (function() { | ||
273 | + // generate an array of random data | ||
274 | + var data = [], | ||
275 | + time = new Date().getTime(), | ||
276 | + i; | ||
277 | + | ||
278 | + for (i = -19; i <= 0; i += 1) { | ||
279 | + data.push({ | ||
280 | + x: time + i * 3000, | ||
281 | + y: 0 | ||
282 | + }); | ||
283 | + } | ||
284 | + return data; | ||
285 | + })() | ||
286 | + } | ||
287 | + ] | ||
288 | + }); | ||
289 | + | ||
290 | + Highcharts.chart("container4", { | ||
291 | + chart: { | ||
292 | + type: "spline", | ||
293 | + animation: Highcharts.svg, // don't animate in old IE | ||
294 | + marginRight: 10, | ||
295 | + events: { | ||
296 | + load: function() { | ||
297 | + // set up the updating of the chart each second | ||
298 | + var series = this.series[0]; | ||
299 | + setInterval(function() { | ||
300 | + var x = new Date().getTime(), // 현재 시간 | ||
301 | + y = Math.random(); // | ||
302 | + series.addPoint([x, y], true, true); | ||
303 | + }, 3000); //1000=1초 | ||
304 | + } | ||
305 | + } | ||
306 | + }, | ||
307 | + | ||
308 | + time: { | ||
309 | + useUTC: false | ||
310 | + }, | ||
311 | + | ||
312 | + title: { | ||
313 | + text: "실시간 사망률" | ||
314 | + }, | ||
315 | + xAxis: { | ||
316 | + type: "datetime", | ||
317 | + tickPixelInterval: 150 | ||
318 | + }, | ||
319 | + yAxis: { | ||
320 | + title: { | ||
321 | + text: "Value" | ||
322 | + }, | ||
323 | + plotLines: [ | ||
324 | + { | ||
325 | + value: 0, | ||
326 | + width: 1, | ||
327 | + color: "#808080" | ||
328 | + } | ||
329 | + ] | ||
330 | + }, | ||
331 | + tooltip: { | ||
332 | + headerFormat: "<b>{series.name}</b><br/>", | ||
333 | + pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}" | ||
334 | + }, | ||
335 | + legend: { | ||
336 | + //enabled: false | ||
337 | + layout: "vertical", | ||
338 | + align: "left", | ||
339 | + verticalAlign: "top", | ||
340 | + x: 120, | ||
341 | + y: 70, | ||
342 | + floating: true, | ||
343 | + borderWidth: 1, | ||
344 | + backgroundColor: | ||
345 | + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || | ||
346 | + "#FFFFFF" | ||
347 | + }, | ||
348 | + exporting: { | ||
349 | + enabled: false | ||
350 | + }, | ||
351 | + series: [ | ||
352 | + { | ||
353 | + name: "사망률(%)", | ||
354 | + data: (function() { | ||
355 | + // generate an array of random data | ||
356 | + var data = [], | ||
357 | + time = new Date().getTime(), | ||
358 | + i; | ||
359 | + | ||
360 | + for (i = -19; i <= 0; i += 1) { | ||
361 | + data.push({ | ||
362 | + x: time + i * 3000, | ||
363 | + y: 0 | ||
364 | + }); | ||
365 | + } | ||
366 | + return data; | ||
367 | + })() | ||
368 | + } | ||
369 | + ] | ||
370 | + }); | ||
371 | + | ||
372 | + </script> | ||
373 | + </body> | ||
374 | +</html> |
1 | { | 1 | { |
2 | "weather": { | 2 | "weather": { |
3 | - "minutely": [{ | 3 | + "minutely": [ |
4 | - "station": { | 4 | + { |
5 | - "longitude": "127.1164", | 5 | + "station": { |
6 | - "latitude": "37.2772", | 6 | + "longitude": "127.1164", |
7 | - "name": "기흥구", | 7 | + "latitude": "37.2772", |
8 | - "id": "371", | 8 | + "name": "기흥구", |
9 | - "type": "KMA" | 9 | + "id": "371", |
10 | - }, | 10 | + "type": "KMA" |
11 | - "wind": { | 11 | + }, |
12 | - "wdir": "189.50", | 12 | + "wind": { |
13 | - "wspd": "2.20" | 13 | + "wdir": "189.50", |
14 | - }, | 14 | + "wspd": "2.20" |
15 | - "precipitation": { | 15 | + }, |
16 | - "sinceOntime": "0.00", | 16 | + "precipitation": { |
17 | - "type": "0" | 17 | + "sinceOntime": "0.00", |
18 | - }, | 18 | + "type": "0" |
19 | - "sky": { | 19 | + }, |
20 | - "code": "SKY_A07", | 20 | + "sky": { |
21 | - "name": "흐림" | 21 | + "code": "SKY_A07", |
22 | - }, | 22 | + "name": "흐림" |
23 | - "rain": { | 23 | + }, |
24 | - "sinceOntime": "0.00", | 24 | + "rain": { |
25 | - "sinceMidnight": "", | 25 | + "sinceOntime": "0.00", |
26 | - "last10min": "0.00", | 26 | + "sinceMidnight": "", |
27 | - "last15min": "0.00", | 27 | + "last10min": "0.00", |
28 | - "last30min": "0.00", | 28 | + "last15min": "0.00", |
29 | - "last1hour": "0.00", | 29 | + "last30min": "0.00", |
30 | - "last6hour": "0.50", | 30 | + "last1hour": "0.00", |
31 | - "last12hour": "0.50", | 31 | + "last6hour": "0.50", |
32 | - "last24hour": "0.50" | 32 | + "last12hour": "0.50", |
33 | - }, | 33 | + "last24hour": "0.50" |
34 | - "temperature": { | 34 | + }, |
35 | - "tc": "5.90", | 35 | + "temperature": { |
36 | - "tmax": "7.00", | 36 | + "tc": "5.90", |
37 | - "tmin": "-1.00" | 37 | + "tmax": "7.00", |
38 | - }, | 38 | + "tmin": "-1.00" |
39 | - "humidity": "", | 39 | + }, |
40 | - "pressure": { | 40 | + "humidity": "", |
41 | - "surface": "", | 41 | + "pressure": { |
42 | - "seaLevel": "" | 42 | + "surface": "", |
43 | - }, | 43 | + "seaLevel": "" |
44 | - "lightning": "0", | 44 | + }, |
45 | - "timeObservation": "2018-12-06 14:14:00" | 45 | + "lightning": "0", |
46 | - }] | 46 | + "timeObservation": "2018-12-06 14:14:00" |
47 | + } | ||
48 | + ] | ||
47 | }, | 49 | }, |
48 | "common": { | 50 | "common": { |
49 | "alertYn": "Y", | 51 | "alertYn": "Y", |
... | @@ -54,4 +56,201 @@ | ... | @@ -54,4 +56,201 @@ |
54 | "requestUrl": "/weather/current/minutely?appKey=key&lat=37.239795&lon=127.083240", | 56 | "requestUrl": "/weather/current/minutely?appKey=key&lat=37.239795&lon=127.083240", |
55 | "message": "성공" | 57 | "message": "성공" |
56 | } | 58 | } |
59 | +}, | ||
60 | +{ | ||
61 | + "weather": { | ||
62 | + "wIndex": { | ||
63 | + "uvindex": [ | ||
64 | + { | ||
65 | + "grid": { | ||
66 | + "city": "경기도", | ||
67 | + "county": "수원시", | ||
68 | + "village": "" | ||
69 | + }, | ||
70 | + "day00": { | ||
71 | + "imageUrl": "http://files.weatherplanet.co.kr/weather/01_FCT/INDEX1/20181209/FCT_IDX_A07_1_2018120906_00D.gif", | ||
72 | + "index": "20.00", | ||
73 | + "comment": "자외선 걱정 없어요" | ||
74 | + }, | ||
75 | + "day01": { | ||
76 | + "imageUrl": "http://files.weatherplanet.co.kr/weather/01_FCT/INDEX1/20181209/FCT_IDX_A07_1_2018120906_01D.gif", | ||
77 | + "index": "20.00", | ||
78 | + "comment": "자외선 걱정 없어요" | ||
79 | + }, | ||
80 | + "day02": { | ||
81 | + "imageUrl": "http://files.weatherplanet.co.kr/weather/01_FCT/INDEX1/20181209/FCT_IDX_A07_1_2018120906_02D.gif", | ||
82 | + "index": "10.00", | ||
83 | + "comment": "자외선 없는 날입니다" | ||
84 | + } | ||
85 | + } | ||
86 | + ], | ||
87 | + "timeRelease": "2018-12-09 06:00:00" | ||
88 | + } | ||
89 | + }, | ||
90 | + "common": { | ||
91 | + "alertYn": "Y", | ||
92 | + "stormYn": "N" | ||
93 | + }, | ||
94 | + "result": { | ||
95 | + "code": 9200, | ||
96 | + "requestUrl": "/weather/index/uv?appKey=c13b1a68-ef31-4131-a1b7-4069c263f82d&version=1&lat=37.239795&lon=127.083240", | ||
97 | + "message": "성공" | ||
98 | + } | ||
99 | +}{ | ||
100 | + "weather": { | ||
101 | + "wIndex": { | ||
102 | + "thIndex": [ | ||
103 | + { | ||
104 | + "grid": { | ||
105 | + "city": "경기", | ||
106 | + "county": "용인시 기흥구", | ||
107 | + "village": "상갈동" | ||
108 | + }, | ||
109 | + "forecast": { | ||
110 | + "timeRelease": "2018-12-09 14:00:00", | ||
111 | + "index43hour": "37.85", | ||
112 | + "index4hour": "38.40", | ||
113 | + "index7hour": "34.36", | ||
114 | + "index10hour": "31.08", | ||
115 | + "index13hour": "31.08", | ||
116 | + "index16hour": "27.60", | ||
117 | + "index19hour": "35.76", | ||
118 | + "index22hour": "44.84", | ||
119 | + "index25hour": "47.47", | ||
120 | + "index28hour": "42.45", | ||
121 | + "index31hour": "39.37", | ||
122 | + "index34hour": "37.85", | ||
123 | + "index37hour": "36.54", | ||
124 | + "index40hour": "35.73", | ||
125 | + "index46hour": "42.99", | ||
126 | + "index49hour": "39.12", | ||
127 | + "index52hour": "37.79", | ||
128 | + "index55hour": "37.13", | ||
129 | + "index58hour": "36.29", | ||
130 | + "index61hour": "", | ||
131 | + "index64hour": "", | ||
132 | + "index67hour": "" | ||
133 | + }, | ||
134 | + "current": { | ||
135 | + "timeRelease": "2018-12-09 14:00:00", | ||
136 | + "index": "40.49" | ||
137 | + } | ||
138 | + } | ||
139 | + ] | ||
140 | + } | ||
141 | + }, | ||
142 | + "common": { | ||
143 | + "alertYn": "Y", | ||
144 | + "stormYn": "N" | ||
145 | + }, | ||
146 | + "result": { | ||
147 | + "code": 9200, | ||
148 | + "requestUrl": "/weather/index/th?appKey=c13b1a68-ef31-4131-a1b7-4069c263f82d&version=1&lat=37.239795&lon=127.083240", | ||
149 | + "message": "성공" | ||
150 | + } | ||
151 | +}{ | ||
152 | + "weather": { | ||
153 | + "wIndex": { | ||
154 | + "heatIndex": [ | ||
155 | + { | ||
156 | + "grid": { | ||
157 | + "city": "경기", | ||
158 | + "county": "용인시 기흥구", | ||
159 | + "village": "상갈동" | ||
160 | + }, | ||
161 | + "forecast": { | ||
162 | + "timeRelease": "2018-12-09 14:00:00", | ||
163 | + "index4hour": "37.28", | ||
164 | + "index7hour": "70.81", | ||
165 | + "index10hour": "91.57", | ||
166 | + "index13hour": "91.57", | ||
167 | + "index16hour": "110.30", | ||
168 | + "index19hour": "71.89", | ||
169 | + "index22hour": "36.40", | ||
170 | + "index25hour": "27.82", | ||
171 | + "index28hour": "50.39", | ||
172 | + "index31hour": "61.62", | ||
173 | + "index34hour": "71.05", | ||
174 | + "index37hour": "75.20", | ||
175 | + "index40hour": "79.01", | ||
176 | + "index43hour": "71.05", | ||
177 | + "index46hour": "52.61", | ||
178 | + "index49hour": "67.96", | ||
179 | + "index52hour": "69.50", | ||
180 | + "index55hour": "69.08", | ||
181 | + "index58hour": "74.43", | ||
182 | + "index61hour": "", | ||
183 | + "index64hour": "", | ||
184 | + "index67hour": "" | ||
185 | + }, | ||
186 | + "current": { | ||
187 | + "timeRelease": "2018-12-09 14:00:00", | ||
188 | + "index": "32.79" | ||
189 | + } | ||
190 | + } | ||
191 | + ] | ||
192 | + } | ||
193 | + }, | ||
194 | + "common": { | ||
195 | + "alertYn": "Y", | ||
196 | + "stormYn": "N" | ||
197 | + }, | ||
198 | + "result": { | ||
199 | + "code": 9200, | ||
200 | + "requestUrl": "/weather/index/heat?appKey=c13b1a68-ef31-4131-a1b7-4069c263f82d&version=1&lat=37.239795&lon=127.083240", | ||
201 | + "message": "성공" | ||
202 | + } | ||
203 | +} | ||
204 | +{ | ||
205 | + "weather": { | ||
206 | + "wIndex": { | ||
207 | + "wctIndex": [ | ||
208 | + { | ||
209 | + "grid": { | ||
210 | + "city": "경기", | ||
211 | + "county": "용인시 기흥구", | ||
212 | + "village": "상갈동" | ||
213 | + }, | ||
214 | + "forecast": { | ||
215 | + "timeRelease": "2018-12-09 14:00:00", | ||
216 | + "index43hour": "-2.17", | ||
217 | + "index4hour": "-8.15", | ||
218 | + "index7hour": "-6.55", | ||
219 | + "index10hour": "-7.00", | ||
220 | + "index13hour": "-7.63", | ||
221 | + "index16hour": "-9.08", | ||
222 | + "index19hour": "-4.71", | ||
223 | + "index22hour": "1.18", | ||
224 | + "index25hour": "1.53", | ||
225 | + "index28hour": "-0.47", | ||
226 | + "index31hour": "-3.76", | ||
227 | + "index34hour": "-2.37", | ||
228 | + "index37hour": "-4.67", | ||
229 | + "index40hour": "-4.38", | ||
230 | + "index46hour": "-0.67", | ||
231 | + "index49hour": "-1.18", | ||
232 | + "index52hour": "-2.14", | ||
233 | + "index55hour": "-1.65", | ||
234 | + "index58hour": "-4.23", | ||
235 | + "index61hour": "", | ||
236 | + "index64hour": "", | ||
237 | + "index67hour": "" | ||
238 | + }, | ||
239 | + "current": { | ||
240 | + "timeRelease": "2018-12-09 14:00:00", | ||
241 | + "index": "-6.22" | ||
242 | + } | ||
243 | + } | ||
244 | + ] | ||
245 | + } | ||
246 | + }, | ||
247 | + "common": { | ||
248 | + "alertYn": "Y", | ||
249 | + "stormYn": "N" | ||
250 | + }, | ||
251 | + "result": { | ||
252 | + "code": 9200, | ||
253 | + "requestUrl": "/weather/index/wct?appKey=c13b1a68-ef31-4131-a1b7-4069c263f82d&version=1&lat=37.239795&lon=127.083240", | ||
254 | + "message": "성공" | ||
255 | + } | ||
57 | } | 256 | } |
... | \ No newline at end of file | ... | \ No newline at end of file | ... | ... |
... | @@ -21,24 +21,29 @@ module.exports = (server, app) => { | ... | @@ -21,24 +21,29 @@ module.exports = (server, app) => { |
21 | if (err) throw err; | 21 | if (err) throw err; |
22 | // api의 대답이 있을경우 실행 | 22 | // api의 대답이 있을경우 실행 |
23 | if (api_res) { | 23 | if (api_res) { |
24 | - console.log(api_body); | 24 | + return api_body; |
25 | - // api_body.weather.minutely[0] | 25 | + // api_body.weather.minutely[0] |
26 | } | 26 | } |
27 | }); | 27 | }); |
28 | } | 28 | } |
29 | io.on('connection', (socket) => { //웹 페이지 연결시 루프 동작 | 29 | io.on('connection', (socket) => { //웹 페이지 연결시 루프 동작 |
30 | let API_CALL; | 30 | let API_CALL; |
31 | - | 31 | + let Current_Weather; |
32 | - | 32 | + let Sensible_T; |
33 | + let Heat_index; | ||
34 | + let Discomport_index; | ||
35 | + let Ultra_Violet_index; | ||
36 | + | ||
33 | socket.on("connection", () => { | 37 | socket.on("connection", () => { |
34 | API_CALL = setInterval(() => { | 38 | API_CALL = setInterval(() => { |
35 | 39 | ||
36 | - CALL("current","minutely"); //현재날씨 (분별) | 40 | + Current_Weather = CALL("current","minutely"); //현재날씨 (분별) |
37 | - CALL("index","wct"); //체감온도 | 41 | + Sensible_T = CALL("index","wct"); //체감온도 |
38 | - CALL("index","heat"); //열지수 | 42 | + Heat_index = CALL("index","heat"); //열지수 |
39 | - CALL("index","th"); //불쾌지수 | 43 | + Discomport_index = CALL("index","th"); //불쾌지수 |
40 | - CALL("index","uv"); //자외선지수 | 44 | + Ultra_Violet_index = CALL("index","uv"); //자외선지수 |
41 | 45 | ||
46 | + socket.emit("weatherInfo_minutely_send_to_cliend",info); | ||
42 | }, 60 * 1000); //1분마다 호출 | 47 | }, 60 * 1000); //1분마다 호출 |
43 | }); | 48 | }); |
44 | 49 | ||
... | @@ -50,3 +55,4 @@ module.exports = (server, app) => { | ... | @@ -50,3 +55,4 @@ module.exports = (server, app) => { |
50 | 55 | ||
51 | 56 | ||
52 | } | 57 | } |
58 | + | ... | ... |
1 | <!DOCTYPE html> | 1 | <!DOCTYPE html> |
2 | <html> | 2 | <html> |
3 | <head> | 3 | <head> |
4 | - <title><%= title %></title> | 4 | + <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> |
5 | - <link rel='stylesheet' href='/stylesheets/style.css' /> | 5 | + <meta name="viewport" content="width=device-width, initial-scale=1" /> |
6 | + <title>Highcharts Example</title> | ||
7 | + | ||
8 | + <style type="text/css"></style> | ||
6 | </head> | 9 | </head> |
7 | <body> | 10 | <body> |
8 | - <h1><%= title %></h1> | 11 | + <script src="../code/highcharts.js"></script> |
9 | - <p>Welcome to <%= title %></p> | 12 | + <script src="../code/modules/exporting.js"></script> |
13 | + <script src="../code/modules/export-data.js"></script> | ||
14 | + | ||
15 | + <div | ||
16 | + id="container1" | ||
17 | + style="width:1260px; height: 400px; margin: 0 auto" | ||
18 | + ></div> | ||
19 | + | ||
20 | +<div style="width:1275px; margin:0 auto;"> | ||
21 | + <div style="display: inline-block;"> | ||
22 | + <div | ||
23 | + id="container2" | ||
24 | + style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;" | ||
25 | + ></div> | ||
26 | + </div> | ||
27 | + <div style="display: inline-block;"> | ||
28 | + <div | ||
29 | + id="container3" | ||
30 | + style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;" | ||
31 | + ></div> | ||
32 | + </div> | ||
33 | + | ||
34 | + <div style="display: inline-block;"> | ||
35 | + <div | ||
36 | + id="container4" | ||
37 | + style="width:400px; height: 300px; padding:0; margin-left:0px;" | ||
38 | + ></div> | ||
39 | + </div> | ||
40 | + | ||
41 | +</div> | ||
42 | + | ||
43 | + <script type="text/javascript"> | ||
44 | + Highcharts.chart("container1", { | ||
45 | + chart: { | ||
46 | + type: "areaspline", | ||
47 | + animation: Highcharts.svg, // don't animate in old IE | ||
48 | + marginRight: 10, | ||
49 | + events: { | ||
50 | + load: function() { | ||
51 | + // set up the updating of the chart each second | ||
52 | + var series = this.series[0]; | ||
53 | + setInterval(function() { | ||
54 | + var x = new Date().getTime(), // 현재 시간 | ||
55 | + y = 0.7 //여기에 새로 넣을 값 | ||
56 | + series.addPoint([x, y], true, true); | ||
57 | + }, 1000); //1000=1초 -> 1분=60000 | ||
58 | + } | ||
59 | + } | ||
60 | + }, | ||
61 | + | ||
62 | + time: { | ||
63 | + useUTC: false | ||
64 | + }, | ||
65 | + | ||
66 | + title: { | ||
67 | + text: "실시간 사망률" | ||
68 | + }, | ||
69 | + xAxis: { | ||
70 | + type: "datetime", | ||
71 | + tickPixelInterval: 150 | ||
72 | + }, | ||
73 | + yAxis: { | ||
74 | + title: { | ||
75 | + text: "Value" | ||
76 | + }, | ||
77 | + plotLines: [ | ||
78 | + { | ||
79 | + value: 0, | ||
80 | + width: 1, | ||
81 | + color: "#808080" | ||
82 | + } | ||
83 | + ] | ||
84 | + }, | ||
85 | + tooltip: { | ||
86 | + headerFormat: "<b>{series.name}</b><br/>", | ||
87 | + pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}" | ||
88 | + }, | ||
89 | + legend: { | ||
90 | + //enabled: false | ||
91 | + layout: "vertical", | ||
92 | + align: "left", | ||
93 | + verticalAlign: "top", | ||
94 | + x: 120, | ||
95 | + y: 70, | ||
96 | + floating: true, | ||
97 | + borderWidth: 1, | ||
98 | + backgroundColor: | ||
99 | + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || | ||
100 | + "#FFFFFF" | ||
101 | + }, | ||
102 | + exporting: { | ||
103 | + enabled: false | ||
104 | + }, | ||
105 | + series: [ | ||
106 | + { | ||
107 | + name: "사망률(%)", | ||
108 | + data: (function() { | ||
109 | + // generate an array of random data | ||
110 | + var data = [], | ||
111 | + time = new Date().getTime(), | ||
112 | + i; | ||
113 | + | ||
114 | + for (i = -19; i <= 0; i += 1) { | ||
115 | + data.push({ | ||
116 | + x: time + i * 1000, | ||
117 | + y: 0 | ||
118 | + }); | ||
119 | + } | ||
120 | + return data; | ||
121 | + })() | ||
122 | + } | ||
123 | + ] | ||
124 | + }); | ||
125 | + | ||
126 | + Highcharts.chart("container2", { | ||
127 | + chart: { | ||
128 | + type: "spline", | ||
129 | + animation: Highcharts.svg, // don't animate in old IE | ||
130 | + marginRight: 10, | ||
131 | + events: { | ||
132 | + load: function() { | ||
133 | + // set up the updating of the chart each second | ||
134 | + var series = this.series[0]; | ||
135 | + setInterval(function() { | ||
136 | + var x = new Date().getTime(), // 현재 시간 | ||
137 | + y = Math.random(); // | ||
138 | + series.addPoint([x, y], true, true); | ||
139 | + }, 3000); //1000=1초 | ||
140 | + } | ||
141 | + } | ||
142 | + }, | ||
143 | + | ||
144 | + time: { | ||
145 | + useUTC: false | ||
146 | + }, | ||
147 | + | ||
148 | + title: { | ||
149 | + text: "실시간 사망률" | ||
150 | + }, | ||
151 | + xAxis: { | ||
152 | + type: "datetime", | ||
153 | + tickPixelInterval: 150 | ||
154 | + }, | ||
155 | + yAxis: { | ||
156 | + title: { | ||
157 | + text: "Value" | ||
158 | + }, | ||
159 | + plotLines: [ | ||
160 | + { | ||
161 | + value: 0, | ||
162 | + width: 1, | ||
163 | + color: "#808080" | ||
164 | + } | ||
165 | + ] | ||
166 | + }, | ||
167 | + tooltip: { | ||
168 | + headerFormat: "<b>{series.name}</b><br/>", | ||
169 | + pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}" | ||
170 | + }, | ||
171 | + legend: { | ||
172 | + //enabled: false | ||
173 | + layout: "vertical", | ||
174 | + align: "left", | ||
175 | + verticalAlign: "top", | ||
176 | + x: 120, | ||
177 | + y: 70, | ||
178 | + floating: true, | ||
179 | + borderWidth: 1, | ||
180 | + backgroundColor: | ||
181 | + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || | ||
182 | + "#FFFFFF" | ||
183 | + }, | ||
184 | + exporting: { | ||
185 | + enabled: false | ||
186 | + }, | ||
187 | + series: [ | ||
188 | + { | ||
189 | + name: "사망률(%)", | ||
190 | + data: (function() { | ||
191 | + // generate an array of random data | ||
192 | + var data = [], | ||
193 | + time = new Date().getTime(), | ||
194 | + i; | ||
195 | + | ||
196 | + for (i = -19; i <= 0; i += 1) { | ||
197 | + data.push({ | ||
198 | + x: time + i * 3000, | ||
199 | + y: 0 | ||
200 | + }); | ||
201 | + } | ||
202 | + return data; | ||
203 | + })() | ||
204 | + } | ||
205 | + ] | ||
206 | + }); | ||
207 | + | ||
208 | + Highcharts.chart("container3", { | ||
209 | + chart: { | ||
210 | + type: "spline", | ||
211 | + animation: Highcharts.svg, // don't animate in old IE | ||
212 | + marginRight: 10, | ||
213 | + events: { | ||
214 | + load: function() { | ||
215 | + // set up the updating of the chart each second | ||
216 | + var series = this.series[0]; | ||
217 | + setInterval(function() { | ||
218 | + var x = new Date().getTime(), // 현재 시간 | ||
219 | + y = Math.random(); // | ||
220 | + series.addPoint([x, y], true, true); | ||
221 | + }, 3000); //1000=1초 | ||
222 | + } | ||
223 | + } | ||
224 | + }, | ||
225 | + | ||
226 | + time: { | ||
227 | + useUTC: false | ||
228 | + }, | ||
229 | + | ||
230 | + title: { | ||
231 | + text: "실시간 사망률" | ||
232 | + }, | ||
233 | + xAxis: { | ||
234 | + type: "datetime", | ||
235 | + tickPixelInterval: 150 | ||
236 | + }, | ||
237 | + yAxis: { | ||
238 | + title: { | ||
239 | + text: "Value" | ||
240 | + }, | ||
241 | + plotLines: [ | ||
242 | + { | ||
243 | + value: 0, | ||
244 | + width: 1, | ||
245 | + color: "#808080" | ||
246 | + } | ||
247 | + ] | ||
248 | + }, | ||
249 | + tooltip: { | ||
250 | + headerFormat: "<b>{series.name}</b><br/>", | ||
251 | + pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}" | ||
252 | + }, | ||
253 | + legend: { | ||
254 | + //enabled: false | ||
255 | + layout: "vertical", | ||
256 | + align: "left", | ||
257 | + verticalAlign: "top", | ||
258 | + x: 120, | ||
259 | + y: 70, | ||
260 | + floating: true, | ||
261 | + borderWidth: 1, | ||
262 | + backgroundColor: | ||
263 | + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || | ||
264 | + "#FFFFFF" | ||
265 | + }, | ||
266 | + exporting: { | ||
267 | + enabled: false | ||
268 | + }, | ||
269 | + series: [ | ||
270 | + { | ||
271 | + name: "사망률(%)", | ||
272 | + data: (function() { | ||
273 | + // generate an array of random data | ||
274 | + var data = [], | ||
275 | + time = new Date().getTime(), | ||
276 | + i; | ||
277 | + | ||
278 | + for (i = -19; i <= 0; i += 1) { | ||
279 | + data.push({ | ||
280 | + x: time + i * 3000, | ||
281 | + y: 0 | ||
282 | + }); | ||
283 | + } | ||
284 | + return data; | ||
285 | + })() | ||
286 | + } | ||
287 | + ] | ||
288 | + }); | ||
289 | + | ||
290 | + Highcharts.chart("container4", { | ||
291 | + chart: { | ||
292 | + type: "spline", | ||
293 | + animation: Highcharts.svg, // don't animate in old IE | ||
294 | + marginRight: 10, | ||
295 | + events: { | ||
296 | + load: function() { | ||
297 | + // set up the updating of the chart each second | ||
298 | + var series = this.series[0]; | ||
299 | + setInterval(function() { | ||
300 | + var x = new Date().getTime(), // 현재 시간 | ||
301 | + y = Math.random(); // | ||
302 | + series.addPoint([x, y], true, true); | ||
303 | + }, 3000); //1000=1초 | ||
304 | + } | ||
305 | + } | ||
306 | + }, | ||
307 | + | ||
308 | + time: { | ||
309 | + useUTC: false | ||
310 | + }, | ||
311 | + | ||
312 | + title: { | ||
313 | + text: "실시간 사망률" | ||
314 | + }, | ||
315 | + xAxis: { | ||
316 | + type: "datetime", | ||
317 | + tickPixelInterval: 150 | ||
318 | + }, | ||
319 | + yAxis: { | ||
320 | + title: { | ||
321 | + text: "Value" | ||
322 | + }, | ||
323 | + plotLines: [ | ||
324 | + { | ||
325 | + value: 0, | ||
326 | + width: 1, | ||
327 | + color: "#808080" | ||
328 | + } | ||
329 | + ] | ||
330 | + }, | ||
331 | + tooltip: { | ||
332 | + headerFormat: "<b>{series.name}</b><br/>", | ||
333 | + pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}" | ||
334 | + }, | ||
335 | + legend: { | ||
336 | + //enabled: false | ||
337 | + layout: "vertical", | ||
338 | + align: "left", | ||
339 | + verticalAlign: "top", | ||
340 | + x: 120, | ||
341 | + y: 70, | ||
342 | + floating: true, | ||
343 | + borderWidth: 1, | ||
344 | + backgroundColor: | ||
345 | + (Highcharts.theme && Highcharts.theme.legendBackgroundColor) || | ||
346 | + "#FFFFFF" | ||
347 | + }, | ||
348 | + exporting: { | ||
349 | + enabled: false | ||
350 | + }, | ||
351 | + series: [ | ||
352 | + { | ||
353 | + name: "사망률(%)", | ||
354 | + data: (function() { | ||
355 | + // generate an array of random data | ||
356 | + var data = [], | ||
357 | + time = new Date().getTime(), | ||
358 | + i; | ||
359 | + | ||
360 | + for (i = -19; i <= 0; i += 1) { | ||
361 | + data.push({ | ||
362 | + x: time + i * 3000, | ||
363 | + y: 0 | ||
364 | + }); | ||
365 | + } | ||
366 | + return data; | ||
367 | + })() | ||
368 | + } | ||
369 | + ] | ||
370 | + }); | ||
371 | + | ||
372 | + </script> | ||
10 | </body> | 373 | </body> |
11 | </html> | 374 | </html> | ... | ... |
-
Please register or login to post a comment