# Chart

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

Detaylı bilgi için [https://www.chartjs.org](https://www.chartjs.org/samples/latest/)

![Resim 1 : Animation - Chart](/files/-ML3MOosB6XWDyxNVOvh)

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

#### Examples

![Resim 2 : Line Chart](/files/-ML3ILAyx6KiZV0ikD7f)

```javascript
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](/files/-ML3NgVTJmY383tVwXYh)

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://inscada.gitbook.io/ins/master/user-interface/development/animations/chart.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.