Вход Регистрация
Файл: wapxl.ru/top/amcharts/plugins/animate/examples/serial_line.html
Строк: 39
<?php
<!DOCTYPE html>
<
html>
  <
head>
    <
meta charset="utf-8" />

    <
style>
      
html, body {
        
width: 100%;
        
height: 100%;
        
margin: 0px;
      }

      
#chartdiv {
        
width: 100%;
        
height: 100%;
      }
    </
style>
  </
head>
  <
body>
    <
script src="http://www.amcharts.com/lib/3/amcharts.js"></script>
    <
script src="http://www.amcharts.com/lib/3/serial.js"></script>
    <
script src="http://www.amcharts.com/lib/3/themes/light.js"></script>
    <
script src="../animate.min.js"></script>

    <
div id="chartdiv"></div>

    <
script>
      var 
chart = AmCharts.makeChart("chartdiv", {
        
"type": "serial",
        
"theme": "light",
        
"dataProvider": generateChartData(),
        
"graphs": [{
          
"lineThickness": 2,
          
"valueField": "value",
          
"type": "smoothedLine"
        
}, {
          
"lineThickness": 2,
          
"valueField": "value2",
          
"type": "smoothedLine"
        
}],
        
"valueAxes": [{
          
"minimum": 0,
          
"maximum": 400
        
}],
        
"chartScrollbar": {},
        
"chartCursor": {},
        
"categoryAxis": {
          
"parseDates": true,
          
"minPeriod": "mm"
        
},
        
"zoomOutOnDataUpdate": false,
        
"categoryField": "date"
      
});


      function 
generateChartData() {
        var 
chartData = [];
        var 
firstDate = new Date( 2012, 0, 1 );
        
firstDate.setDate( firstDate.getDate() - 1000 );
        
firstDate.setHours( 0, Math.floor(Math.random() * 10), 0, 0 );

        for ( var 
i = 0; i < 100; i++ ) {
          var 
newDate = new Date( firstDate );
          
newDate.setHours( 0, i, 0, 0 );

          var 
a = Math.round( Math.random() * ( 40 + i ) ) + 100 + i;
          var 
b = Math.round( Math.random() * ( 40 + i ) ) + 100 + i;

          
chartData.push( {
            
date: newDate,
            
value: a,
            
value2: b
          
} );
        }

        return 
chartData;
      }


      function 
loop() {
        var 
data = generateChartData();

        
chart.animateData(data, {
          
duration: 1000,
          
complete: function () {
            
setTimeout(loop, 2000);
          }
        });
      }

      
chart.addListener("init", function () {
        
setTimeout(loop, 1000);
      });
    </
script>
  </
body>
</
html>
?>
Онлайн: 1
Реклама