Chart

Chart animasyon özelliği, mimik sayfalarınızı tasarım aşamasında oluşturacağınız bir dikdörtgen nesnesi içerisinde grafik çizilmesini sağlamaktadır.

Hazırlık aşamasında https://www.chartjs.org/docs/latest/samples/information.html sayfasından detaylı bilgi ve örneklere ulaşabilirsiniz.

Chart özelliği tasarım aşamasında oluşturacağınız koşullara göre chart mimik alanınızda grafik değişimleriniz canlı bir şekilde gerçekleşecektir. Örneğimizde ( Resim 1 ) de kırmızı ile gösterilen chart alanında bulunan iki adet değişken değerlerine göre çizgileri anlık değişmektedir.

Resim 1 : Chart View

Chart özelliği iki farklı şekilde hazırlanabilinmektedir ;

• Animation Chart Type - Expression :

Animasyonunuzu hazırladıktan sonra chart özelliği eklemek istediğiniz mimiği animasyon sayfasının "ctrl " özelliğini aktif hala getirdikten sonra yine animasyon sayfası üzerinden seçilerek ikonu yardımı ile edit animation element sayfası açılmaktadır. Resim 1 'de gösterilen örneğimizde mimiğimiz kırmızı ile gösterilmiştir.

Resim 2 : Ainmation Chart Type - Expression

Expression tipinde chart'larınızı java script yazım dili kullanarak dilediğiniz şart/koşul , renk , çizgi boyutu vb gibi düzenlemeler ile oluşturmanıza imkan sağlanmaktadır. Örnek kod'lar için sayfanın girişinde belirtilen chartjs sayfasını ziyaret edebilirsiniz.

Örneğimizde iki adet ısı ve güç değişkenlerinin kırmızı ve sarı ile gösterimi sağlanmaktadır. Örnek kodlarını aşağıda görebilirsiniz.

var MaxCap=125;
var NomPo=110;
var TempScale=120;


var val1=[];
var val2=[];
var val3=[];
var val4=[];

var labels = [];

var tag1=ins.getVariableValues("SET_VALUE_TAG",0,225);
var tag2=ins.getVariableValues("TAG_001",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;}
	
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
            }
        }    
    }
];
var options = {
    responsive : true,
    // backgroundColor: "#7d91b3",
    options: {
        animation : false,
        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};

• Animation Chart Type - Tag :

Geliştirilmektedir.