# Free Echarts

**Free eCharts** a cornerstone feature. The catalog of Shimoku has now all the power of personalization of eCharts! The proposed usage is:

### 1) Visit

<https://echarts.apache.org/examples/en/index.html#chart-type-line> and pick a chart you want to plot, for instance <https://echarts.apache.org/examples/en/editor.html?c=line-style>

### 2) Play&#x20;

in the eCharts console to tune it until you got precissely what you want. Add the data you want to the eCharts console to check out that everything works as you want.

### 3) Copy&#x20;

the eCharts console code and paste it into your Python code as a string  and use the `raw_options` as input of `s.plt.free_echarts()`

```python
# https://echarts.apache.org/examples/en/editor.html?c=line-style
raw_options: str = """
    {
  xAxis: {
    type: 'category',
    data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
  },
  yAxis: {
    type: 'value'
  },
  series: [
    {
      data: [120, 200, 150, 80, 70, 110, 130],
      type: 'line',
      symbol: 'triangle',
      symbolSize: 20,
      lineStyle: {
        color: '#5470C6',
        width: 4,
        type: 'dashed'
      },
      itemStyle: {
        borderWidth: 3,
        borderColor: '#EE6666',
        color: 'yellow'
      }
    }
  ]
};
"""

s.plt.free_echarts(
    raw_options=raw_options,
    menu_path='test/raw-free-echarts',
    order=2, rows_size=2, cols_size=12,
)
```

### 4) É Voila!

<figure><img src="https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FhbIbVDvwpyYJmh7aO7Uc%2Fimage.png?alt=media&#x26;token=9b963dc1-b499-4fcd-a136-441d9e09af56" alt=""><figcaption></figcaption></figure>

{% hint style="warning" %}
This way of using the function assumes certain aspects of the charts being used, not all charts will work. When it does not work use the next method as it requires more information to be provided.
{% endhint %}

{% hint style="info" %}
**Note** \
You cannot add eCharts functions such as from <https://echarts.apache.org/examples/en/editor.html?c=line-aqi> you must get rid of those for it to work!
{% endhint %}

```python
xAxis: {
    data: data.map(function (item) {
      return item[0];
    })
  },
```

You can also build it without copy pasting the data, just passing the rest of the `options` from eCharts. Use `options` and `data` as input of `s.plt.free_echarts()`

```python
data = [
    {'product': 'Matcha Latte', '2015': 43.3, '2016': 85.8, '2017': 93.7},
    {'product': 'Milk Tea', '2015': 83.1, '2016': 73.4, '2017': 55.1},
    {'product': 'Cheese Cocoa', '2015': 86.4, '2016': 65.2, '2017': 82.5},
    {'product': 'Walnut Brownie', '2015': 72.4, '2016': 53.9, '2017': 39.1}
]
options = {
    'legend': {},
    'tooltip': {},
    'xAxis': {'type': 'category', 'data': '#set_data#'},
    'yAxis': {},
    'series': [{'type': 'bar', 'data': '#set_data#'},
               {'type': 'bar', 'data': '#set_data#'},
               {'type': 'bar', 'data': '#set_data#'}]
}
s.plt.free_echarts(
    data=data,
    options=options, fields=['product', '2015', '2016', '2017'],
    order=0, rows_size=2, cols_size=12,
)
```

As it can be seen in the previous example the position of the data has been defined inside the options of the chart by using `#set_data#` in the desired locations. This will tell the SDK where it should put the data. In the function call the parameter fields is used to specify how the data should be unpacked in that location, in the previous example it will unpack each column as a list of values. These are the possible unpacking options:

Using this df as data: `df = [{col1: val1, col2: val2}, {col1: val3, col2: val4}]`

* String: When passing an string the values will be unpacked as the list of values of that column:

  ```python
  'col1' -> [val1, val3]
  ```

* Tuple: When passing a tuple it will unpack the values as a list of lists of the values in the df:

  ```python
  ['col1', 'col2'] -> [[val1, val2], [val3, val4]]
  ```

* Dict: When passing a dictionary it will be unpacked as a list of dictionaries with the keys being the keys provided in the mapping, the columns inside of the values of the mapping can be mapped as lists too:

  ```python
  {'name1': 'col1', 'name2': ['col2']} -> 
      [{'name1': val1, 'name2': [val2]}, {'name1': val3, 'name2': [val4]}] 
  ```

With these mapping options most of the charts in the echarts library can be codified with Shimoku using our own data/data set model, so the data doesn't need to be hard coded inside of the charts. This way filtering and aggregating is possible.

<figure><img src="https://3782181538-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FUlHTfmIZY46Z1EDfyGMz%2Fuploads%2FY4smsbgvV8jOMGn8VPtG%2Fimage.png?alt=media&#x26;token=939a2fa3-1596-401b-befb-a48b43a083d7" alt=""><figcaption></figcaption></figure>

{% hint style="info" %}
**Trick**

Use eCharts console <https://echarts.apache.org/examples/en/index.html> to prepare your chart and when you have what you want you can just copy paste it to the Free eCharts with raw input.
{% endhint %}