New Python package "charts.css.py" for basic charts

Ray Luo

unread,

May 19, 2021, 6:10:43 AM5/19/21

to brython

Hi there,

As if one chart package is not enough, here comes yet another one. :-)

In a recent conversation, we mentioned 2 technologies for drawing charts: SVG and HTML5 canvas (JS). This "charts.css.py" uses a perhaps unusual approach: CSS. By ditching JS, I feel this package is a natural fit to Brython mission statement. :-)

The actual chart implementation is powered by its upstream project, Charts.css (https://chartscss.org/), which currently supports 4 basic charts (bar, column, line, area), with more charts in its roadmap. What I did is adding a thin Python API.

I plan to provide some Brython samples for this chart package. Until then, I hope the README of charts.css.py can give you a glimpse of its API (https://github.com/rayluo/charts.css.py), and refer to the upstream charts.css project for its chart appearance. By the way, charts.css.py is not a Brython-only package. It can be used in non-Brython projects, too.

PS: @Andy, my first commit on this package was at 2 weeks ago. Your recent announcement inspires me to release early, too. And I will also add a cumulative frequency chart in next release.

Regards,
Ray Luo

Andy Lewis

unread,

May 19, 2021, 9:26:34 AM5/19/21

to brython

Hello Ray

How interesting that we should start working on a charts package almost simultaneously. I'm sure they will have very different use cases.

I installed your package and ran the code snippet on your GitHub page. It worked, but didn't match the image you show - the page was rotated by 90 degrees, ie the bars were horizontal. Of course that example is using Python to generate a HTML file, so I though I would try converting it to Brython. The html file below gives the same result.

(It's just a quick test so it isn't perfect - for example it places the <link> to the stylesheet inside the <body>, whereas it should be inside the <head>. But the file generated by Python doesn't have <head> or <body> tags at all; browsers are very forgiving of these things.)

Anyway it was interesting to try it out using Brython.

Andy

<html>
<head>
    <meta charset="utf-8">
    <title>charts.css.py test</title>
    <script src="https://cdn.jsdelivr.net/npm/bry...@3.9.2/brython.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bry...@3.9.2/brython_stdlib.js"></script>
    <script type="text/python">
from browser import document
from charts.css import bar, STYLESHEET

chart = bar(
   [
        ["Continent", "1st year", "2nd year", "3rd year", "4th year", "5th year"],
        ["Asia", 20.0, 30.0, 40.0, 50.0, 75.0],
        ["Euro", 40.0, 60.0, 75.0, 90.0, 100.0],
    ],
    headers_in_first_row=True,
    headers_in_first_column=True,
    )
document.body.innerHTML = STYLESHEET + chart
    </script>
</head>

<body onLoad="brython()">
</body>
</html>

Ray Luo

unread,

May 19, 2021, 12:40:46 PM5/19/21

to brython

Hi Andy,

> How interesting that we should start working on a charts package almost simultaneously.

Indeed. What a coincidence! :-)

> I'm sure they will have very different use cases.

True. Even my upstream project, the Charts.css, after describing its advantage to those traditional JS-heavy chart libraries (https://chartscss.org/docs/#alternatives), goes on to admit that (https://chartscss.org/docs/#which-is-better): "When should you consider migrating to Charts.css? In most cases, you just need a simple chart to display your data. In those cases there is no sense to load heavy JS libraries. For complex charts with special behaviours not covered by Charts.css you should search for JS alternatives." I think that makes sense. SVG-based solution, on the other hand, does not have such a limitation. I can see brySVG's bright future in supporting more graph-like chart, such as data flow diagrams. I'm not aware of any frontend solution for that.

> It worked, but didn't match the image you show - the page was rotated by 90 degrees, ie the bars were horizontal.

Thanks for catching this documentation typo. I started with a bar chart sample, but later chose to take a screenshot of a column chart because I believed it would look cooler. I'll change the README sample to call function "column(...)" instead of "bar(...)". It is that simple.

> for example it places the <link> to the stylesheet inside the <body>, whereas it should be inside the <head>. But the file generated by Python doesn't have <head> or <body> tags at all; browsers are very forgiving of these things

That is by design. The output of each function call (i.e. bar(...), column(...), line(...), area(...)) is an HTML snippet which is intended to be inserted by the developer into a desirable place inside their full HTML page. That is also why the STYLESHEET helper is provided as a separate variable. That README sample contains only one chart, so that I (ab)use the browser's forgiveness and concatenate the stylesheet link and html snippet as the output. I envision a standalone Brython sample would demonstrate how to organize (multiple?) charts inside a well-structured html page.

Thanks for your testing!

Regards,

Ray Luo

Olof Paulson

unread,

May 20, 2021, 7:16:10 AM5/20/21

to brython

This is awesome!
As a neophyte in the area still...
May I ask how you would go about creating graphs for tutorial purposes in an interactive envireonment such as scrimba?

I am unable to load e.g. matplotlib etc with brython because of the written in C-issue, and would like to mimic ’real python code’ as closely as possible and add some ’graphics’

An example of a Python/ brython tutorial is here...https://scrimba.com/learn/python/variables-cZn93eHD

My question is something like - ’How do I make such tutorials display graphs in the little browser widget, while being the most pythonic possible?’
Any graphing packages that can be used that are not C-based? or maybe there are some ports?

Could ’overloading of functions’ be used, pointing to actual other functions? ( as described in earlier thread on filehandling mockups, example here: scrimba.com/scrim/cn3GWrhJ

Any suggestions most welcome!

Ray Luo

unread,

May 22, 2021, 5:03:11 AM5/22/21

to brython

Hi Olof,

Thanks for your interest. And good job on your Python course!

> As a neophyte in the area still...

By definition, I think you are right, as Charts . css . py is only 3 weeks old, and its upstream project Charts.css is also relatively new at 8-month old. But if your impression came from Charts.css.py's lack of document 2 days ago, I fixed it just now.

1. I converted the pure-Python Charts . css . py into a Brython-friendly Javascript file, hosted as an asset of recent release on github's release page.

2. With #1 readily available, an online document for Charts . css . py is hosted as a static website here. All the charts inside that document are dynamically run in Brython, so, you are seeing them live. (It means no more mismatching screenshots which Andy once encountered.)

3. The documentation's html source code also doubles as an example on how to organize multiple charts in same html page.

However, I am not able to get it work on Scrimba, due to an unexpected obstacle: Charts . css . py is developed and tested with Brython 3.9, and it turns out it does not work with Brython 3.7 and 3.8. However, attempting to run Brython 3.9 in Scrimba ends up with this error "Javascript error, TypeError: this.addEntry is not a function". Olof, if you can double check and reproduce that Brython 3.9 issue, please start ANOTHER conversation on the Scrimba topic. By the way, "overloading of functions" is *not* the solution here.

Regards,

Ray Luo

Andy Lewis

unread,

May 22, 2021, 6:13:50 AM5/22/21

to brython

Hello Olof and Ray

Yes, I found the same problem when I tried to use my brycharts package on Scrimba: brycharts needs Brython 3.9, but Scrimba won't work with a version higher than Brython 3.7. I think that Scrimba need to fix this problem, because Brython will keep evolving, in line with CPython.

Best wishes

Andy

dgront

unread,

May 22, 2021, 7:02:19 AM5/22/21

to bry...@googlegroups.com

Hi,

so what are the Python 3.9 features that you can't step down to 3.7? O maybe you don't want to maintain two separate distribution?

Best,

Dominik Gront

--
You received this message because you are subscribed to the Google Groups "brython" group.
To unsubscribe from this group and stop receiving emails from it, send an email to brython+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/brython/224d8b85-d7fa-4aba-8411-2f3a4d8545d5n%40googlegroups.com.

Olof Paulson

unread,

May 22, 2021, 7:44:36 AM5/22/21

to bry...@googlegroups.com

Thanks alot for the feedback!

1. With neophyte I meant that I was. One... wasn’t referring to anyone else;-)

2. I am not sure about scrimba only working above 3.8, i would hope it’s a function of the version you ’ call’ in the html file.

I only had a chance to try Andys module and only the Pie chart worked.

The others threw an error similar to what you mentioned( from memory, on phone now)

If you can send the hyml and index.py code you used/ tried I can see if i can het same result( splitting code up and not having all of it in the index.html file was my first challenge and I still don’t exactly understand when it worked and when it didn’t- very try everything and see what sticks for me... bit I suck ;-) )

I can ping the scrimba guys if anyone can figure what is ’ messed up’

Maybe running pyodide will show different results, but it is VERY slow in scrimba.... but i suspect my old mac is a culprit ...)

Will try more later today and thanks a million for your responses and help!

Until later

//Olof

On 22 May 2021, at 13:02, dgront <dgr...@gmail.com> wrote:

You received this message because you are subscribed to a topic in the Google Groups "brython" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/brython/djoCkPq8cnE/unsubscribe.
To unsubscribe from this group and all its topics, send an email to brython+u...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/brython/CAKKq%3DUSL%2B%3Dj4A-tij6-j0eqfcmcx5Ns5SBRnWTFms%2BpsRbXw2g%40mail.gmail.com.

Andy Lewis

unread,

May 22, 2021, 9:10:08 AM5/22/21

to brython

On Saturday, May 22, 2021 at 12:02:19 PM UTC+1 dgront wrote:

>Hi,

>so what are the Python 3.9 features that you can't step down to 3.7? O maybe you don't want to maintain two separate distribution?

Hi Dominik

For me the things that immediately fail are walrus operators. I could go through and eliminate those, they sometimes make code neater but can always be worked round. I don't know what the next issue would be, but I'd be surprised if there wasn't one - a lot has changed in Brython in the past 2 years.

Best wishes

Andy

Ray Luo

unread,

May 23, 2021, 2:55:26 PM5/23/21

to brython

Hi folks,

Scrimba seems to be able to run Brython 3.9 now. So, this is charts.css.py running on Brython 3.9, on Scrimba. https://scrimba.com/scrim/cqW4kmuG

@Olof, this should unblock you from your next tutorial chapter of "creating graphs for tutorial purposes in an interactive envireonment such as scrimba". Can't wait to see what you can do with that. :-)

Regards,

Ray Luo

Olof Paulson

unread,

May 24, 2021, 12:18:55 PM5/24/21

to brython

Thank you so much Ray, I really appreciate you making the effort and holding my hand all the way to the ’run’ button...It makes life so much easier for those of us, not so great at this...i.e me...
I will try it out and try to feedback...

still trying to figure out what makes most sense to build some tutorials around...
- some graphs showing exponential growth of various R numbers for Covid variants
- maybe do some finance stuff with line graphs

on one level I am slightly worried fewer will care about tutorial, unless it’s a matplotlib tutorial...But not sure...

Looking into Turtle as well... I think maybe partof the reason I’m not churning out tutorials is a problem with me and not so much Brython and/or Scrimba ;-)

Olof Paulson

unread,

Jun 3, 2021, 3:55:23 AM6/3/21

to brython

Hi Ray
Great presentation and nice to meet you!

I tried the scrimba -scrim page you created and while it displays graph when loaded I get a weird error when trying to execute code , or modifying it...And When opening it is Firefox it doesn’t display at all a graph and it looks like you are trying to a add a CSV to read data from...
Also the issue mentioned about Python 3.9 not working in scrimba seems to be back( or my computer is messed up) ’this.addEntry’ ??

Reading from file:
Scrimba doesn’t allow reading from files placed in the ’file tree’...I’m not sure how ’true ’ that is, since it is obviously possible to have scripts on a page...
for my file reading tutorial we did a fake file read using local storage
https://scrimba.com/scrim/cn3GWrhJ

the csv files in my file tree are there as view only and don’t actually ’do anything’ - they basically just mimic what the setup would look like on a ’normal python environ’...without the scrimba lockdown of file reading/ writing

Ideas for ’reading data’ for chart in Scrimba

Works:
0. reuse the same method as in the filereading tutorial above, i.e preloading data into local storage and then using it

1. just place a variable above the code that contains all the data you are working with (messy and may take up alot of space, and not very ’sexy’ to look at for the user)
possible improvement: if preload code, could be moved to a secondary scriptfile, that would ’declutter/ clean up’ the index.py file to contain ’Only ’clean’ python code

-other alternative would be to hold the data in the index.html file...
I have not understood how to access/ share data between the various files used (index.html, index.py) So I am not sure how ’code’ in index.py can ’see ’ variables etc in the index.html file...
I am guessing this is ’my level of skill’ rather than that it is hard/ impossible ;-)

Don’t know
1. maybe it is possible to access data direct from a URL? that delivers a csv or some other format?

2. as above introducing a 2nd scriptfile to scrimba e.g.

-index.html

-index.py

-data.py

and in this data.py file you have a variable or a function/class that gives you the data which is hardcoded in that file...

The benefit again would be to declutter the index.py file to contain only ’actual correct non fake-workaround python code’ that looks exactly like what user would use ’in other environs’

except...the call for that function/use of class...unless the function overload something like the readfile workaround...

My problem is I am not able to get multiple script files or even sharing data( between files) to work...since I suck ;-)

I don’t know what best approach is...I like the Fileread workaround...it’s very nice...except all the code I have to put at top of index.py file, to ’hide from user’....if it could be moved to a separate script file or into the index.HTML page that would be even better ( for decluttering/ clean) purposes

So right now I am alittle stuck...first issue is that your graphing scrim isn’t executing properly except on load? I don’t even know where to start troubleshooting that...
Any ideas/ help much welcomed
Will restart and try another computer..

Reply all

Reply to author

Forward