index.html 9.46 KB
<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <title>Highcharts Example</title>

    <style type="text/css"></style>
  </head>
  <body>
    <script src="../../code/highcharts.js"></script>
    <script src="../../code/modules/exporting.js"></script>
    <script src="../../code/modules/export-data.js"></script>

    <div
      id="container1"
      style="width:1260px; height: 400px; margin: 0 auto"
    ></div>

<div style="width:1275px;  margin:0 auto;">
    <div style="display: inline-block;">
        <div
          id="container2"
          style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"
        ></div>
      </div>
      <div style="display: inline-block;">
          <div
            id="container3"
            style="width:400px; height: 300px; padding:0; margin-left:0px;margin-right: 30px;"
          ></div>
        </div>
  
        <div style="display: inline-block;">
          <div
            id="container4"
            style="width:400px; height: 300px; padding:0; margin-left:0px;"
          ></div>
        </div>
  
</div>    

    <script type="text/javascript">
      Highcharts.chart("container1", {
        chart: {
          type: "areaspline",
          animation: Highcharts.svg, // don't animate in old IE
          marginRight: 10,
          events: {
            load: function() {
              // set up the updating of the chart each second
              var series = this.series[0];
              setInterval(function() {
                var x = new Date().getTime(), // 현재 시간
                  y = 0.7 //여기에 새로 넣을 값
                series.addPoint([x, y], true, true);
              }, 1000); //1000=1초 -> 1분=60000
            }
          }
        },
        
        time: {
          useUTC: false
        },

        title: {
          text: "실시간 사망률"
        },
        xAxis: {
          type: "datetime",
          tickPixelInterval: 150
        },
        yAxis: {
          title: {
            text: "Value"
          },
          plotLines: [
            {
              value: 0,
              width: 1,
              color: "#808080"
            }
          ]
        },
        tooltip: {
          headerFormat: "<b>{series.name}</b><br/>",
          pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
        },
        legend: {
          //enabled: false
          layout: "vertical",
          align: "left",
          verticalAlign: "top",
          x: 120,
          y: 70,
          floating: true,
          borderWidth: 1,
          backgroundColor:
            (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
            "#FFFFFF"
        },
        exporting: {
          enabled: false
        },
        series: [
          {
            name: "사망률(%)",
            data: (function() {
              // generate an array of random data
              var data = [],
                time = new Date().getTime(),
                i;

              for (i = -19; i <= 0; i += 1) {
                data.push({
                  x: time + i * 1000,
                  y: 0
                });
              }
              return data;
            })()
          }
        ]
      });

      Highcharts.chart("container2", {
        chart: {
          type: "spline",
          animation: Highcharts.svg, // don't animate in old IE
          marginRight: 10,
          events: {
            load: function() {
              // set up the updating of the chart each second
              var series = this.series[0];
              setInterval(function() {
                var x = new Date().getTime(), // 현재 시간
                  y = Math.random(); //
                series.addPoint([x, y], true, true);
              }, 3000); //1000=1초
            }
          }
        },

        time: {
          useUTC: false
        },

        title: {
          text: "실시간 사망률"
        },
        xAxis: {
          type: "datetime",
          tickPixelInterval: 150
        },
        yAxis: {
          title: {
            text: "Value"
          },
          plotLines: [
            {
              value: 0,
              width: 1,
              color: "#808080"
            }
          ]
        },
        tooltip: {
          headerFormat: "<b>{series.name}</b><br/>",
          pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
        },
        legend: {
          //enabled: false
          layout: "vertical",
          align: "left",
          verticalAlign: "top",
          x: 120,
          y: 70,
          floating: true,
          borderWidth: 1,
          backgroundColor:
            (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
            "#FFFFFF"
        },
        exporting: {
          enabled: false
        },
        series: [
          {
            name: "사망률(%)",
            data: (function() {
              // generate an array of random data
              var data = [],
                time = new Date().getTime(),
                i;

              for (i = -19; i <= 0; i += 1) {
                data.push({
                  x: time + i * 3000,
                  y: 0
                });
              }
              return data;
            })()
          }
        ]
      });

      Highcharts.chart("container3", {
        chart: {
          type: "spline",
          animation: Highcharts.svg, // don't animate in old IE
          marginRight: 10,
          events: {
            load: function() {
              // set up the updating of the chart each second
              var series = this.series[0];
              setInterval(function() {
                var x = new Date().getTime(), // 현재 시간
                  y = Math.random(); //
                series.addPoint([x, y], true, true);
              }, 3000); //1000=1초
            }
          }
        },

        time: {
          useUTC: false
        },

        title: {
          text: "실시간 사망률"
        },
        xAxis: {
          type: "datetime",
          tickPixelInterval: 150
        },
        yAxis: {
          title: {
            text: "Value"
          },
          plotLines: [
            {
              value: 0,
              width: 1,
              color: "#808080"
            }
          ]
        },
        tooltip: {
          headerFormat: "<b>{series.name}</b><br/>",
          pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
        },
        legend: {
          //enabled: false
          layout: "vertical",
          align: "left",
          verticalAlign: "top",
          x: 120,
          y: 70,
          floating: true,
          borderWidth: 1,
          backgroundColor:
            (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
            "#FFFFFF"
        },
        exporting: {
          enabled: false
        },
        series: [
          {
            name: "사망률(%)",
            data: (function() {
              // generate an array of random data
              var data = [],
                time = new Date().getTime(),
                i;

              for (i = -19; i <= 0; i += 1) {
                data.push({
                  x: time + i * 3000,
                  y: 0
                });
              }
              return data;
            })()
          }
        ]
      });

      Highcharts.chart("container4", {
        chart: {
          type: "spline",
          animation: Highcharts.svg, // don't animate in old IE
          marginRight: 10,
          events: {
            load: function() {
              // set up the updating of the chart each second
              var series = this.series[0];
              setInterval(function() {
                var x = new Date().getTime(), // 현재 시간
                  y = Math.random(); //
                series.addPoint([x, y], true, true);
              }, 3000); //1000=1초
            }
          }
        },

        time: {
          useUTC: false
        },

        title: {
          text: "실시간 사망률"
        },
        xAxis: {
          type: "datetime",
          tickPixelInterval: 150
        },
        yAxis: {
          title: {
            text: "Value"
          },
          plotLines: [
            {
              value: 0,
              width: 1,
              color: "#808080"
            }
          ]
        },
        tooltip: {
          headerFormat: "<b>{series.name}</b><br/>",
          pointFormat: "{point.x:%Y-%m-%d %H:%M:%S}<br/>{point.y:.2f}"
        },
        legend: {
          //enabled: false
          layout: "vertical",
          align: "left",
          verticalAlign: "top",
          x: 120,
          y: 70,
          floating: true,
          borderWidth: 1,
          backgroundColor:
            (Highcharts.theme && Highcharts.theme.legendBackgroundColor) ||
            "#FFFFFF"
        },
        exporting: {
          enabled: false
        },
        series: [
          {
            name: "사망률(%)",
            data: (function() {
              // generate an array of random data
              var data = [],
                time = new Date().getTime(),
                i;

              for (i = -19; i <= 0; i += 1) {
                data.push({
                  x: time + i * 3000,
                  y: 0
                });
              }
              return data;
            })()
          }
        ]
      });

    </script>
  </body>
</html>