nicohlr / ipychart Goto Github PK
View Code? Open in Web Editor NEWThe power of Chart.js with Python
Home Page: https://nicohlr.github.io/ipychart/
License: MIT License
The power of Chart.js with Python
Home Page: https://nicohlr.github.io/ipychart/
License: MIT License
Hi,
Nice project you've got here, just what I wanted.
Could you add a warning in the "Installing" docs saying that this only works with jupyter-notebook
and not with jupyter-labs
?
I don't know if it was a problem only for me, but I couldn't make it work on Jupyter-lab, I kept getting errors when the front-end tried to depend on jupyter.extensions.jupyterWidgetRegistry
.
Unfortunately I'm not that used with this whole notebook thing and lost a couple hours trying to make it work. 😅
BR,
Gabriel
When I try to render a graph in VSC I see the Chart data, options, type, etc, up to Chart created in the developer console but then I get ipywidgetsKernel.js:2 Error: Failed to render widget ead80bfb5bb34800a691c9806717554f, TypeError: Cannot read properties of undefined (reading 'parent')
The full errors are:
i | @ | ipywidgetsKernel.js:2 | |
---|---|---|---|
d | @ | ipywidgetsKernel.js:2 | |
(anonymous) | @ | ipywidgetsKernel.js:2 | |
(anonymous) | @ | ipywidgetsKernel.js:2 | |
(anonymous) | @ | ipywidgetsKernel.js:2 | |
o | @ | ipywidgetsKernel.js:2 | |
Promise.then (async) | |||
d | @ | ipywidgetsKernel.js:2 | |
a | @ | ipywidgetsKernel.js:2 | |
Promise.then (async) | |||
d | @ | ipywidgetsKernel.js:2 | |
(anonymous) | @ | ipywidgetsKernel.js:2 | |
n | @ | ipywidgetsKernel.js:2 | |
(anonymous) | @ | ipywidgetsKernel.js:2 | |
(anonymous) | @ | ipywidgetsKernel.js:2 | |
Promise.then (async) | |||
(anonymous) | @ | ipywidgetsKernel.js:2 | |
(anonymous) | @ | ipywidgetsKernel.js:2 | |
(anonymous) | @ | ipywidgetsKernel.js:2 | |
(anonymous) | @ | ipywidgetsKernel.js:2 | |
(anonymous) | @ | ipywidgetsKernel.js:2 | |
n | @ | ipywidgetsKernel.js:2 | |
fe | @ | ipywidgetsKernel.js:2 | |
(anonymous) | @ | ipywidgetsRenderer.js:2 | |
(anonymous) | @ | ipywidgetsRenderer.js:2 | |
(anonymous) | @ | ipywidgetsRenderer.js:2 | |
s | @ | ipywidgetsRenderer.js:2 | |
Promise.then (async) | |||
c | @ | ipywidgetsRenderer.js:2 | |
s | @ | ipywidgetsRenderer.js:2 | |
Promise.then (async) | |||
c | @ | ipywidgetsRenderer.js:2 | |
(anonymous) | @ | ipywidgetsRenderer.js:2 | |
t | @ | ipywidgetsRenderer.js:2 | |
renderOutputItem | @ | ipywidgetsRenderer.js:2 | |
renderOutputItem | @ | notebookWebviewPreloads.js:3 | |
await in renderOutputItem (async) | |||
h | @ | notebookWebviewPreloads.js:3 | |
render | @ | notebookWebviewPreloads.js:3 | |
render | @ | notebookWebviewPreloads.js:3 | |
renderOutputElement | @ | notebookWebviewPreloads.js:3 | |
renderOutputCell | @ | notebookWebviewPreloads.js:3 | |
await in renderOutputCell (async) | |||
(anonymous) | @ | notebookWebviewPreloads.js:3 | |
c.set.queue | @ | notebookWebviewPreloads.js:3 | |
enqueue | @ | notebookWebviewPreloads.js:3 | |
(anonymous) | @ | notebookWebviewPreloads.js:3 | |
postMessage (async) | |||
(anonymous) | @ | index.html?id=9e26cb…tebookRenderer:1168 | |
HostMessaging.channel.port1.onmessage | @ | index.html?id=9e26cb…otebookRenderer:308 |
(anonymous) | @ | VM171 embed-amd.js:208 | |
---|---|---|---|
(anonymous) | @ | VM171 embed-amd.js:208 | |
Promise.then (async) | |||
h | @ | VM171 embed-amd.js:208 | |
(anonymous) | @ | embed-amd.js:210 | |
execCb | @ | preload.js:1700 | |
check | @ | preload.js:883 | |
enable | @ | preload.js:1176 | |
init | @ | preload.js:788 | |
(anonymous) | @ | preload.js:1460 | |
setTimeout (async) | |||
req.nextTick | @ | preload.js:1819 | |
localRequire | @ | preload.js:1449 | |
requirejs | @ | preload.js:1801 | |
(anonymous) | @ | embed-amd.js:210 | |
n | @ | embed-amd.js:210 | |
(anonymous) | @ | embed-amd.js:210 | |
(anonymous) | @ | embed-amd.js:210 |
If I do HTML(mychart.get_html_template())
then I get my graph so it's a reasonable work around. I don't really know much about how ipywidgets and all that stuff works in the background so not sure if there's an obvious fix here.
Thanks for this amazing library, I'm surprised it's not already super hyped as the plots are looking great, and at the moment there are zero good equivalents for Jupyter notebooks.
It is stated in the doc that a plot could be animated with ipywidget. I tried, but there seems to be no equivalent to the Figure
attribute of bqplot, or FigureWidget
of plotly, which would be used in e.g. a widgets.VBox
object. Here is what I currently have, which doesn't work:
# Modules import
from ipychart import Chart
import ipywidgets as widgets
import time
import numpy as np
# Define data and chart
data = {'datasets': [{'data': [{'x': 0, 'y': 0}, {'x': 1, 'y': 1}]}]}
mychart = Chart(data, 'line')
# Define a button for animation
btn = widgets.Button(description="Start", icon="play")
# Callback to update the chart
def update_chart(btn):
for i in range(10):
y = np.random.rand(2)
with mychart.hold_sync():
mychart.data = {'datasets': [{'data': [{'x': 0, 'y': y[0]}, {'x': 1, 'y': y[1]}]}]}
time.sleep(0.1)
btn.on_click(update_chart)
# UI Combining Button & Chart
widgets.VBox([btn, mychart])
I believe I should provide something like mychart.fig
instead of mychart
to widgets.VBox
, but I couldn't find any similar attribute in the Chart class. Any idea how to solve that? If yes, that would be a great addendum to the documentation. Thank you :)
It seems ChartJS might be trying to maintain the aspect ratio in the Voila dashboard web app. I need to turn that option off by setting the "maintainAspectRatio: false" option. Could you add this to the IPYCharts package to correctly render the charts in Voila?
ipychart throws a JS error, here is my setup and error:
Python 3.9.6
jupyterlab 3.6.3
ipychart 0.4.0
jupyter 1.0.0
jupyterlab 3.6.3
notebook 6.5.4
pip 23.1
pip install jupyterlab
pip install jupyter
pip install ipychart
jupyter notebook
jupyter-lab
dataset = {
'labels': ['Data 1', 'Data 2', 'Data 3', 'Data 4',
'Data 5', 'Data 6', 'Data 7', 'Data 8'],
'datasets': [{'data': [14, 22, 36, 48, 60, 90, 28, 12]}]
}
mychart = Chart(data=dataset, kind='bar')
mychart
[Open Browser Console for more detailed log - Double click to close this message]
Model class 'ChartModel' from module 'ipychart' is loaded but can not be instantiated
TypeError: o._deserialize_state is not a function
at u._make_model (http://localhost:8888/nbextensions/jupyter-js-widgets/extension.js?v=20230421165510:2:752635)
!jupyter nbextension list
Known nbextensions:
config dir: /Users/jhernandez/Documents/Workspace/Lab/Parquet/venv/etc/jupyter/nbconfig
notebook section
ipychart/extension enabled
- Validating: OK
jupyter-js-widgets/extension enabled
- Validating: OK
Not sure if this is a compatibility issue.
Hey guys,
Firstly, thank you for this! What a great implementation. I really appreciate your efforts.
So I inherited a code base that I'm trying to streamline data while using JavaScript and Python. I'm running into an issue where I can't seem to get the formatter to work on data labels. I'll post the working JS version below and what I've tried to do in Jupyter/Python.
setChartPercentages() { for (const set of this.chart.data.datasets) set.datalabels = { labels: { value: { formatter: function(value, ctx) { //ctx not needed, but including it as that's typically what the chart.js docs do. return value + '%' } } } } }
This function is called when creating or updating charts. I simplified it a bit, but basically it shows total percent instead of the numbers.
I tried to replicate this in ipychart. I've tried to use the callback function as stated in the documentation as well as just using the formatter. I even tried to combine them. All of them did not register the formatter.
dataset = { 'labels': ['Data 1', 'Data 2', 'Data 3', 'Data 4', 'Data 5', 'Data 6', 'Data 7', 'Data 8'], 'datasets': [{'data': [14, 22, 36, 48, 60, 90, 28, 12], "datalabels": {"display": True, "labels": { "value": { 'formatter': { 'callback': '''function(value, ctx) {return '$' + value.toString()}''' } } } } }] }
I also tried
'''function(value, index, values) {return '$' + value}'''
Any idea on how to get the formatter to register? Thank you a ton for any help.
I think in the plots.py functions there'd need to be a check if data is either pandas or polars and then _create_chart_data_agg
would be for pandas and there'd be a _create_chart_data_agg_pl
function that would do the same thing except from polars.
This is just an example, of course there are a bunch of other functions to contend with.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.