# External Chart

**URL:** <https://forum.xeelo.com/t/external-chart/993>\
**Category:** Xeelo Knowledge Base\
**Tags:** calculations, report, chart\
**Created:** [September 15, 2022, 12:45pm UTC](https://forum.xeelo.com/t/external-chart/993 "2022-09-15T12:45:01Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![dev.olomouc](https://yyz1.discourse-cdn.com/flex027/user_avatar/forum.xeelo.com/dev.olomouc/32/697_2.png) [@dev.olomouc](https://forum.xeelo.com/u/dev.olomouc)\
**Post date:** [September 15, 2022, 12:45pm UTC](https://forum.xeelo.com/t/external-chart/993/1 "2022-09-15T12:45:01Z")

</div>

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

```auto
{
  "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

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

```

---

<div class="post-metadata">

**Author:** ![tomas](https://yyz1.discourse-cdn.com/flex027/user_avatar/forum.xeelo.com/tomas/32/115_2.png) [@tomas](https://forum.xeelo.com/u/tomas)\
**Post date:** [October 30, 2022, 6:21pm UTC](https://forum.xeelo.com/t/external-chart/993/2 "2022-10-30T18:21:48Z")

</div>

Tested in working very nicely.