351 lines
9.2 KiB
JavaScript
351 lines
9.2 KiB
JavaScript
var simple_color_scale = ["#e41a1c", "#377eb8", "#4daf4a", "#984ea3", "#ff7f00", "#ffff33", "#a65628", "#f781bf"];
|
|
var color_scale = ['#a6cee3','#1f78b4','#b2df8a','#33a02c','#fb9a99','#e31a1c','#fdbf6f','#ff7f00','#cab2d6','#6a3d9a','#ffff99','#b15928'];
|
|
|
|
function drawCards(data){
|
|
var graph_data = [] ;
|
|
var json_data = data.card;
|
|
var surf = document.getElementById("surfacecard");
|
|
var down = document.getElementById("downholecard");
|
|
|
|
var surfaceCardData = [{
|
|
label: 'Surface Card',
|
|
fill: false,
|
|
data: [],
|
|
lineTension: 0.05,
|
|
borderColor: color_scale[2],
|
|
pointRadius: 2
|
|
}];
|
|
|
|
var downholeCardData = [{
|
|
label: 'Downhole Card',
|
|
fill: false,
|
|
data: [],
|
|
lineTension: 0.05,
|
|
borderColor: color_scale[1],
|
|
pointRadius: 2
|
|
}];
|
|
|
|
for (var i = 0; i < json_data['surface_position'].length; i++){
|
|
surfaceCardData[0].data.push({
|
|
x: json_data['surface_position'][i],
|
|
y: json_data['surface_load'][i]
|
|
});
|
|
}
|
|
|
|
for (var i = 0; i < json_data['downhole_position'].length; i++){
|
|
downholeCardData[0].data.push({
|
|
x: json_data['downhole_position'][i],
|
|
y: json_data['downhole_load'][i]
|
|
});
|
|
}
|
|
|
|
var surfaceChart = new Chart(surf, {
|
|
type: 'line',
|
|
responsive: true,
|
|
data: {
|
|
datasets: surfaceCardData
|
|
},
|
|
options: {
|
|
scales: {
|
|
xAxes: [{
|
|
type: 'linear',
|
|
position: 'bottom'
|
|
}]
|
|
},
|
|
legend: {
|
|
display: false
|
|
}
|
|
}
|
|
});
|
|
|
|
var downholeChart = new Chart(down, {
|
|
type: 'line',
|
|
responsive: true,
|
|
data: {
|
|
datasets: downholeCardData
|
|
},
|
|
options: {
|
|
scales: {
|
|
xAxes: [{
|
|
type: 'linear',
|
|
position: 'bottom'
|
|
}]
|
|
},
|
|
legend: {
|
|
display: false
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function drawChart(data){
|
|
if (typeof(scatterChart) != "undefined"){
|
|
console.log("Destroying existing chart");
|
|
scatterChart.destroy();
|
|
}
|
|
var graph_data = [] ;
|
|
var json_data = data.values;
|
|
var ctx = document.getElementById("valueChart");
|
|
|
|
var color_index = 0;
|
|
|
|
for (x in data.values){
|
|
var tagdata = data.values[x];
|
|
var newObj = {
|
|
label: x,
|
|
fill: false,
|
|
data: [],
|
|
lineTension: 0.05,
|
|
borderColor: color_scale[color_index % color_scale.length],
|
|
pointRadius: 2
|
|
};
|
|
|
|
for (var j = 0; j < tagdata.values.length; j++){
|
|
newObj.data.push({
|
|
x: tagdata.values[j].timestamp,
|
|
y: tagdata.values[j].tagvalue
|
|
});
|
|
}
|
|
graph_data.push(newObj);
|
|
color_index++;
|
|
}
|
|
|
|
scatterChart = new Chart(ctx, {
|
|
type: 'line',
|
|
responsive: true,
|
|
data: {
|
|
datasets: graph_data
|
|
},
|
|
options: {
|
|
scales: {
|
|
xAxes: [{
|
|
type: 'time',
|
|
position: 'bottom'
|
|
}]
|
|
},
|
|
legend: {
|
|
labels: {
|
|
boxWidth: 20
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
function drawSingleGraph(data){
|
|
if (typeof(scatterChart) != "undefined"){
|
|
console.log("Destroying existing chart");
|
|
scatterChart.destroy();
|
|
}
|
|
|
|
var tag = data.tag[data.tagname];
|
|
console.log(tag);
|
|
|
|
var graph_data = [];
|
|
var ctx = document.getElementById("myChart");
|
|
var color_index = 0;
|
|
|
|
// Current Values
|
|
var currentValues = {
|
|
label: "Value",
|
|
fill: false,
|
|
data: [],
|
|
lineTension: 0.05,
|
|
borderColor: color_scale[color_index % color_scale.length]
|
|
}
|
|
|
|
for (var i = 0; i < tag.values.length; i++){
|
|
currentValues.data.push({x: tag.values[i].timestamp, y: tag.values[i].tagvalue});
|
|
}
|
|
|
|
graph_data.push(currentValues)
|
|
color_index++;
|
|
|
|
// Max Values
|
|
var maxValues = {
|
|
label: "Max",
|
|
fill: false,
|
|
data: [],
|
|
lineTension: 0.05,
|
|
borderColor: color_scale[color_index % color_scale.length]
|
|
}
|
|
|
|
for (var i = 0; i < tag.maxes.length; i++){
|
|
maxValues.data.push({x: tag.maxes[i].timestamp, y: tag.maxes[i].maxValue});
|
|
}
|
|
|
|
graph_data.push(maxValues)
|
|
color_index++;
|
|
|
|
// Min Values
|
|
var minValues = {
|
|
label: "Min",
|
|
fill: false,
|
|
data: [],
|
|
lineTension: 0.05,
|
|
borderColor: color_scale[color_index % color_scale.length]
|
|
}
|
|
|
|
for (var i = 0; i < tag.mins.length; i++){
|
|
minValues.data.push({x: tag.mins[i].timestamp, y: tag.mins[i].maxValue});
|
|
}
|
|
|
|
graph_data.push(minValues)
|
|
color_index++;
|
|
|
|
// Average Values
|
|
var averageValues = {
|
|
label: "Average",
|
|
fill: false,
|
|
data: [],
|
|
lineTension: 0.05,
|
|
borderColor: color_scale[color_index % color_scale.length]
|
|
}
|
|
|
|
for (var i = 0; i < tag.averages.length; i++){
|
|
averageValues.data.push({x: tag.averages[i].timestamp, y: tag.averages[i].maxValue});
|
|
}
|
|
|
|
graph_data.push(averageValues)
|
|
color_index++;
|
|
|
|
// Total Values
|
|
var totalValues = {
|
|
label: "Total",
|
|
fill: false,
|
|
data: [],
|
|
lineTension: 0.05,
|
|
borderColor: color_scale[color_index % color_scale.length]
|
|
}
|
|
|
|
for (var i = 0; i < tag.totals.length; i++){
|
|
totalValues.data.push({x: tag.totals[i].timestamp, y: tag.totals[i].maxValue});
|
|
}
|
|
|
|
graph_data.push(totalValues)
|
|
color_index++;
|
|
|
|
console.log(graph_data);
|
|
|
|
scatterChart = new Chart(ctx, {
|
|
type: 'line',
|
|
data: {
|
|
datasets: graph_data
|
|
},
|
|
options: {
|
|
scales: {
|
|
xAxes: [{
|
|
type: 'time',
|
|
position: 'bottom'
|
|
}]
|
|
}
|
|
}
|
|
});
|
|
}
|
|
|
|
|
|
function drawAllSlider(data){
|
|
|
|
var date_min = new Date(Date.parse(data.first_date));
|
|
var date_max = new Date(Date.parse(data.last_date));
|
|
console.log(data);
|
|
|
|
var min_val = date_min/1000;
|
|
var max_val = date_max/1000;
|
|
|
|
var endD = new Date();
|
|
var dummyDate = new Date();
|
|
var startD = new Date(dummyDate.setDate(endD.getDate() - 2));
|
|
|
|
|
|
var start_date = startD/1000;
|
|
$('#slider-start').html(startD.toString());
|
|
if(start_date < min_val){
|
|
start_date = min_val;
|
|
$('#slider-start').html(date_min.toString());
|
|
}
|
|
|
|
var end_date = endD/1000;
|
|
$('#slider-end').html(startD.toString());
|
|
if(end_date > max_val){
|
|
end_date = max_val;
|
|
$('#slider-end').html(date_max.toString());
|
|
}
|
|
|
|
$("#slider-range").slider({
|
|
range: true,
|
|
min: min_val,
|
|
max: max_val,
|
|
step: 10,
|
|
values: [start_date, end_date],
|
|
slide: function (e, ui) {
|
|
var dt_cur_from = new Date(ui.values[0]*1000); //.format("yyyy-mm-dd hh:ii:ss");
|
|
$('#slider-start').html(dt_cur_from.toString());
|
|
|
|
var dt_cur_to = new Date(ui.values[1]*1000); //.format("yyyy-mm-dd hh:ii:ss");
|
|
$('#slider-end').html(dt_cur_to.toString());
|
|
},
|
|
stop: function(e, ui){
|
|
var startD = new Date(ui.values[0]*1000);
|
|
var endD = new Date(ui.values[1]*1000);
|
|
$.ajax({
|
|
dataType: 'json',
|
|
url:"/json/values/between/" + startD.toISOString() + "/" + endD.toISOString(),
|
|
success: drawChart
|
|
});
|
|
}
|
|
});
|
|
}
|
|
|
|
function drawSingleSlider(data){
|
|
|
|
var date_min = new Date(Date.parse(data.first_date));
|
|
var date_max = new Date(Date.parse(data.last_date));
|
|
console.log(data);
|
|
var min_val = date_min/1000;
|
|
var max_val = date_max/1000;
|
|
|
|
var endD = new Date();
|
|
var dummyDate = new Date();
|
|
var startD = new Date(dummyDate.setDate(endD.getDate() - 2));
|
|
|
|
|
|
var start_date = startD/1000;
|
|
$('#slider-start').html(startD.toString());
|
|
if(start_date < min_val){
|
|
start_date = min_val;
|
|
$('#slider-start').html(date_min.toString());
|
|
}
|
|
|
|
var end_date = endD/1000;
|
|
$('#slider-end').html(startD.toString());
|
|
if(end_date > max_val){
|
|
end_date = max_val;
|
|
$('#slider-end').html(date_max.toString());
|
|
}
|
|
|
|
$("#slider-range").slider({
|
|
range: true,
|
|
min: min_val,
|
|
max: max_val,
|
|
step: 10,
|
|
values: [start_date, end_date],
|
|
slide: function (e, ui) {
|
|
var dt_cur_from = new Date(ui.values[0]*1000); //.format("yyyy-mm-dd hh:ii:ss");
|
|
$('#slider-start').html(dt_cur_from.toString());
|
|
|
|
var dt_cur_to = new Date(ui.values[1]*1000); //.format("yyyy-mm-dd hh:ii:ss");
|
|
$('#slider-end').html(dt_cur_to.toString());
|
|
},
|
|
stop: function(e, ui){
|
|
var startD = new Date(ui.values[0]*1000);
|
|
var endD = new Date(ui.values[1]*1000);
|
|
$.ajax({
|
|
dataType: 'json',
|
|
url: "/json/values/tag/" + tagName + "/between/" + startD.toISOString() + "/" + endD.toISOString(),
|
|
success: drawSingleGraph
|
|
});
|
|
}
|
|
});
|
|
}
|