Chart

Chart

controlType chart dataBase'den çekilen verilerin grafik oluşturması için kullanılır.

Record İçinde Kullanımı:

 {
              "controlType": "chart",
              "chartjsConfig": {
                "type": "bar",
                "script": "",
                "data": {
                  "labels": "$any{GROUPNAME}",
                  "datasets": [
                    {
                      "label": "Res ",
                      "stack": "b",
                      "borderColor": "#80d8ff",
                      "backgroundColor": "#9bffc0",
                      "datalabels": {
                        "textAlign": "center",
                        "color": "#000",
                        "align": "center",
                        "anchor": "center"
                      },
                      "data": "$any{RESCOUNT}"
                    },
                    {
                      "label": "Res-LY ",
                      "stack": "bb",
                      "borderColor": "#80d8ff",
                      "backgroundColor": "#9bffa0",
                      "datalabels": {
                        "textAlign": "center",
                        "color": "#000",
                        "align": "center",
                        "anchor": "center"
                      },
                      "data": "$any{typeof RESCOUNT_LY !== 'undefined' ? RESCOUNT_LY : []}"
                    },
                    {
                      "label": "RoomNight",
                      "stack": "a",
                      "borderColor": "#ef524f",
                      "backgroundColor": "#ef524faa",
                      "datalabels": {
                        "textAlign": "center",
                        "color": "#000",
                        "align": "center",
                        "anchor": "center"
                      },
                      "data": "$any{ROOMCOUNT}"
                    },
                    {
                      "label": "RoomNight-LY",
                      "stack": "aa",
                      "borderColor": "#ef524f",
                      "backgroundColor": "#ef524fa0",
                      "datalabels": {
                        "textAlign": "center",
                        "color": "#000",
                        "align": "center",
                        "anchor": "center"
                      },
                      "data": "$any{typeof ROOMCOUNT_LY !== 'undefined' ? RESCOUNT_LY : []}"
                    },
                    {
                      "label": "BedNight",
                      "stack": "c",
                      "borderColor": "#f3d411",
                      "backgroundColor": "#f3d411aa",
                      "datalabels": {
                        "color": "#000",
                        "align": "top",
                        "anchor": "end"
                      },
                      "data": "$any{ADULT}",
                      "hidden": false
                    },
                    {
                      "label": "BedNight-LY",
                      "stack": "cc",
                      "borderColor": "#f3d411",
                      "backgroundColor": "#f3d411a0",
                      "datalabels": {
                        "color": "#000",
                        "align": "top",
                        "anchor": "end"
                      },
                      "data": "$any{typeof ADULT_LY !== 'undefined' ? RESCOUNT_LY : []}",
                      "hidden": false
                    },
                    {
                      "label": "Revenue",
                      "stack": "d",
                      "yAxisID": "right-axis",
                      "borderColor": "#734fef",
                      "formatter": "$(x){return numeral(x).format('00')}",
                      "backgroundColor": "#734fefaa",
                      "datalabels": {
                        "color": "#000",
                        "align": "top",
                        "anchor": "end"
                      },
                      "data": "$any{ROOM_REVENUE}",
                      "hidden": true
                    },
                    {
                      "label": "Revenue-LY",
                      "stack": "dd",
                      "yAxisID": "right-axis",
                      "borderColor": "#734fef",
                      "formatter": "$(x){return numeral(x).format('00')}",
                      "backgroundColor": "#734fefa0",
                      "datalabels": {
                        "color": "#000",
                        "align": "top",
                        "anchor": "end"
                      },
                      "data": "$any{typeof ROOM_REVENUE_LY !== 'undefined' ? RESCOUNT_LY : []}",
                      "hidden": true
                    }
                  ]
                },
                "options": {
                  "responsive": true,
                  "title": {
                    "display": true,
                    "text": [
                      ""
                    ]
                  },
                  "tooltip": {
                    "mode": "index",
                    "intersect": false
                  },
                  "scales": {
                    "xAxes": [
                      {
                        "ticks": {
                          "callback": "$(value,index,values){return (value || '').toString().substring(0,8);}"
                        },
                        "stacked": true
                      }
                    ],
                    "yAxes": [
                      {
                        "display": true,
                        "position": "left",
                        "type": "linear",
                        "id": "left-axis",
                        "ticks": {
                          "min": 0
                        }
                      },
                      {
                        "display": true,
                        "position": "right",
                        "type": "linear",
                        "id": "right-axis",
                        "ticks": {
                          "min": 100
                        }
                      }
                    ]
                  },
                  "plugins": {
                    "datalabels": {
                      "color": "#ffffff",
                      "textAlign": "center",
                      "formatter": "$any{(value) => {return value}}"
                    }
                  }
                }
              },
              "chartStyle": {
                "width": "100%",
                "height": "300px"
              },
              "gridStyle": {
                "width": "100%",
                "height": "200px"
              },
              "drawButton": {
                "label": "",
                "icon": "insert_chart_outlined",
                "style": {}
              },
              "gridPanelSettings": {
                "title": "",
                "description": "",
                "expanded": true
              }
            }