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

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

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()

# 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!

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.

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!

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()

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:

  'col1' -> [val1, val3]

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

  ['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:

  {'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.

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.