Annotated Chart

This chart allows users to interactively change their data across a timeline. In the frontend, users can click inside the chart to display a modal with options to add a point or two to the timeline, as well as add an annotation for that point.

The chart requires a separate dataset for each series to plot, and it needs the y-field-name specified for each of them. All datasets must have the same name for the x-field and for the annotations field. The x-field values must be of type Date or convertible to it, the y-field must be integers, and the annotation field values must be strings.

The modal that appears includes a slider to select the value that the user wants to add. This can be configured with the slider_config parameter, where the max value can be defined, and also the defaultValue. Labels can be added to the slider values using the slider_marks parameter.

The Method To Use

The method is s.plt.annotated_chart()

It must contain the following input variables:

data: Union[List[DataFrame], List[List[Dict]]]
order: int
x: str 
y: List[str] 

Accepts the following input variables as optional:

annotations: str
rows_size: Optional[int]
cols_size: Optional[int]
padding: Optional[str]
title: Optional[str]
y_axis_name: Optional[str]
slider_config: Optional[Dict]
slider_marks: Optional[Dict]

Examples

An example on how to use it would be:

data1 = [
    {'date': '2022-01-01', 'Value [1]': 3},
    {'date': '2022-03-01', 'Value [1]': 7, 'Annotation': 'Value [1] rapid increase'},
    {'date': '2022-04-01', 'Value [1]': 7},
    {'date': '2022-07-01', 'Value [1]': 8},
    {'date': '2022-08-01', 'Value [1]': 9},
    {'date': '2022-12-01', 'Value [1]': 5},
]
data2 = [
    {'date': '2021-12-31', 'Value [2]': 6},
    {'date': '2022-01-02', 'Value [2]': 9},
    {'date': '2022-02-01', 'Value [2]': 7},
    {'date': '2022-03-01', 'Value [2]': 8},
    {'date': '2022-04-01', 'Value [2]': 9},
    {'date': '2022-05-01', 'Value [2]': 7},
    {'date': '2022-06-01', 'Value [2]': 8, 'Annotation': 'Value [2] oscillation'},
    {'date': '2022-07-01', 'Value [2]': 9},
    {'date': '2022-08-01', 'Value [2]': 8},
]

s.plt.annotated_chart(
    order=0, x='date', y=['Value [1]', 'Value [2]'], annotations='Annotation',
    data=[data1, data2], slider_config={'max': 100, 'defaultValue': 50},
    slider_marks=[('Low', 15), ('Medium', 50), ('High', 85)]
)

Annotated chart with two datasets

When clicking in the chart the modal appears like so:

Annotation modal

It lets the user select a date range and the value of the point. Also it lets the user write an annotation in the bottom text field.

If we use the following values:

Form ready to send

The result in the chart is:

Annotation added