External Chart

Xeelo Knowledge Base
, ,
1

Since Xeelo 2022-08.001 we introduced External Charts.

In order to setup external chart, you must first have external data source (HTTP Server) and also setup external report in Xeelo Admin.

We have 2 different (although very similar) formats for external charts

  • Bar chart
  • Pie chart

External data source (HTTP endpoint) must provide JSON data

Bar chart type

Type: BarChart

  • GraphType - BarChartType
  • Title - string - chart title
  • XAxisName - string - X Axis label
  • ShowLegend - boolean - Wheather to render chart legend
  • YAxisMin - decimal (optional) - Minimum value of Y axis (since 2022-11.001)
  • YAxisMax - decimal (optional) - Maxmum value of Y axis (since 2022-11.001)
  • Data - BarChartData

Type: BarChartType

string value with bellow restrictions

  • bar - Render as bar chart
  • line - Render as line chart
  • horizontalBar - Render as horizontal bar chart

Type: BarChartData

  • lables - array of string
  • datasets - array of BarChartDataSet

Type: BarChartDataSet

  • label - string name of dataset (displayed in legend)
  • data - array of number - data points - length of data points must match labels
  • backgroundColor - Color (optional) background color
  • borderColor - Color (optional) border color
  • hoverBackgroundColor - Color (optional) background color on mouse over
  • hoverBorderColor - Color (optional) border color on mouse over
  • borderWidth - integer - border width in pixels

Type: Color

string value of color which can be

  • HEX ie . #ababab
  • RGBA ie. rgba(0-255, 0-255,0-244,0-1)
  • Color name ie blue or red

Bar Chart Example

{
  "GraphType": "bar",
  "Title": "Bar Chart",
  "XAxisName": "Values",
  "ShowLegend": true,
  "Data": {
    "labels": ["Label 1", "Label 2"],
    "datasets": [
      {
        "label": "Data 1",
        "data": [1, 2]
      },
            {
        "label": "Data 2",
        "data": [3, 4]
      }
    ]
  }
}

Pie chart type

Type: PieChart

  • GraphType - PieChartType
  • Title - string - chart title
  • ShowLegend - boolean - Wheather to render chart legend
  • Data - PieChartData

Type: PieChartType

string value with bellow restrictions

  • pie - Render as pie chart
  • doughnut - Render as doughnut chart

Type: PieChartData

  • lables - array of string
  • datasets - array of PieChartDataSet

Type: PieChartDataSet

  • label - string name of dataset (displayed in legend)
  • data - array of number - data points - length of data points must match labels
  • backgroundColor - array of Color (optional) background colors - length of data points should match labels
  • borderColor - array of Color (optional) border colors - length of data points should match labels
  • hoverBackgroundColor - array of Color (optional) background colors on mouse over - length of data points should match labels
  • hoverBorderColor - array of Color (optional) border colors on mouse over - length of data points should match labels
  • borderWidth - array of integer - border widths in pixels - length of data points should match labels

Pie Chart Example

{
  "Data": {
    "labels": ["Czeh", "Slovak"],
    "datasets": [
      {
        "data": [50, 50],
        "backgroundColor": ["red", "blue"],
      }
    ]
  },
  "GraphType": "pie",
  "Title": "Xeelo Pie Chart",
  "ShowLegend": false
}
1 Like
2

Tested in working very nicely.