highcharts-for-python / highcharts-for-python-demos

Collection of demo visualizations using the Highcharts for Python toolkit

Highcharts for Python Demos

This is a collection of demonstrations of the Highcharts for Python toolkit. Fundamentally, they are a Python port of the fantastic demos that Highsoft has already published for their Highcharts JavaScript library.

WARNING: The MyBinder service which we use to provide a convenient demo environment is having some major capacity and infrastructure issues as of April 27th, 2023, mentioned here and described in greater detail here. These issues may cause unstable behavior if trying to launch MyBinder with the demo repo. Hopefully, they will address their infrastructure issues soon. In the meantime, if you are having difficulty launching a binder, you can always use checkout the demo repo and run the demos locally in your environment as described below.

Overview

The demos showcase a variety of ways of working with Highcharts for Python to create and visualize data. Because Highcharts for Python provides multiple paths to create your visualizations, we have tried to showcase various methods. Some demos use:

• Direct instantiation. They create Python instances of objects using Python constructors like LineSeries(...) directly.
• .from_js_literal(). They create HighchartsOptions instances by taking a string of a JS literal option configuration using the .from_js_literal() method.
• .from_dict(). They create Python instances using the Highcharts for Python .from_dict() convenience method.
• other demo-specific techniques, which may vary from demo to demo

Each demo ultimately demonstrates one or more visualizations using one of the techniques mentioned above. The basic pattern we use is to:

1. Import the needed dependencies.
2. Assemble the options.
3. Assemble the chart.
4. Visualize the chart.

NOTE!! The demos in this repository are a work in progress, and various demos will be added over time. Please check back periodically to see if new demos have been added.

How to Use the Demos

Organization

The demos are organized in Jupyter Notebooks, which make it easy to follow how they work, see their results in action, and experiment with them as needed.

The repository is organized into folders for each of the Highcharts for Python libraries:

• highcharts-core contains demos of the Highcharts Core for Python library
• highcharts-stock contains demos of the Highcharts Stock for Python library
• highcharts-maps contains demos of the Highcharts Maps for Python library
• highcharts-gantt contains demos of the Highcharts Gantt for Python library

Within each of these folders, you will find sub-folders grouping demos into a particular category. For example:

• the highcharts-core/line-charts folder contains Jupyter Notebooks which demonstrate different line chart functionality.
• the highcharts-core/python-features folder contains Notebooks which demonstrate some Python-specific features

Using the Demos via MyBinder.org

SEE WARNING ABOVE related to the current MyBinder infrastructure/capacity/stability issues.

The easy way to use or review the demos is to launch a MyBinder session using the following buttton:

Once the MyBinder launches, you will find yourself in a Jupyter Lab environment within a Docker image. You'll have this full repository available to you, and you can navigate the folders to find the demo you want to run.

For example, to see how Highcharts Core for Python generates a basic line chart, you can open the Notebook at highcharts-core/line-charts/basic-line.ipynb.

Then just run the Notebook, and you should see the results.

Using the Demos Locally

To use the demos locally, you need to take several additional steps:

1. First, clone this Github repo:

   $ git clone [email protected]:highcharts-for-python/highcharts-for-python-demos.git
   

2. Next, navigate to its directory:

   $ cd highcharts-for-python-demos
   
   highcharts-for-python-demos/ (master)
   $
   

3. Create a virtual environment:

   highcharts-for-python-demos/ (master)
   $ python -m venv .venv
   

4. Then activate your virtual environment:

   highcharts-for-python-demos/ (master)
   $ source .venv/Scripts/activate
   
   (.venv)
   highcharts-for-python-demos/ (master)
   $
   

5. And install the requirements:

   (.venv)
   highcharts-for-python-demos/ (master)
   $ pip install -r requirements.txt
   

6. And finally, open up Jupyter Lab:

   (.venv)
   highcharts-for-python-demos/ (master)
   $ jupyter-lab
   

You should now see the set of notebooks included in the repo, along with relevant data files and other details.

For example, to see how Highcharts Core for Python generates a basic line chart, you can open the Notebook at highcharts-core/line-charts/basic-line.ipynb.

Then just run the Notebook, and you should see the results.

Contributing to the Demos

If you wish to contribute demos to this library:

1. First, clone this Github repo:

   $ git clone [email protected]:highcharts-for-python/highcharts-for-python-demos.git
   

2. Next, navigate to its directory:

   $ cd highcharts-for-python-demos
   
   highcharts-for-python-demos/ (master)
   $
   

3. Create a virtual environment:

   highcharts-for-python-demos/ (master)
   $ python -m venv .venv
   

4. Activate your virtual environment:

   highcharts-for-python-demos/ (master)
   $ source .venv/Scripts/activate
   
   (.venv)
   highcharts-for-python-demos/ (master)
   $
   

5. Install the requirements:

   (.venv)
   highcharts-for-python-demos/ (master)
   $ pip install -r requirements.txt
   

6. Install the pre-commit hook (which strips output from the Jupyter Notebooks on commit):

   (.venv)
   highcharts-for-python-demos/ (master)
   $ pre-commit install
   

7. Create a new branch in your repo that you will use for your changes.

8. Either edit the existing Jupyter Notebooks or add new ones using the basic conventions and pattern that you'll find in our other demos.

9. Commit your changes and push them to this Github repo.

10. File a Pull Request to merge changes from your branch to the develop branch.

And that's it! Thank you for your contributions, they are much appreciated.

highcharts-for-python-demos's Issues

Add demo for Sankey diagram

Hi @hcpchris,

Could I suggest to maybe add a demo for a Sankey diagram in the demo repository ?
https://github.com/highcharts-for-python/highcharts-for-python-demos

Because to try to understand how it works, I took a look at the JS examples:
https://www.highcharts.com/samples/highcharts/demo/sankey-diagram?jsfiddle
And as you can see, in JS the tooltip is at the same level as series, so it's a bit confusing.
Especially since pointFormat works perfectly at this level.

Also the workflow in JS seems to be heavily oriented about using a pattern with keys:

keys: ['from', 'to', 'weight'],
data: [
    ['Solar', 'Electricity & Heat', 0.48],
    ...,
],

which is not implemented yet in Python no ? or I could not get it to work.

Thanks a lot for your help,

Originally posted by @JulienBacquart in highcharts-for-python/highcharts-core#148 (comment)

Notebooks are not working or running using a MyBinder session

Dear,

The notebooks don't give any results using a MyBinder session.

I get two types of errors:

1. 500: Internal Server Error and jupyter lab doesn't open
2. Jupyter lab opens, I can run the notebooks but I get the respons:
   Something went wrong with the Highcharts.js script. It should have been automatically loaded, but it did not load for over 3 seconds. Check your internet connection, and then if the problem persists please reach out for support.

Greetings,
Guillaume

highcharts-core/python-features/from-pandas.ipynb not working, data contains NaN

Example:
highcharts-core/python-features/from-pandas.ipynb

isn't working. On data file highcharts-core/python-features/from-pandas.csv there is a column with empty values that became NaN in pandas and that highcharts doesn't like.

Highcharts stocks rendering issues in demo and selfhosted

Dear,

I've been playing around a bit with highcharts for python and the demos available.
I'm currently having two issues with the demos and the selfhosted jupyterlab version i'm running locally. Everything is exactly the same except the python3 version I'm running on. I'm on python 3.10.13. I've tried it on python 3.11 and I have the exact same issues. I'll try reverting back to 3.10.10 later in the day to test things out. The demo used here is the following stock-tools-gui.ipynb but I have had the issue on any other demo or own notebook that i created.

The first issue I'm having is that I'm not able to render the chart context menu that is on the top right of the charts in my own selfhost version of the demo repository. On the Binder projects

The second issue I'm having is, the stocktools is not rendering in the binder version but it is on my selfthosted one but very badly. The bar is halfly rendered and the buttons doesn't seem to respond correctly. For instance I'm not able to put the charts in full screen. This issue happens on any screen sizes , even very large ones. Of course I have the following options enabled:

'stockTools': {
'gui': {
'enabled': True
}

Here are two screenshots illustrating the two issues.

Binder demo without the stocktools and with the chart context menu:

My selfhosted demo with the badly rendered stocktools and with the chart context menu missing:

I don't know if I'm missing anything, but it doesn't to be the case according to what i have read in the documentation.

Thanks in advance for any response,
KR,
R2boot3r