Page reload when zooming or updating echart/highchart #3256
-
QuestionHello! I have encountered an issue with plots (echart/highchart) while building my application with NiceGUI. I attempt to plot thousands points on plot and use some tools like zooming, selecting, e.g. provided by echarts framework. Code where i initialize my plot. from nicegui import ui
from datetime import datetime
from random import randint
ui.echart({
'xAxis': {'type': 'time'},
'yAxis': {'type': 'value'},
'legend': {
'orient': 'horizontal',
'bottom': 10
},
'series': [
{'type': 'scatter', 'data': [[datetime(randint(2009, 2050),randint(1,12),randint(1,28)), randint(1, 150000)] for i in range(10000)]} for _ in range(30)
],
'toolbox': {
'show': True,
'feature': {
'saveAsImage': {}
}
},
'dataZoom': [
{
'id': 'dataZoomX',
'type': 'inside',
'xAxisIndex': [0],
'filterMode': 'filter'
}
]
}).classes('w-full h-96')
ui.run() |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 3 replies
-
Hi @golgitab, Can you please share a minimal executable code example? Thanks! |
Beta Was this translation helpful? Give feedback.
-
Thanks for the update, @golgitab! |
Beta Was this translation helpful? Give feedback.
-
Ok, I re-created the large scatter demo in NiceGUI and it runs equally fast: import numpy as np
from nicegui import ui
def gen_data(count, offset):
x = np.random.rand(count) * 10
y = np.sin(x) + offset + 0.1 * np.random.randn(count) * x
return np.stack([x, y]).T.tolist()
data1 = gen_data(500_000, 0)
data2 = gen_data(500_000, 10)
ui.echart({
'title': {'text': f'{len(data1) + len(data2)} Points'},
'tooltip': {},
'toolbox': {'left': 'center', 'feature': {'dataZoom': {}}},
'legend': {'orient': 'vertical', 'right': 10},
'xAxis': [{}],
'yAxis': [{}],
'dataZoom': [{'type': 'inside'}, {'type': 'slider'}],
'animation': False,
'series': [
{
'name': 'A',
'type': 'scatter',
'data': data1,
'dimensions': ['x', 'y'],
'symbolSize': 3,
'itemStyle': {'opacity': 0.4},
'large': True,
},
{
'name': 'B',
'type': 'scatter',
'data': data2,
'dimensions': ['x', 'y'],
'symbolSize': 3,
'itemStyle': {'opacity': 0.4},
'large': True,
}
]
})
ui.run() Maybe the |
Beta Was this translation helpful? Give feedback.
Ok, I re-created the large scatter demo in NiceGUI and it runs equally fast: