Subversion Repositories php-qbpwcf

Rev

Rev 23 | Details | Compare with Previous | Last modification | View Log | RSS feed

Rev Author Line No. Line
23 liveuser 1 
<!DOCTYPE html>
2 
<html>
3 
  <head>
4 
    <meta charset="utf-8" />
5 
 
6 
    <style>
7 
      html, body {
8 
        width: 100%;
9 
        height: 100%;
10 
        margin: 0px;
11 
      }
12 
 
13 
      #chartdiv {
14 
        width: 100%;
15 
        height: 100%;
16 
      }
17 
    </style>
18 
  </head>
19 
  <body>
20 
    <script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
21 
    <script src="http://www.amcharts.com/lib/3/serial.js"></script>
22 
    <script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
23 
    <script src="../animate.min.js"></script>
24 
 
25 
    <div id="chartdiv"></div>
26 
 
27 
    <script>
28 
      var chart = AmCharts.makeChart("chartdiv", {
29 
        "type": "serial",
30 
        "theme": "light",
31 
        "dataProvider": generateChartData(),
32 
        "graphs": [{
33 
          "lineThickness": 2,
34 
          "valueField": "value",
35 
          "type": "smoothedLine"
36 
        }, {
37 
          "lineThickness": 2,
38 
          "valueField": "value2",
39 
          "type": "smoothedLine"
40 
        }],
41 
        "valueAxes": [{
42 
          "minimum": 0,
43 
          "maximum": 400
44 
        }],
45 
        "chartScrollbar": {},
46 
        "chartCursor": {},
47 
        "categoryAxis": {
48 
          "parseDates": true,
49 
          "minPeriod": "mm"
50 
        },
51 
        "zoomOutOnDataUpdate": false,
52 
        "categoryField": "date"
53 
      });
54 
 
55 
 
56 
      function generateChartData() {
57 
        var chartData = [];
58 
        var firstDate = new Date( 2012, 0, 1 );
59 
        firstDate.setDate( firstDate.getDate() - 1000 );
60 
        firstDate.setHours( 0, Math.floor(Math.random() * 10), 0, 0 );
61 
 
62 
        for ( var i = 0; i < 100; i++ ) {
63 
          var newDate = new Date( firstDate );
64 
          newDate.setHours( 0, i, 0, 0 );
65 
 
66 
          var a = Math.round( Math.random() * ( 40 + i ) ) + 100 + i;
67 
          var b = Math.round( Math.random() * ( 40 + i ) ) + 100 + i;
68 
 
69 
          chartData.push( {
70 
            date: newDate,
71 
            value: a,
72 
            value2: b
73 
          } );
74 
        }
75 
 
76 
        return chartData;
77 
      }
78 
 
79 
 
80 
      function loop() {
81 
        var data = generateChartData();
82 
 
83 
        chart.animateData(data, {
84 
          duration: 1000,
85 
          complete: function () {
86 
            setTimeout(loop, 2000);
87 
          }
88 
        });
89 
      }
90 
 
91 
      chart.addListener("init", function () {
92 
        setTimeout(loop, 1000);
93 
      });
94 
    </script>
95 
  </body>
96 
</html>