202 строки
6.0 KiB
HTML
202 строки
6.0 KiB
HTML
<!DOCTYPE html>
|
|
<html xmlns="http://www.w3.org/1999/xhtml">
|
|
<head>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<link href="../content/bootstrap.min.css" rel="stylesheet">
|
|
<link href="../content/ejthemes/default-theme/ej.web.all.min.css" rel="stylesheet" />
|
|
<link href="../content/default.css" rel="stylesheet" />
|
|
<link href="../content/default-responsive.css" rel="stylesheet" />
|
|
<!--[if lt IE 9]>
|
|
<script src="../scripts/jquery-1.11.3.min.js" type="text/javascript"></script>
|
|
<!--<![endif]-->
|
|
<!--[if gte IE 9]><!-->
|
|
<script src="../scripts/jquery-3.4.1.min.js" type="text/javascript"></script>
|
|
<!--<![endif]-->
|
|
<script src="../scripts/ej.web.all.min.js" type="text/javascript"></script>
|
|
<script src="../scripts/properties.js" type="text/javascript"></script>
|
|
</head>
|
|
<body>
|
|
<div class="content-container-fluid">
|
|
<div class="row">
|
|
<div class="cols-sample-area">
|
|
<div id="verticalchart"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/javascript" language="javascript">
|
|
$(function ()
|
|
{
|
|
$("#verticalchart").ejChart(
|
|
{
|
|
rowDefinitions:
|
|
[
|
|
{
|
|
rowHeight: 100,
|
|
lineColor: "gray",
|
|
lineWidth: 0,
|
|
unit: 'percentage'
|
|
}
|
|
],
|
|
columnDefinitions:
|
|
[
|
|
{
|
|
columnWidth: 50,
|
|
lineColor: "blue",
|
|
lineWidth: 0,
|
|
unit: 'percentage'
|
|
},
|
|
{
|
|
columnWidth: 50,
|
|
lineColor: "gray",
|
|
lineWidth: 1,
|
|
unit: 'percentage'
|
|
}
|
|
|
|
],
|
|
//Initializing Primary X Axis
|
|
primaryXAxis:
|
|
{
|
|
majorGridLines: { visible: false },
|
|
valueType: 'datetime',
|
|
title:{text:"Time(sec)"},
|
|
labelFormat:'mm:ss'
|
|
},
|
|
|
|
//Initializing Primary Y Axis
|
|
primaryYAxis:
|
|
{
|
|
majorGridLines: { visible: false },
|
|
title: { text: "Velocity(m/s)" },
|
|
plotOffset: 80,
|
|
range:{min:-15, max:15,interval:5}
|
|
},
|
|
axes:
|
|
[
|
|
|
|
{
|
|
columnIndex: "1",
|
|
name: 'yAxis',
|
|
plotOffset: 80,
|
|
majorGridLines: { visible: false },
|
|
range:{min:-15, max:15,interval:5},
|
|
title: { text: "Velocity(m/s)", visible: true }
|
|
}
|
|
],
|
|
//Initializing Series
|
|
series:
|
|
[
|
|
{
|
|
type: 'line',
|
|
isTransposed: true,
|
|
name:"Indonesia",
|
|
enableAnimation: false,
|
|
fill: "#E46455", opacity:0.8
|
|
},
|
|
{
|
|
type: 'line',
|
|
name:"Japan",
|
|
isTransposed:true,
|
|
enableAnimation: false,
|
|
yAxisName: 'yAxis',
|
|
opacity:0.8
|
|
}
|
|
],
|
|
load: 'onchartload',
|
|
isResponsive: true,
|
|
title: { text: "Seismograph comparison of two countries" },
|
|
background: "transparent",
|
|
size: { height: "600" },
|
|
legend: { visible: true, position: 'top' }
|
|
});
|
|
});
|
|
|
|
var chartobj;
|
|
var intervalId;
|
|
var count = 0;
|
|
|
|
function OnRefresh()
|
|
{
|
|
if(chartobj.model){
|
|
count += 2;
|
|
AddPoint(chartobj.model.series[0], count);
|
|
AddPoint(chartobj.model.series[1], count);
|
|
$("#verticalchart").ejChart("redraw");
|
|
} else { clearInterval(intervalId);}
|
|
}
|
|
|
|
function onchartload(sender)
|
|
{
|
|
loadTheme(sender);
|
|
for(var i=11;i<50;i=i+1)
|
|
{
|
|
AddPoint(sender.model.series[0],count);
|
|
AddPoint(sender.model.series[1],count);
|
|
count++;
|
|
}
|
|
chartobj = this;
|
|
|
|
intervalId = window.setInterval(OnRefresh, 10);
|
|
}
|
|
|
|
function AddPoint(series, count)
|
|
{
|
|
if (series.points == undefined)
|
|
series.points = [];
|
|
series.points[series.points.length] = { x: new Date(2015, 8, 26,08,39,count), y: getRandomNum(series) };
|
|
}
|
|
|
|
function getRandomNum(series)
|
|
{
|
|
var value;
|
|
if (count <= 50) {
|
|
if(series.name=="Indonesia")
|
|
value = Math.floor((Math.random() * (3 - (-3) + 1)) - 3);
|
|
else
|
|
value = Math.floor((Math.random() * (2 - (-2) + 1)) - 2);
|
|
}
|
|
else if (count <= 100)
|
|
{
|
|
if (series.name == "Indonesia")
|
|
value = Math.floor((Math.random() * (9 - (-9) + 1)) - 9);
|
|
else
|
|
value = Math.floor((Math.random() * (9 - (-9) + 1)) - 9);
|
|
|
|
}
|
|
else if (count <= 150) {
|
|
if (series.name == "Indonesia")
|
|
value = Math.floor((Math.random() * (6 - (-7) + 1)) - 7);
|
|
else
|
|
value = Math.floor((Math.random() * (7 - (-6) + 1)) - 6);
|
|
}
|
|
else if (count <= 220) {
|
|
if (series.name == "Indonesia")
|
|
value = Math.floor((Math.random() * (2 - (-3) + 1)) - 3);
|
|
else
|
|
value = Math.floor((Math.random() * (3 - (-2) + 1)) - 2);
|
|
}
|
|
else if (count <= 270) {
|
|
if (series.name == "Indonesia")
|
|
value = Math.floor((Math.random() * (1 - (-2) + 1)) - 2);
|
|
else
|
|
value = Math.floor((Math.random() * (2 - (-2) + 1)) - 2);
|
|
}
|
|
else if (count <= 320) {
|
|
if (series.name == "Indonesia")
|
|
value = Math.floor((Math.random() * (0 - (0) + 1)) - 0);
|
|
else
|
|
value = Math.floor((Math.random() * (0 - (0) + 1)) - 0);
|
|
}
|
|
else {
|
|
|
|
clearInterval(intervalId);
|
|
|
|
}
|
|
|
|
return value;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|
|
|
|
|