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 
          "valueField": "value",
34 
          "type": "column",
35 
          "fillAlphas": 1,
36 
          "alphaField": "alpha1"
37 
        }, {
38 
          "valueField": "value2",
39 
          "fillAlphas": 1,
40 
          "type": "column",
41 
          "alphaField": "alpha2"
42 
        }],
43 
        "valueAxes": [{
44 
          "minimum": 0,
45 
          "maximum": 400
46 
        }],
47 
        "chartCursor": {},
48 
        "categoryAxis": {
49 
          "parseDates": true,
50 
          "minPeriod": "mm"
51 
        },
52 
        "zoomOutOnDataUpdate": false,
53 
        "categoryField": "date"
54 
      });
55 
 
56 
 
57 
      function generateChartData() {
58 
        var chartData = [];
59 
        var firstDate = new Date( 2012, 0, 1 );
60 
        firstDate.setDate( firstDate.getDate() - 1000 );
61 
        firstDate.setHours( 0, Math.floor(Math.random() * 10), 0, 0 );
62 
 
63 
        for ( var i = 0; i < 10; i++ ) {
64 
          var newDate = new Date( firstDate );
65 
          newDate.setHours( 0, i, 0, 0 );
66 
 
67 
          var a = Math.round( Math.random() * ( 200 + i ) ) + 100 + i;
68 
          var b = Math.round( Math.random() * ( 200 + i ) ) + 100 + i;
69 
 
70 
          chartData.push( {
71 
            date: newDate,
72 
            value: a,
73 
            value2: b,
74 
            alpha1: (Math.random() < 0.5 ? 0 : 1),
75 
            alpha2: (Math.random() < 0.5 ? 0 : 1)
76 
          } );
77 
        }
78 
 
79 
        return chartData;
80 
      }
81 
 
82 
 
83 
      function loop() {
84 
        var data = generateChartData();
85 
 
86 
        chart.animateData(data, {
87 
          duration: 1000,
88 
          complete: function () {
89 
            setTimeout(loop, 2000);
90 
          }
91 
        });
92 
      }
93 
 
94 
      chart.addListener("init", function () {
95 
        setTimeout(loop, 1000);
96 
      });
97 
    </script>
98 
  </body>
99 
</html>