You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
251 lines
31 KiB
251 lines
31 KiB
4 years ago
|
var data = [], totalPoints = 110;
|
||
|
|
var updateInterval = 320;
|
||
|
|
var realtime = 'on';
|
||
|
|
|
||
|
|
$(function () {
|
||
|
|
//Real time ==========================================================================================
|
||
|
|
var plot = $.plot('#real_time_chart', [getRandomData()], {
|
||
|
|
series: {
|
||
|
|
shadowSize: 0,
|
||
|
|
color: 'rgb(0, 188, 212)'
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
borderColor: '#f3f3f3',
|
||
|
|
borderWidth: 1,
|
||
|
|
tickColor: '#f3f3f3'
|
||
|
|
},
|
||
|
|
lines: {
|
||
|
|
fill: true
|
||
|
|
},
|
||
|
|
yaxis: {
|
||
|
|
min: 0,
|
||
|
|
max: 100
|
||
|
|
},
|
||
|
|
xaxis: {
|
||
|
|
min: 0,
|
||
|
|
max: 100
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
function updateRealTime() {
|
||
|
|
plot.setData([getRandomData()]);
|
||
|
|
plot.draw();
|
||
|
|
|
||
|
|
var timeout;
|
||
|
|
if (realtime === 'on') {
|
||
|
|
timeout = setTimeout(updateRealTime, updateInterval);
|
||
|
|
} else {
|
||
|
|
clearTimeout(timeout);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
updateRealTime();
|
||
|
|
|
||
|
|
$('#realtime').on('change', function () {
|
||
|
|
realtime = this.checked ? 'on' : 'off';
|
||
|
|
updateRealTime();
|
||
|
|
});
|
||
|
|
//====================================================================================================
|
||
|
|
|
||
|
|
//Tracking ===========================================================================================
|
||
|
|
var sin = [], cos = [];
|
||
|
|
for (var i = 0; i < 14; i += 0.1) {
|
||
|
|
sin.push([i, Math.sin(i)]);
|
||
|
|
cos.push([i, Math.cos(i)]);
|
||
|
|
}
|
||
|
|
|
||
|
|
var trackingData = [
|
||
|
|
{
|
||
|
|
data: sin,
|
||
|
|
label: 'sin(x) = -0.00',
|
||
|
|
color: '#E91E63'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
data: cos,
|
||
|
|
label: 'cos(x) = -0.00',
|
||
|
|
color: '#00BCD4'
|
||
|
|
}
|
||
|
|
];
|
||
|
|
|
||
|
|
var trackingPlot = $.plot('#tracking_chart', trackingData, {
|
||
|
|
crosshair: {
|
||
|
|
mode: 'x'
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
hoverable: true,
|
||
|
|
autoHighlight: false,
|
||
|
|
borderColor: '#f3f3f3',
|
||
|
|
borderWidth: 1,
|
||
|
|
tickColor: '#f3f3f3'
|
||
|
|
},
|
||
|
|
yaxis: {
|
||
|
|
min: -1.2,
|
||
|
|
max: 1.2
|
||
|
|
}
|
||
|
|
});
|
||
|
|
|
||
|
|
var legends = $('#tracking_chart .legendLabel');
|
||
|
|
|
||
|
|
legends.each(function () {
|
||
|
|
$(this).css('width', $(this).width());
|
||
|
|
});
|
||
|
|
|
||
|
|
var updateLegendTimeout = null;
|
||
|
|
var latestPosition = null;
|
||
|
|
|
||
|
|
function updateLegend() {
|
||
|
|
updateLegendTimeout = null;
|
||
|
|
var pos = latestPosition;
|
||
|
|
|
||
|
|
var axes = trackingPlot.getAxes();
|
||
|
|
if (pos.x < axes.xaxis.min || pos.x > axes.xaxis.max ||
|
||
|
|
pos.y < axes.yaxis.min || pos.y > axes.yaxis.max) {
|
||
|
|
return;
|
||
|
|
}
|
||
|
|
|
||
|
|
var i, j, dataset = trackingPlot.getData();
|
||
|
|
for (i = 0; i < dataset.length; ++i) {
|
||
|
|
var series = dataset[i];
|
||
|
|
|
||
|
|
for (j = 0; j < series.data.length; ++j) {
|
||
|
|
if (series.data[j][0] > pos.x) {
|
||
|
|
break;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
var y, p1 = series.data[j - 1], p2 = series.data[j];
|
||
|
|
|
||
|
|
if (p1 == null) {
|
||
|
|
y = p2[1];
|
||
|
|
} else if (p2 == null) {
|
||
|
|
y = p1[1];
|
||
|
|
} else {
|
||
|
|
y = p1[1] + (p2[1] - p1[1]) * (pos.x - p1[0]) / (p2[0] - p1[0]);
|
||
|
|
}
|
||
|
|
|
||
|
|
legends.eq(i).text(series.label.replace(/=.*/, '= ' + y.toFixed(2)));
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
$('#tracking_chart').bind('plothover', function (event, pos, item) {
|
||
|
|
latestPosition = pos;
|
||
|
|
if (!updateLegendTimeout) {
|
||
|
|
updateLegendTimeout = setTimeout(updateLegend, 50);
|
||
|
|
}
|
||
|
|
});
|
||
|
|
//====================================================================================================
|
||
|
|
|
||
|
|
//MULTIPLE AXIS ======================================================================================
|
||
|
|
var oilprices = [[1167692400000, 61.05], [1167778800000, 58.32], [1167865200000, 57.35], [1167951600000, 56.31], [1168210800000, 55.55], [1168297200000, 55.64], [1168383600000, 54.02], [1168470000000, 51.88], [1168556400000, 52.99], [1168815600000, 52.99], [1168902000000, 51.21], [1168988400000, 52.24], [1169074800000, 50.48], [1169161200000, 51.99], [1169420400000, 51.13], [1169506800000, 55.04], [1169593200000, 55.37], [1169679600000, 54.23], [1169766000000, 55.42], [1170025200000, 54.01], [1170111600000, 56.97], [1170198000000, 58.14], [1170284400000, 58.14], [1170370800000, 59.02], [1170630000000, 58.74], [1170716400000, 58.88], [1170802800000, 57.71], [1170889200000, 59.71], [1170975600000, 59.89], [1171234800000, 57.81], [1171321200000, 59.06], [1171407600000, 58.00], [1171494000000, 57.99], [1171580400000, 59.39], [1171839600000, 59.39], [1171926000000, 58.07], [1172012400000, 60.07], [1172098800000, 61.14], [1172444400000, 61.39], [1172530800000, 61.46], [1172617200000, 61.79], [1172703600000, 62.00], [1172790000000, 60.07], [1173135600000, 60.69], [1173222000000, 61.82], [1173308400000, 60.05], [1173654000000, 58.91], [1173740400000, 57.93], [1173826800000, 58.16], [1173913200000, 57.55], [1173999600000, 57.11], [1174258800000, 56.59], [1174345200000, 59.61], [1174518000000, 61.69], [1174604400000, 62.28], [1174860000000, 62.91], [1174946400000, 62.93], [1175032800000, 64.03], [1175119200000, 66.03], [1175205600000, 65.87], [1175464800000, 64.64], [1175637600000, 64.38], [1175724000000, 64.28], [1175810400000, 64.28], [1176069600000, 61.51], [1176156000000, 61.89], [1176242400000, 62.01], [1176328800000, 63.85], [1176415200000, 63.63], [1176674400000, 63.61], [1176760800000, 63.10], [1176847200000, 63.13], [1176933600000, 61.83], [1177020000000, 63.38], [1177279200000, 64.58], [1177452000000, 65.84], [1177538400000, 65.06], [1177624800000, 66.46], [1177884000000, 64.40], [1178056800000, 63.68], [1178143200000, 63.19], [1178229600000, 61.93], [1178488800000, 61.47], [1178575200000, 61.55], [1178748000000, 61.81], [1178834400000, 62.37], [1179093600000, 62.46], [1179180000000, 63.17], [1179266400000, 62.55], [1179352800000, 64.94], [1179698400000, 66.27], [1179784800000, 65.50], [1179871200000, 65.77], [1179957600000, 64.18], [1180044000000, 65.20], [1180389600000, 63.15], [1180476000000, 63.49], [1180562400000, 65.08], [1180908000000, 66.30], [1180994400000, 65.96], [1181167200000, 66.93], [1181253600000, 65.98], [1181599200000, 65.35], [1181685600000, 66.26], [1181858400000, 68.00], [1182117600000, 69.09], [1182204000000, 69.10], [1182290400000, 68.19], [1182376800000, 68.19], [1182463200000, 69.14], [1182722400000, 68.19], [1182808800000, 67.77], [1182895200000, 68.97], [1182981600000, 69.57], [1183068000000, 70.68], [1183327200000, 71.09], [1183413600000, 70.92], [1183586400000, 71.81], [1183672800000, 72.81], [1183932000000, 72.19], [1184018400000, 72.56], [1184191200000, 72.50], [1184277600000, 74.15], [1184623200000, 75.05], [1184796000000, 75.92], [1184882400000, 75.57], [1185141600000, 74.89], [1185228000000, 73.56], [1185314400000, 75.57], [1185400800000, 74.95], [1185487200000, 76.83], [1185832800000, 78.21], [1185919200000, 76.53], [1186005600000, 76.86], [1186092000000, 76.00], [1186437600000, 71.59], [1186696800000, 71.47], [1186956000000, 71.62], [1187042400000, 71.00], [1187301600000, 71.98], [1187560800000, 71.12], [1187647200000, 69.47], [1187733600000, 69.26], [1187820000000, 69.83], [1187906400000, 71.09], [1188165600000, 71.73], [1188338400000, 73.36], [1188511200000, 74.04], [1188856800000, 76.30], [1189116000000, 77.49], [1189461600000, 78.23], [1189548000000, 79.91], [1189634400000, 80.09], [1189720800000, 79.10], [1189980000000, 80.57], [1190066400000, 81.93], [1190239200000, 83.32], [1190325600000, 81.62], [1190584800000, 80.95], [1190671200000, 79.53], [1190757600000, 80.30], [1190844000000, 82.88], [1190930400000, 81.66], [1191189600000, 80.24], [1191276000000, 80.05], [1191362400000, 79.94], [1191448800000, 81.44], [1191535200000, 81.22], [1191794400000, 79.02], [1191880800000, 80
|
||
|
|
|
||
|
|
var exchangerates = [[1167606000000, 0.7580], [1167692400000, 0.7580], [1167778800000, 0.75470], [1167865200000, 0.75490], [1167951600000, 0.76130], [1168038000000, 0.76550], [1168124400000, 0.76930], [1168210800000, 0.76940], [1168297200000, 0.76880], [1168383600000, 0.76780], [1168470000000, 0.77080], [1168556400000, 0.77270], [1168642800000, 0.77490], [1168729200000, 0.77410], [1168815600000, 0.77410], [1168902000000, 0.77320], [1168988400000, 0.77270], [1169074800000, 0.77370], [1169161200000, 0.77240], [1169247600000, 0.77120], [1169334000000, 0.7720], [1169420400000, 0.77210], [1169506800000, 0.77170], [1169593200000, 0.77040], [1169679600000, 0.7690], [1169766000000, 0.77110], [1169852400000, 0.7740], [1169938800000, 0.77450], [1170025200000, 0.77450], [1170111600000, 0.7740], [1170198000000, 0.77160], [1170284400000, 0.77130], [1170370800000, 0.76780], [1170457200000, 0.76880], [1170543600000, 0.77180], [1170630000000, 0.77180], [1170716400000, 0.77280], [1170802800000, 0.77290], [1170889200000, 0.76980], [1170975600000, 0.76850], [1171062000000, 0.76810], [1171148400000, 0.7690], [1171234800000, 0.7690], [1171321200000, 0.76980], [1171407600000, 0.76990], [1171494000000, 0.76510], [1171580400000, 0.76130], [1171666800000, 0.76160], [1171753200000, 0.76140], [1171839600000, 0.76140], [1171926000000, 0.76070], [1172012400000, 0.76020], [1172098800000, 0.76110], [1172185200000, 0.76220], [1172271600000, 0.76150], [1172358000000, 0.75980], [1172444400000, 0.75980], [1172530800000, 0.75920], [1172617200000, 0.75730], [1172703600000, 0.75660], [1172790000000, 0.75670], [1172876400000, 0.75910], [1172962800000, 0.75820], [1173049200000, 0.75850], [1173135600000, 0.76130], [1173222000000, 0.76310], [1173308400000, 0.76150], [1173394800000, 0.760], [1173481200000, 0.76130], [1173567600000, 0.76270], [1173654000000, 0.76270], [1173740400000, 0.76080], [1173826800000, 0.75830], [1173913200000, 0.75750], [1173999600000, 0.75620], [1174086000000, 0.7520], [1174172400000, 0.75120], [1174258800000, 0.75120], [1174345200000, 0.75170], [1174431600000, 0.7520], [1174518000000, 0.75110], [1174604400000, 0.7480], [1174690800000, 0.75090], [1174777200000, 0.75310], [1174860000000, 0.75310], [1174946400000, 0.75270], [1175032800000, 0.74980], [1175119200000, 0.74930], [1175205600000, 0.75040], [1175292000000, 0.750], [1175378400000, 0.74910], [1175464800000, 0.74910], [1175551200000, 0.74850], [1175637600000, 0.74840], [1175724000000, 0.74920], [1175810400000, 0.74710], [1175896800000, 0.74590], [1175983200000, 0.74770], [1176069600000, 0.74770], [1176156000000, 0.74830], [1176242400000, 0.74580], [1176328800000, 0.74480], [1176415200000, 0.7430], [1176501600000, 0.73990], [1176588000000, 0.73950], [1176674400000, 0.73950], [1176760800000, 0.73780], [1176847200000, 0.73820], [1176933600000, 0.73620], [1177020000000, 0.73550], [1177106400000, 0.73480], [1177192800000, 0.73610], [1177279200000, 0.73610], [1177365600000, 0.73650], [1177452000000, 0.73620], [1177538400000, 0.73310], [1177624800000, 0.73390], [1177711200000, 0.73440], [1177797600000, 0.73270], [1177884000000, 0.73270], [1177970400000, 0.73360], [1178056800000, 0.73330], [1178143200000, 0.73590], [1178229600000, 0.73590], [1178316000000, 0.73720], [1178402400000, 0.7360], [1178488800000, 0.7360], [1178575200000, 0.7350], [1178661600000, 0.73650], [1178748000000, 0.73840], [1178834400000, 0.73950], [1178920800000, 0.74130], [1179007200000, 0.73970], [1179093600000, 0.73960], [1179180000000, 0.73850], [1179266400000, 0.73780], [1179352800000, 0.73660], [1179439200000, 0.740], [1179525600000, 0.74110], [1179612000000, 0.74060], [1179698400000, 0.74050], [1179784800000, 0.74140], [1179871200000, 0.74310], [1179957600000, 0.74310], [1180044000000, 0.74380], [1180130400000, 0.74430], [1180216800000, 0.74430], [1180303200000, 0.74430], [1180389600000, 0.74340], [1180476000000, 0.74290], [1180562400000, 0.74420], [1180648800000, 0.7440], [1180735200000, 0.74390], [1180821600000, 0.74370], [1180908000000, 0.74370], [1180994400000, 0.74290], [1181080800000, 0.74030], [118116720
|
||
|
|
|
||
|
|
function euroFormatter(v, axis) {
|
||
|
|
return v.toFixed(axis.tickDecimals) + '€';
|
||
|
|
}
|
||
|
|
|
||
|
|
$.plot('#multiple_axis_chart', [
|
||
|
|
{ data: oilprices, label: 'Oil price ($)', color: '#E91E63' },
|
||
|
|
{ data: exchangerates, label: 'USD/EUR exchange rate', yaxis: 2, color: '#00BCD4' }
|
||
|
|
], {
|
||
|
|
xaxes: [{ mode: 'time' }],
|
||
|
|
yaxes: [{ min: 0 }, {
|
||
|
|
alignTicksWithAxis: 1,
|
||
|
|
position: 'right',
|
||
|
|
tickFormatter: euroFormatter
|
||
|
|
}],
|
||
|
|
grid: {
|
||
|
|
hoverable: true,
|
||
|
|
autoHighlight: false,
|
||
|
|
borderColor: '#f3f3f3',
|
||
|
|
borderWidth: 1,
|
||
|
|
tickColor: '#f3f3f3'
|
||
|
|
},
|
||
|
|
legend: { position: 'sw' }
|
||
|
|
});
|
||
|
|
//====================================================================================================
|
||
|
|
|
||
|
|
//BAR CHART ==========================================================================================
|
||
|
|
var barChartData = [];
|
||
|
|
for (var i = 0; i <= 10; i += 1) {
|
||
|
|
barChartData.push([i, parseInt(Math.random() * 30)]);
|
||
|
|
}
|
||
|
|
|
||
|
|
$.plot('#bar_chart', [barChartData], {
|
||
|
|
series: {
|
||
|
|
stack: 0,
|
||
|
|
lines: {
|
||
|
|
show: false,
|
||
|
|
fill: true,
|
||
|
|
steps: false
|
||
|
|
},
|
||
|
|
bars: {
|
||
|
|
show: true,
|
||
|
|
barWidth: 0.6
|
||
|
|
},
|
||
|
|
color: '#00BCD4'
|
||
|
|
},
|
||
|
|
grid: {
|
||
|
|
hoverable: true,
|
||
|
|
autoHighlight: false,
|
||
|
|
borderColor: '#f3f3f3',
|
||
|
|
borderWidth: 1,
|
||
|
|
tickColor: '#f3f3f3'
|
||
|
|
}
|
||
|
|
});
|
||
|
|
//====================================================================================================
|
||
|
|
|
||
|
|
//PIE CHART ==========================================================================================
|
||
|
|
var pieChartData = [], pieChartSeries = 4;
|
||
|
|
var pieChartColors = ['#E91E63', '#03A9F4', '#FFC107', '#009688'];
|
||
|
|
var pieChartDatas = [45, 17, 28, 10];
|
||
|
|
|
||
|
|
for (var i = 0; i < pieChartSeries; i++) {
|
||
|
|
pieChartData[i] = {
|
||
|
|
label: 'Serie - ' + (i + 1),
|
||
|
|
data: pieChartDatas[i],
|
||
|
|
color: pieChartColors[i]
|
||
|
|
}
|
||
|
|
}
|
||
|
|
$.plot('#pie_chart', pieChartData, {
|
||
|
|
series: {
|
||
|
|
pie: {
|
||
|
|
show: true,
|
||
|
|
radius: 1,
|
||
|
|
label: {
|
||
|
|
show: true,
|
||
|
|
radius: 3 / 4,
|
||
|
|
formatter: labelFormatter,
|
||
|
|
background: {
|
||
|
|
opacity: 0.5
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
legend: {
|
||
|
|
show: false
|
||
|
|
}
|
||
|
|
});
|
||
|
|
function labelFormatter(label, series) {
|
||
|
|
return '<div style="font-size:8pt; text-align:center; padding:2px; color:white;">' + label + '<br/>' + Math.round(series.percent) + '%</div>';
|
||
|
|
}
|
||
|
|
//====================================================================================================
|
||
|
|
});
|
||
|
|
|
||
|
|
function getRandomData() {
|
||
|
|
if (data.length > 0) data = data.slice(1);
|
||
|
|
|
||
|
|
while (data.length < totalPoints) {
|
||
|
|
var prev = data.length > 0 ? data[data.length - 1] : 50, y = prev + Math.random() * 10 - 5;
|
||
|
|
if (y < 0) { y = 0; } else if (y > 100) { y = 100; }
|
||
|
|
|
||
|
|
data.push(y);
|
||
|
|
}
|
||
|
|
|
||
|
|
var res = [];
|
||
|
|
for (var i = 0; i < data.length; ++i) {
|
||
|
|
res.push([i, data[i]])
|
||
|
|
}
|
||
|
|
|
||
|
|
return res;
|
||
|
|
}
|