How can I configure a line chart using pivot_ui?

Question

I would like to create a dynamic line chart in Voila. How can I manipulate the below code to show a standard line graph where the x axis equals column "a" and the y axis equals column "b"? Potentially the user can then dynamically update the output to make the y axis equal to column "c" by drag and drop etc.

from pivottablejs import pivot_ui 
import pandas as pd 
import IPython

df = pd.DataFrame(("a": [1,2,3], "b": [30,45,60],"c": [100,222,3444]))
display.display(df)

pivot_ui(df,outfile_path='pivottablejs.html',
rendererName="Line Chart",
cols= ["b","c"]
rows= ["a"],
aggregatorName="Sum"
)

display.display(IPython.display.HTML('pivottablejs.html")) 

Thank you.

Answer 1

This should be a comment but I cannot post code with comments easily.

Please always test your code, preferably in a new notebook so it is fresh kerenl, before you post it.
Your dataframe assignment won't work. Should it be something like below?

That display code won't work in Jupyter notebook classic or JupyterLab presently.

Try something like this for assignment and display:

import pandas as pd
df = pd.DataFrame({"a": [1,2,3], "b": [30,45,60],"c": [100,222,3444]})
display(df)

That works in the classic notebook, JupyterLab, and Voila to make & display the dataframe.

Related to this is that is advisable to develop for Voila in JupyterLab. JupyterLab's rendering machinery is more modern and so closer to what Voila uses.

You can easily test renderings in launches from the Voila binder example page. Go there and click 'launch binder for the appropriate rendering. From JupyterLab you can select the Voila icon from the toolbar just above an open notebook and get the Voila rendering on the side.