Advertisement
Guest User

Untitled

a guest
Oct 6th, 2014
225
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 2.94 KB | None | 0 0
  1. <!DOCTYPE HTML>
  2.  
  3. <html>
  4.     <head>
  5.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  6.         <title>Highcharts Example</title>
  7.  
  8.         <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
  9.         <style type="text/css">
  10. ${demo.css}
  11.         </style>
  12.         <script type="text/javascript">
  13. $(function () {
  14.     $(document).ready(function () {
  15.         Highcharts.setOptions({
  16.             global: {
  17.                 useUTC: false
  18.             }
  19.         });
  20.  
  21.         $('#container').highcharts({
  22.             chart: {
  23.                 type: 'spline',
  24.                 animation: Highcharts.svg, // don't animate in old IE
  25.                 marginRight: 10,
  26.                 events: {
  27.                     load: function () {
  28.  
  29.                         // set up the updating of the chart each second
  30.                         var series = this.series[0];
  31.                         setInterval(function () {
  32.                             var x = (new Date()).getTime(), // current time
  33.                                 y = Math.random();
  34.                             series.addPoint([x, y], true, true);
  35.                         }, 1000);
  36.                     }
  37.                 }
  38.             },
  39.             title: {
  40.                 text: 'Live random data'
  41.             },
  42.             xAxis: {
  43.                 type: 'datetime',
  44.                 tickPixelInterval: 150
  45.             },
  46.             yAxis: {
  47.                 title: {
  48.                     text: 'Value'
  49.                 },
  50.                 plotLines: [{
  51.                     value: 0,
  52.                     width: 1,
  53.                     color: '#808080'
  54.                 }]
  55.             },
  56.             tooltip: {
  57.                 formatter: function () {
  58.                     return '<b>' + this.series.name + '</b><br/>' +
  59.                         Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
  60.                         Highcharts.numberFormat(this.y, 2);
  61.                 }
  62.             },
  63.             legend: {
  64.                 enabled: false
  65.             },
  66.             exporting: {
  67.                 enabled: false
  68.             },
  69.             series: [{
  70.                 name: 'Random data',
  71.                 data: (function () {
  72.                     // generate an array of random data
  73.                     var data = [],
  74.                         time = (new Date()).getTime(),
  75.                         i;
  76.        
  77.                     for (i = -19; i <= 0; i += 1) {
  78.                        data.push({
  79.                            x: time + i * 1000,
  80.                            y: Math.random()
  81.                        });
  82.                    }
  83.                    return data;
  84.                }())
  85.            }]
  86.        });
  87.    });
  88. });
  89.         </script>
  90.     </head>
  91.     <body>
  92. <script src="./js/highcharts.js"></script>
  93. <script src="./js/modules/exporting.js"></script>
  94.  
  95. <div id="container" style="width: 310px; height: 400px;"></div>
  96.  
  97.     </body>
  98. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement