Chart Line IV
Insert it in <head>
<!-- Choose one for Light Mode -->
<link id="themecss" rel="stylesheet" type="text/css" href="https://i-as.dev/devui/css/light/all.min.css" />
<!-- Choose one for Dark Mode -->
<link id="themecss" rel="stylesheet" type="text/css" href="https://i-as.dev/devui/css/dark/all.min.css" />
<script type="text/javascript" src="https://i-as.dev/devui/js/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="https://i-as.dev/devui/js/devui-all.min.js"></script>
Use Components
<body class="theme-light">
<div id="EURUSDChart" class="chart"></div>
<div id="GBPUSDChart" class="chart"></div>
<script type="text/javascript">
$(function() {
var EURUSD = new Array();
var GBPUSD = new Array();
$("#EURUSDChart").devuiChart({
theme: "light",
applyAnimation: false,
exportOptions: {
image: false,
print: false
},
tooltipSettings: {
enabled: false
},
seriesSettings: {
line: {
applyAnimation: false,
pointMark: {
enabled: false
}
}
},
axisX: {
min: 0,
max: 55
},
primaryHeader: {
text: "EURUSD"
},
dataSeries: [
{
seriesType: 'line',
collectionAlias: 'EURUSD',
data: EURUSD
}
]
});
$("#GBPUSDChart").devuiChart({
theme: "light",
applyAnimation: false,
exportOptions: {
image: false,
print: false
},
tooltipSettings: {
enabled: false
},
seriesSettings: {
line: {
applyAnimation: false,
pointMark: {
enabled: false
}
}
},
axisX: {
min: 0,
max: 55
},
primaryHeader: {
text: "GBPUSD"
},
dataSeries: [
{
seriesType: 'line',
collectionAlias: 'GBPUSD',
data: GBPUSD
}
]
});
setInterval(function () {
$.ajax({
url: '/devui/demo/data/forex-random.json',
dataType: 'json',
success: function (data) {
EURUSD[EURUSD.length] = parseFloat(data.ticks.EURUSD);
GBPUSD[GBPUSD.length] = parseFloat(data.ticks.GBPUSD);
if (EURUSD.length > 50) {
EURUSD = EURUSD.splice(1, 49);
}
if (GBPUSD.length > 50) {
GBPUSD = GBPUSD.splice(1, 49);
}
var container = $("#EURUSDChart").swidget();
if (container) {
container.destroy();
}
var container = $("#GBPUSDChart").swidget();
if (container) {
container.destroy();
}
$("#EURUSDChart").devuiChart({
theme: "light",
applyAnimation: false,
seriesSettings: {
line: {
applyAnimation: false,
pointMark: {
enabled: false
}
}
},
tooltipSettings: {
enabled: false
},
exportOptions: {
image: false,
print: false
},
axisX: {
min: 0,
max: 55
},
primaryHeader: {
text: "EURUSD"
},
dataSeries: [
{
seriesType: 'line',
collectionAlias: 'EURUSD',
data: EURUSD
}
]
});
$("#GBPUSDChart").devuiChart({
theme: "light",
applyAnimation: false,
seriesSettings: {
line: {
applyAnimation: false,
pointMark: {
enabled: false
}
}
},
tooltipSettings: {
enabled: false
},
exportOptions: {
image: false,
print: false
},
axisX: {
min: 0,
max: 55
},
primaryHeader: {
text: "GBPUSD"
},
dataSeries: [
{
seriesType: 'line',
collectionAlias: 'GBPUSD',
data: GBPUSD
}
]
});
}
});
}, 1000);
});
</script>
</body>