highcharts-for-python / highcharts-core

Python wrapper for the Highcharts Core JavaScript library
https://www.highcharts.com/integrations/python
Other
54 stars 14 forks source link

Jupyter Error on rendering chart from_pandas when df has NaN values #200

Closed ThomasGl closed 1 week ago

ThomasGl commented 3 weeks ago

Describe the bug

Issue to display a graph when rendered from pandas on jupyter context, where some values are NaN in the dataframe

To Reproduce

Run the following code on python jupyter environment, then switch the None data for some integer and it will yield the chart.

import pandas as pd
import datetime as dt
import numpy as np
df = pd.DataFrame([
    {"ref_date": dt.date(2024, 1, 1), "data": 1},
    {"ref_date": dt.date(2024, 1, 2), "data": 5},
    {"ref_date": dt.date(2024, 1, 3), "data": 2},
    {"ref_date": dt.date(2024, 1, 4), "data": 4},
    {"ref_date": dt.date(2024, 1, 5), "data": None},
])

df['ref_date'] = pd.to_datetime(df['ref_date'])
df.set_index('ref_date', inplace=True)
df.index = (df.index.astype(np.int64) / 10**6).astype(np.int64)

from highcharts_core.chart import Chart
chart = Chart.from_pandas(
    df=df.reset_index(),
    series_type='line',
    property_map={
        'x': df.index.name,
        'y': df.columns.to_list()
    }
)

chart.options.x_axis = {
    'type': 'datetime'
}

chart.display()

I am getting the following error:

Something went wrong with the Highcharts.js script. It should have been automatically loaded, but it did not load for over 5 seconds. Check your internet connection, and then if the problem persists please reach out for support. (You can also check your browser's console log for more details.)

Detailed Error Message:
nan is not defined

Expected behavior

Attain a chart as:

image

Your Environment:

image

Additional context

This is due to javascript not having None as nan , but rather NaN or null. I will be sending a PR shortly to fix this matter, as I have already found a solution