Diagrams and maps

Creating a map

Creating a map and static objects on it.

It is recommended to use the view to work with the map.

Create an entity (see more details in Creating a table, Creating a view, Creating a projection). In the entity, add columns with the coordinates: latitude and longitude (see more details in Adding a column.
Go to [Selected entity] > button [More] > the button [Setup…].
In the detailed form, click [Edit] to switch to edit mode.
Enter in the field “Additional parameters” :
```
       {
           "longitude_property": "x",
           "latitude_property": "y"
       }
```
Instead of x, y, enter:
- instead of “x” - a field containing the longitude;
- instead of “y” - a field containing latitude.
Click the button [Save] to save changes or click [Cancel] to exit the edit mode without saving.

Creating a diagram

Create an entity (see more details in Creating a table, Creating a view, Creating a projection). In the entity, add columns with the coordinates: latitude and longitude (see more details in Adding a column.
Go to [Selected entity] > button [More] > the button [Setup…].
In the detailed form, click [Edit] to switch to edit mode.
Enter in the field “Additional parameters” :

{
"chartType": "a"
}

Instead of “a”, specify the diagram type: “bar” (columnar), “pie”(circular), “line” (linear), “area” (additive), “radar” (radar), “doughnut” (donut), etc. For more information, see more details in Chart Types.

Click the button [Save] to save changes or click [Cancel] to exit the edit mode without saving.

The default diagram title is the entity title.

Diagram Setup

Many parameters are set for the created diagrams. If the parameter is not specified, its default value is used.

Go to [Selected entity] > button [More] > the button [Setup…].
In the detailed form, click [Edit] to switch to edit mode.
Enter in the field “Additional parameters” :
```
      {
          "chartType": "doughnut",
          "chartOptions": {
              "plugins": {
                  "labels": {
                      "render": "value",
                      "fontSize": "14",
                      "fontColor": "#fff"
                  }
              }
          },
          "s-property": "sensor_id",
      }
```
The *“render” * parameter specifies the format for displaying chart values. In this case, in the value “value” - indicates the display of a numeric value.

The “fontSize” parameter specifies the font size of the chart values. In this case, the size is 14 pixels.

The “fontColor” parameter specifies the font color of the chart values. In this case, “#fff” (HEX) is “red”.

The “s-property” parameter contains a column whose data will be used as a legend. In this case, “sensor_id”.

For more information about the parameters and their possible values, see the documentation site Chart.js. Examples of use on the site emn178.github.io.
Click the button [Save] to save changes or click [Cancel] to exit the edit mode without saving.

Creating a chart

Create an entity (see more details in Creating a table, Creating a view, Creating a projection). In the entity, add columns with the coordinates: latitude and longitude (see more details in Adding a column.
Go to [Selected entity] > button [More] > the button [Setup…].
In the detailed form, click [Edit] to switch to edit mode.
Enter in the field “Additional parameters” :

      {
       "chartType": "scatter",
           "x-property": "x", 
           "y-properties": [ "y1", "y2" ]
       }

Instead of" x", specify the name of the column (not the title!), containing the values of the abscissa axis, and instead of “y1” and “y2”, specify the names of the columns containing the values of the ordinate axis. Learn more in Chart.js.

There can be at least one ordinate axis value.

Click the button [Save] to save changes or click [Cancel] to exit the edit mode without saving.

By default, the entity header is used as the chart title.

Setting up the chart

Adding a legend to the chart

The legend contains conditional signs and their designations on the chart.

Go to [Selected entity] > button [More] > the button [Setup…].
In the detailed form, click [Edit] to switch to edit mode.
Enter in the field “Additional parameters” :

     {
       ...
      "s-property": "s"
       }

Instead of "s", specify the name of the column containing the values to be used as the definition of the chart designations.

Click the button [Save] to save changes or click [Cancel] to exit the edit mode without saving.

Color palette of the chart

Go to [Selected entity] > button [More] > the button [Setup…].
In the detailed form, click [Edit] to switch to edit mode.
Enter in the field “Additional parameters” :

      {
       ...
      "graphColors": [
         "color1",
         "color2"]
       }

Instead of "color1" and "color2", specify colors, for example, "green", "yellow" or "\#008000", "\#FFFF00" in HEX (hexadecimal system). The number of colors must be specified by the number of graphs.

Click the button [Save] to save changes or click [Cancel] to exit the edit mode without saving.

Switch of charts

To display multiple charts, use the charts switch: tabs with charts.

Go to [Selected entity] > button [More] > the button [Setup…].
In the detailed form, click [Edit] to switch to edit mode.
Enter in the field “Additional parameters” :
```
      {
       ...
      "graphGroups": [
                   {
            "title": "graph1",
            "items": [
              "column1"
            ]
          },
          {
            "title": "graph2",
            "items": [
              "column2"
            ]
          }
        ]
       }
```
Instead of “graph 1” and “graph 2”, specify the names of the tabs for the charts. In There can be at least two tabs.

Instead of “column1” and “column2”, specify the names of the columns that will set the values along the ordinate axis. The number of columns must correspond to the number of tabs.
Click the button [Save] to save changes or click [Cancel] to exit the edit mode without saving.

Grouping chart data

These entities can be divided into groups using the values of one of the columns.

Go to [Selected entity] > button [More] > the button [Setup…].
In the detailed form, click [Edit] to switch to edit mode.
Enter in the field “Additional parameters” :
```
      {
       ...
       "g-property": "g"
       }
```
Instead of “g”, specify the name of the column by whose values the grouping will be performed.

This parameter, unlike the previous ones, is used together with the graph switch. Thus, graphs from different groups are displayed in different tabs of the switch.
Click the button [Save] to save changes or click [Cancel] to exit the edit mode without saving.

Example

{
  "chartType": "scatter",
  "x-property": "date",
  "y-properties": [
    "temperature"
  ],
  "s-property": "date",
  "graphColors": [
    "green",
    "#FFFF00"
  ],
  "g-property": "group",
  "graphGroups": [
    {
      "title": "Daytime temperature",
      "items": [
        "temperature"
      ]
    },
    {
      "title": "Night temperature",
      "items": [
        "temperature_night"
      ]
    }
  ]
}