Chart
Chart, mimik sayfalarında seçili dikdörtgen nesnesi içerisinde grafik çizilmesini sağlar.
Detaylı bilgi için https://www.chartjs.org
return {xAxes : xAxes, dataset: data, type : 'line', options : options};Examples
function liningChart2(furnace) {
var view = ins.getVariableValue("F"+furnace+"_LiningView").value;
var liningDB = ins.getGlobalObject("F"+furnace+"_LiningDB");
var FreqMax = ins.getVariableValue("CONF_F"+furnace+"_FreqMax").value;
var FreqMin = ins.getVariableValue("CONF_F"+furnace+"_FreqMin").value;
var maxCapacity = ins.getVariableValue("CONF_F"+furnace+"_MaxCapacity").value;
var nomCapacity = ins.getVariableValue("CONF_F"+furnace+"_NomCapacity").value;
var ccpl = ins.getVariableValue("CONF_F"+furnace+"_CCPL").value;
var filtered = [];
var raw = [];
var weight = [];
var labels = [];
var size = liningDB.record.size();
var j = 0;
for(var i=0;i<size;i++) {
if(liningDB.record[i.toString()].LiningNo == ""+view) {
//ins.notify("info", "title", "brrr");
filtered[j]={x:(j), y:liningDB.record[i.toString()].FilteredFreq};
raw[j]={x:(j), y:liningDB.record[i.toString()].Freq};
weight[j]={x:(j), y:liningDB.record[i.toString()].Weight};
j++;
}
}
//ins.notify("info", "title", filtered);
for(var i=0;i<=ccpl;i++) {
labels[i]=i;
}
var xAxes = [
{
labels: labels,
display: true,
gridLines: {
display: true,
color: "#808080"
},
ticks: {
min: 0,
maxTicksLimit: 8,
}
}];
var data = [
{
name: "Filtered Frequency",
color: "YELLOW",
step: 0,
data: filtered,
cubicInterpolationMode : "monotone",
steppedLine : false,
configs:
{ // https://www.chartjs.org/docs/master/charts/line
pointRadius: 1,
pointHoverRadius : 1,
showLine : true
},
yAxisConfigs: {
display: true,
gridLines: {
display: true,
color: "#808080"
},
ticks: {
min: FreqMin-15,
max: FreqMax+15,
maxTicksLimit: 8,
beginAtZero: false,
fontColor: "YELLOW",
stepSize: (FreqMax - FreqMin + 30) / 8
}
},
},
{
name: "Real Frequency",
color: "RED",
step: 0,
data: raw,
cubicInterpolationMode : "monotone",
steppedLine : false,
configs:
{ // https://www.chartjs.org/docs/master/charts/line
pointRadius: 1,
pointHoverRadius : 1,
showLine : true
},
yAxisConfigs:
{ // https://www.chartjs.org/docs/master/axes/cartesian/index/
display: true,
gridLines: {
display: true,
color: "#808080"
},
ticks: {
min: FreqMin-15,
max: FreqMax+15,
beginAtZero: false,
fontColor: "RED",
maxTicksLimit: 8,
stepSize: (FreqMax - FreqMin + 30) / 8
}
}
},
{
name: "Weight",
color: "rgba(30,144,255,1)",
step: 0,
data: weight,
cubicInterpolationMode : "monotone",
steppedLine : false,
configs: { // https://www.chartjs.org/docs/master/charts/line
pointRadius: 1,
pointHoverRadius : 1,
showLine : true
},
yAxisConfigs:
{ // https://www.chartjs.org/docs/master/axes/cartesian/index/
display: true,
gridLines: {
display: true,
color: "#808080"
},
ticks: {
min: nomCapacity*0.85,
max: nomCapacity*1.25,
beginAtZero: false,
fontColor: "rgba(30,144,255,1)",
stepSize: (nomCapacity*1.25 - nomCapacity*0.85) / 8
}
}
}];
var options = {
backgroundColor: "rgba(0,0,0,1)",
options: {
legend: {
display: true,
position : 'top',
align : 'center',
fullWidth : true,
labels : {
boxWidth : 30,
}
},
tooltips: {
mode: 'index',
}
}
};
return {xAxes : xAxes, dataset: data, type : 'line', options : options};
}
var MaxCap=ins.getVariableValue("CONF_F1_MaxCapacity").value*4/3;
var NomPo=ins.getVariableValue("F1_NomPo").value*4/3;
var TempScale=2000;
var val1=[];
var val2=[];
var val3=[];
var val4=[];
var labels = [];
var tag1=ins.getVariableValues("F1_TempCalc_Trn",0,225);
var tag2=ins.getVariableValues("F1_Po_Trn",0,225);
var tag3=ins.getVariableValues("F1_AvgW_Trn",0,225);
var tag4=ins.getVariableValues("F1_Weight_Trn",0,225);
for (var i=224;i>0;i--) {
if (tag1!==null) {
val1[i]=tag1[224-i].value;
} else {val1[i]=0;}
if (tag2!==null) {
val2[i]=tag2[224-i].value;
} else {val2[i]=0;}
if (tag3!==null) {
val3[i]=tag3[224-i].value;
} else {val3[i]=0;}
if (tag4!==null) {
val4[i]=tag4[224-i].value;
} else {val4[i]=0;}
labels[i]=(i).toString();
}
var xAxes = [
{
labels: labels,
display: false,
gridLines: {
display: true,
color: "#808080"
},
ticks: {
min: 0,
maxTicksLimit: 8,
}
}];
var data = [
{
name: "Temperature",
color: "RED",
step: 0,
data: val1,
cubicInterpolationMode : "monotone",
steppedLine : false,
configs: {
// https://www.chartjs.org/docs/master/charts/line
pointRadius: 0,
pointHoverRadius : 1,
showLine : true
},
yAxisConfigs: {
// https://www.chartjs.org/docs/master/axes/cartesian/index/
display: false,
gridLines: {
display: false,
color: "#808080"
},
ticks: {
suggestedMin: 0,
suggestedMax: TempScale,
beginAtZero: true,
fontColor: "RED",
stepSize: 0
}
}
},
{
name: "Power",
color: "YELLOW",
step: 0,
data: val2,
cubicInterpolationMode : "monotone",
steppedLine : false,
configs: {
// https://www.chartjs.org/docs/master/charts/line
pointRadius: 0,
pointHoverRadius : 1,
showLine : true
},
yAxisConfigs: {
// https://www.chartjs.org/docs/master/axes/cartesian/index/
display: false,
gridLines: {
display: false,
color: "#808080"
},
ticks: {
suggestedMin: 0,
suggestedMax: NomPo,
beginAtZero: true,
fontColor: "YELLOW",
stepSize: 0
}
}
},
{
name: "AVG. Weight",
color: "LIME",
step: 0,
data: val3,
cubicInterpolationMode : "monotone",
steppedLine : false,
configs: {
// https://www.chartjs.org/docs/master/charts/line
pointRadius: 0,
pointHoverRadius : 1,
showLine : true
},
yAxisConfigs: {
// https://www.chartjs.org/docs/master/axes/cartesian/index/
display: false,
gridLines: {
display: false,
color: "#808080"
},
ticks: {
suggestedMin: 0,
suggestedMax: MaxCap,
beginAtZero: true,
fontColor: "LIME",
stepSize: 0
}
}
},
{
name: "Weight",
color: "LIGHTBLUE",
step: 0,
data: val4,
cubicInterpolationMode : "monotone",
steppedLine : false,
configs: {
// https://www.chartjs.org/docs/master/charts/line
pointRadius: 0,
pointHoverRadius : 1,
showLine : true
},
yAxisConfigs: {
// https://www.chartjs.org/docs/master/axes/cartesian/index/
display: false,
gridLines: {
display: false,
color: "#808080"
},
ticks: {
suggestedMin: 0,
suggestedMax: MaxCap,
beginAtZero: true,
fontColor: "LIGHTBLUE",
stepSize: 0
}
}
},
];
var options = {
responsive : true,
// backgroundColor: "#7d91b3",
options: {
legend: {
display: true,
position : 'bottom',
align : 'start',
labels : {
boxWidth : 30
},
tooltips: {
mode: 'index',
}
},
// https://www.chartjs.org/docs/master/configuration/legend/
}
};
return {xAxes : xAxes, dataset: data, type : 'line', options : options};Last updated
