# 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](https://content.gitbook.com/content/0WKoYqjGEXoBJmDoxwvm/blobs/FIj37M2fibfSEDnzDLIG/Resim%201%20chart%20homepage.jpg)

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

* **Animation Chart Type - Expression :**&#x20;

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 ![](https://content.gitbook.com/content/0WKoYqjGEXoBJmDoxwvm/blobs/kJg10hjkPGLh1203ky6R/edit.jpg) 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](https://content.gitbook.com/content/0WKoYqjGEXoBJmDoxwvm/blobs/FX5KOb5AOTrhwyQ3X7ig/Resim%202%20chart%20type%20expression.jpg)

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.&#x20;

Ö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 :**&#x20;

&#x20;**Geliştirilmektedir.**