Chart

Chart, mimik sayfalarında seçili dikdörtgen nesnesi içerisinde grafik çizilmesini sağlar.

Detaylı bilgi için https://www.chartjs.org

Resim 1 : Animation - Chart

return {xAxes : xAxes, dataset: data, type : 'line', options : options};

Examples

Resim 2 : Line Chart

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};

}

Resim 3 : Line Chart - Live Trend

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};