pandas-ai icon indicating copy to clipboard operation
pandas-ai copied to clipboard

Published 20 hours ago • verified publisher icon Sinaptik-AI

Can we support draw a graph using echarts?

Open KevinZhang19870314 opened this issue 1 year ago • 3 comments

🚀 The feature

I check that we only support pyplot, can we support draw a graph using echarts? as echarts has very rich charts type.

Motivation, pitch

We want using echarts to draw rich charts, and chat with csv file not only just text, also rich graph.

Alternatives

No response

Additional context

No response

KevinZhang19870314 avatar Jun 01 '23 03:06 KevinZhang19870314

It looks like ECharts is a JavaScript library. It does seem very cool! Do you know of any Python equivalents?

jonbiemond avatar Jun 01 '23 04:06 jonbiemond

@jonbiemond

Yes, this is the Python Echarts Plotting Library

KevinZhang19870314 avatar Jun 01 '23 06:06 KevinZhang19870314

@KevinZhang19870314 thanks a lot for the suggestion. Guess we could include echarts within the whitelisted libraries!

gventuri avatar Jun 01 '23 23:06 gventuri

ChatGPT (GPT-3.5-turbo): Today is 2023-06-06. You are provided with a pandas dataframe (df) with 4078 rows and 19 columns. This is the result of print(df.head(5)):

Customer Name Contract Type Software Type Order Type Contact Name Created Time Signed Date Modified Time Order Gross Profit Gross Margin Commission Responsible Person Status Contract Order Number Contract Amount Product Name Quantity Price Remarks 0 Xi Analytical Instrument Co., Ltd. Rental Enterprise New Order Xiang Xi 2023-05-11 17:35:41 2023-05-15 2023-05-11 17:35:41 2317.0 100.0 0.0 far Already Created SO20230519-4139 2340.0 Enterprise Edition Rental 1 2340.0 None 1 Shen Equipment Co., Ltd. (Alibaba Cloud) Rental Enterprise Old Order Huona 2023-05-15 09:16:12 2023-05-11 2023-05-15 09:16:12 4634.0 100.0 0.0 far Already Created SO20230511-4137 2340.0 Enterprise Edition Rental 1 4680.0 11 users 2 Cheng Real Estate Marketing Co., Ltd. Rental Enterprise Old Order Ms. Wang 2023-05-11 14:57:46 2023-05-11 2023-05-19 11:27:42 2317.0 100.0 0.0 fanny Already Created SO20230511-4136 2340.0 Enterprise Edition Rental 1 2340.0 NaN 3 Shang Auto Parts Co., Ltd. Rental Enterprise New Order Chen Jiejun 2023-05-19 11:27:42 2023-05-11 2023-05-11 15:17:59 2780.0 100.0 0.0 fanny Already Created SO20230511-4135 2808.0 Enterprise Edition Rental 1 2340.0 None 4 Shen Technology Co., Ltd. Rental Enterprise Old Order Ao Huijuan 2023-05-11 15:17:59 2023-05-19 2023-05-11 14:57:46 2317.0 100.0 0.0 fanny Already Created SO20230515-4138 4680.0 Enterprise Edition Rental 1 2340.0 NaN.

When asked about the data, your response should include a python code that describes the dataframe df. The generated code must be based on the pyecharts V2 library and rendered into an HTML file named "storage/temp_chart.html". Using the provided dataframe, df, return the python code and make sure to prefix the requested python code with "exactly" and suffix the code with "exactly" to get the answer to the following question: Group the contract amount by year according to the creation time and generate a line chart (line).

Generated Code： ChatGPT (GPT-3.5-turbo):

import pandas as pd from pyecharts.v2 import Line Load data df = pd.read_csv("your_file_name.csv")

Convert create time to datetime format df['Created Time'] = pd.to_datetime(df['Created Time'])

Group by year and sum contract amount df_grouped = df.groupby(df['Created Time'].dt.year)['Contract Amount'].sum()

Create line chart line = Line() line.add_xaxis(df_grouped.index.tolist()) line.add_yaxis("Total Contract Amount", df_grouped.tolist()) line.set_global_opts(title_opts={"text": "Total Contract Amount by Year"})

Render the chart to an html file line.render("storage/temp_chart.html")

According to the template in GeneratePythonCodePrompt, the code generated based on the pyecharts library does not work properly. How can I generate better code that will work without needing modifications?

dfar2008 avatar Jun 06 '23 14:06 dfar2008

@KevinZhang19870314 thanks a lot for the suggestion. Guess we could include echarts within the whitelisted libraries!

@gventuri Hi, I use pyecharts as a whitelisted library, but it gives me a error, here is the code and error: I am run this code at google colab.

code:

# !pip install --upgrade pandas pandasai pyecharts
import pandas as pd
from pandasai import PandasAI
from pandasai.llm.openai import OpenAI

df = pd.DataFrame({
    "country": ["United States", "United Kingdom", "France", "Germany", "Italy", "Spain", "Canada", "Australia", "Japan", "China"],
    "gdp": [21400000, 2940000, 2830000, 3870000, 2160000, 1350000, 1780000, 1320000, 516000, 14000000],
    "happiness_index": [7.3, 7.2, 6.5, 7.0, 6.0, 6.3, 7.3, 7.3, 5.9, 5.0]
})

OPENAI_API_KEY = "your api key"
llm = OpenAI(api_token=OPENAI_API_KEY)

pandas_ai = PandasAI(llm, custom_whitelisted_dependencies=["pyecharts"])
pandas_ai.run(df, prompt='Use pyecharts to Plot the histogram of countries showing for each the gdp, using different colors for each bar')

error:

VM108:2 Uncaught ReferenceError: require is not defined
    at <anonymous>:2:5
    at sa.eval [as h] (output_binary.js:134:311)
    at ua (output_binary.js:16:138)
    at wa.next (output_binary.js:16:437)
    at eval (output_binary.js:17:319)
    at new Promise (<anonymous>)
    at xa (output_binary.js:17:212)
    at I (output_binary.js:17:351)
    at Zf (output_binary.js:134:35)
    at sa.eval [as h] (output_binary.js:133:547)
(anonymous) @ VM108:2
eval @ output_binary.js:134
ua @ output_binary.js:16
next @ output_binary.js:16
eval @ output_binary.js:17
xa @ output_binary.js:17
I @ output_binary.js:17
Zf @ output_binary.js:134
eval @ output_binary.js:133
ua @ output_binary.js:16
next @ output_binary.js:16
eval @ output_binary.js:17
xa @ output_binary.js:17
I @ output_binary.js:17
Xf @ output_binary.js:133
eval @ output_binary.js:131
ua @ output_binary.js:16
next @ output_binary.js:16
b @ output_binary.js:17
Promise.then (async)
f @ output_binary.js:17
eval @ output_binary.js:17
xa @ output_binary.js:17
I @ output_binary.js:17
Z.j @ output_binary.js:131
Tg.j @ output_binary.js:183
eval @ output_binary.js:166
ua @ output_binary.js:16
next @ output_binary.js:16
eval @ output_binary.js:17
xa @ output_binary.js:17
I @ output_binary.js:17
Eg.K @ output_binary.js:166
eval @ output_binary.js:191
ua @ output_binary.js:16
next @ output_binary.js:16
eval @ output_binary.js:17
xa @ output_binary.js:17
I @ output_binary.js:17
Wg.K @ output_binary.js:191
eval @ output_binary.js:164
ua @ output_binary.js:16
next @ output_binary.js:16
b @ output_binary.js:17
Promise.then (async)
f @ output_binary.js:17
eval @ output_binary.js:17
xa @ output_binary.js:17
I @ output_binary.js:17
Fg @ output_binary.js:164
eval @ output_binary.js:164
ua @ output_binary.js:16
next @ output_binary.js:16
b @ output_binary.js:17
Promise.then (async)
f @ output_binary.js:17
Promise.then (async)
f @ output_binary.js:17
Promise.then (async)
f @ output_binary.js:17
Promise.then (async)
f @ output_binary.js:17
Promise.then (async)
f @ output_binary.js:17
eval @ output_binary.js:17
xa @ output_binary.js:17
I @ output_binary.js:17
Cg @ output_binary.js:163
Eg.C.onmessage @ output_binary.js:161
VM109:2 Uncaught ReferenceError: require is not defined
    at <anonymous>:2:9
    at sa.eval [as h] (output_binary.js:134:311)
    at ua (output_binary.js:16:138)
    at wa.next (output_binary.js:16:437)
    at eval (output_binary.js:17:319)
    at new Promise (<anonymous>)
    at xa (output_binary.js:17:212)
    at I (output_binary.js:17:351)
    at Zf (output_binary.js:134:35)
    at sa.eval [as h] (output_binary.js:133:547)
(anonymous) @ VM109:2
eval @ output_binary.js:134
ua @ output_binary.js:16
next @ output_binary.js:16
eval @ output_binary.js:17
xa @ output_binary.js:17
I @ output_binary.js:17
Zf @ output_binary.js:134
eval @ output_binary.js:133
ua @ output_binary.js:16
next @ output_binary.js:16
eval @ output_binary.js:17
xa @ output_binary.js:17
I @ output_binary.js:17
Xf @ output_binary.js:133
eval @ output_binary.js:131
ua @ output_binary.js:16
next @ output_binary.js:16
b @ output_binary.js:17
Promise.then (async)
f @ output_binary.js:17
eval @ output_binary.js:17
xa @ output_binary.js:17
I @ output_binary.js:17
Z.j @ output_binary.js:131
Tg.j @ output_binary.js:183
eval @ output_binary.js:166
ua @ output_binary.js:16
next @ output_binary.js:16
eval @ output_binary.js:17
xa @ output_binary.js:17
I @ output_binary.js:17
Eg.K @ output_binary.js:166
eval @ output_binary.js:191
ua @ output_binary.js:16
next @ output_binary.js:16
eval @ output_binary.js:17
xa @ output_binary.js:17
I @ output_binary.js:17
Wg.K @ output_binary.js:191
eval @ output_binary.js:164
ua @ output_binary.js:16
next @ output_binary.js:16
b @ output_binary.js:17
Promise.then (async)
f @ output_binary.js:17
eval @ output_binary.js:17
xa @ output_binary.js:17
I @ output_binary.js:17
Fg @ output_binary.js:164
eval @ output_binary.js:164
ua @ output_binary.js:16
next @ output_binary.js:16
b @ output_binary.js:17
Promise.then (async)
f @ output_binary.js:17
Promise.then (async)
f @ output_binary.js:17
Promise.then (async)
f @ output_binary.js:17
Promise.then (async)
f @ output_binary.js:17
Promise.then (async)
f @ output_binary.js:17
eval @ output_binary.js:17
xa @ output_binary.js:17
I @ output_binary.js:17
Cg @ output_binary.js:163
Eg.C.onmessage @ output_binary.js:161
editor.main.js:699 Uncaught (in promise) Error: Model not found
    at Se.createModelReference (editor.main.js:699:69368)
    at Jt.<anonymous> (editor.main.js:695:89709)
    at Generator.next (<anonymous>)
    at b (editor.main.js:6:44049)
createModelReference @ editor.main.js:699
(anonymous) @ editor.main.js:695
b @ editor.main.js:6
Promise.then (async)
(anonymous) @ editor.main.js:695
b @ editor.main.js:6
Promise.then (async)
h @ editor.main.js:6
(anonymous) @ editor.main.js:6
Ee @ editor.main.js:6
startFindDefinition @ editor.main.js:695
startFindDefinitionFromMouse @ editor.main.js:695
(anonymous) @ editor.main.js:695
invoke @ editor.main.js:106
deliver @ editor.main.js:106
fire @ editor.main.js:106
_onEditorMouseMove @ editor.main.js:578
(anonymous) @ editor.main.js:578
invoke @ editor.main.js:106
deliver @ editor.main.js:106
fire @ editor.main.js:106
fire @ editor.main.js:667
K.onMouseMove @ editor.main.js:667
emitMouseMove @ editor.main.js:62
emitMouseMove @ editor.main.js:620
_onMouseMove @ editor.main.js:641
(anonymous) @ editor.main.js:641
(anonymous) @ editor.main.js:636
editor.main.js:699 Uncaught (in promise) Error: Model not found
    at Se.createModelReference (editor.main.js:699:69368)
    at Jt.<anonymous> (editor.main.js:695:89709)
    at Generator.next (<anonymous>)
    at b (editor.main.js:6:44049)
createModelReference @ editor.main.js:699
(anonymous) @ editor.main.js:695
b @ editor.main.js:6
Promise.then (async)
(anonymous) @ editor.main.js:695
b @ editor.main.js:6
Promise.then (async)
h @ editor.main.js:6
(anonymous) @ editor.main.js:6
Ee @ editor.main.js:6
startFindDefinition @ editor.main.js:695
startFindDefinitionFromMouse @ editor.main.js:695
(anonymous) @ editor.main.js:695
invoke @ editor.main.js:106
deliver @ editor.main.js:106
fire @ editor.main.js:106
_onEditorKeyDown @ editor.main.js:578
(anonymous) @ editor.main.js:578
invoke @ editor.main.js:106
deliver @ editor.main.js:106
fire @ editor.main.js:106
fire @ editor.main.js:667
K.onKeyDown @ editor.main.js:667
emitKeyDown @ editor.main.js:62
emitKeyDown @ editor.main.js:620
(anonymous) @ editor.main.js:641
invoke @ editor.main.js:106
deliver @ editor.main.js:106
fire @ editor.main.js:106
(anonymous) @ editor.main.js:567
invoke @ editor.main.js:106
deliver @ editor.main.js:106
fire @ editor.main.js:106
_ @ editor.main.js:106

KevinZhang19870314 avatar Jun 25 '23 03:06 KevinZhang19870314

@KevinZhang19870314 seems a JS error, so probably it's the library itself causing it. If you don't mind, please share the pandasai.log file that has been generated in your main folder where you run PandasAI or run it again with verbose=True and share the log and share the pandas_ai.last_code_executed!

gventuri avatar Jun 25 '23 08:06 gventuri

@KevinZhang19870314 seems a JS error, so probably it's the library itself causing it. If you don't mind, please share the pandasai.log file that has been generated in your main folder where you run PandasAI or run it again with verbose=True and share the log and share the pandas_ai.last_code_executed!

@gventuri Here is the pandasai.log

2023-06-25 16:54:29 [INFO] Running PandasAI with openai LLM...
2023-06-25 16:54:29 [INFO] Prompt ID: 749b277e-b015-485e-81a6-222408103b04
2023-06-25 16:54:39 [INFO] 
                        Code generated:
                        ```
                        import pandas as pd
from pyecharts.charts import Bar

df = pd.DataFrame({
    'country': ['France', 'Italy', 'United Kingdom', 'Germany', 'United States'],
    'gdp': [2160000, 3870000, 2160000, 2830000, 2940000],
    'happiness_index': [6.5, 6.0, 7.0, 7.3, 6.5]
})

bar = Bar()
bar.add_xaxis(df['country'].tolist())
bar.add_yaxis('GDP', df['gdp'].tolist(), color='#5793f3')
bar.set_global_opts(title_opts={'text': 'Histogram of Countries by GDP'})
bar.render_notebook()
                        ```
                    
2023-06-25 16:54:39 [INFO] 
Code running:

bar = Bar() bar.add_xaxis(df['country'].tolist()) bar.add_yaxis('GDP', df['gdp'].tolist(), color='#5793f3') bar.set_global_opts(title_opts={'text': 'Histogram of Countries by GDP'}) bar.render_notebook()

KevinZhang19870314 avatar Jun 25 '23 08:06 KevinZhang19870314 

D:\kevinzhang\xxx\venv\Scripts\python.exe D:\kevinzhang\xxx\chore\pandasai_test.py 
Missing optional dependency 'pyecharts.charts'.  Use pip or conda to install pyecharts.charts.
pandas_ai.last_code_executed: 
 bar = Bar()
bar.add_xaxis(df['country'].tolist())
bar.add_yaxis('GDP', df['gdp'].tolist(), color='#5793f3')
bar.set_global_opts(title_opts={'text': 'Histogram of Countries by GDP'})
bar.render_notebook()

Process finished with exit code 0

I noticed that there is one line above this line pandas_ai.last_code_executed: Missing optional dependency 'pyecharts.charts'. Use pip or conda to install pyecharts.charts., but I already installed the pyecharts using pip install pyecharts

KevinZhang19870314 avatar Jun 25 '23 09:06 KevinZhang19870314

@KevinZhang19870314 sorry just had some time to play around:

import pandas as pd
import webbrowser
from pandasai import PandasAI
from pandasai.llm.openai import OpenAI

df = pd.DataFrame({
    "country": ["United States", "United Kingdom", "France", "Germany", "Italy", "Spain", "Canada", "Australia", "Japan", "China"],
    "gdp": [21400000, 2940000, 2830000, 3870000, 2160000, 1350000, 1780000, 1320000, 516000, 14000000],
    "happiness_index": [7.3, 7.2, 6.5, 7.0, 6.0, 6.3, 7.3, 7.3, 5.9, 5.0]
})

llm = OpenAI()

pandas_ai = PandasAI(llm, custom_whitelisted_dependencies=["pyecharts"])
res = pandas_ai.run(df, prompt='Use pyecharts to Plot the histogram of countries showing for each the gdp, using different colors for each bar')
print(res)
webbrowser.open('file://' + res)

This seems to work fine and open the browser with v0.7.0

gventuri avatar Jul 20 '23 23:07 gventuri