You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@echarts.apache.org by Per Franck <pe...@gmail.com> on 2021/11/05 16:00:06 UTC
most optimized line chart
hello, i'm trying to produce the most optimized rendering of echarts
possible. my dataset will be 32k, 65k, 128k datapoints and refreshed
continuously as fast as the server can provide (at the moment ~10ms). I've
plunked around with echarts and I'm getting a render time of 32k datapoints
(myChart.setOption({series: [{data: g_dataset}]});) of a fairly respectable
50-90 ms on a 1200x400 px using canvas renderer in chrome, 90-140ms in
Firefox, 70-110ms in edge.
my initial options are as follows, based on the dynamic data example.
option = {
animation: false,
title: {
text: 'Dynamic Data & Time Axis'
},
dataZoom: [
{
id: 'dataZoomX',
type: 'slider',
xAxisIndex: [0],
filterMode: 'filter'
},
{
id: 'dataZoomY',
type: 'slider',
yAxisIndex: [0],
filterMode: 'empty'
}
],
grid:{
show:true,
tooltip:{show:false}
},
xAxis: {
type: "value",
splitLine: {
show: false
}
},
yAxis: {
type: 'value',
boundaryGap: [0, '100%'],
splitLine: {
show: false
}
},
series: [
{
name: 'Fake Data',
type: 'line',
showSymbol: false,
data: g_dataset
}
]
};
any thoughts on what knobs to tweak to further improve rendering times
using echarts?
Re: most optimized line chart
Posted by Yi Shen <sh...@gmail.com>.
symbol draw will cause performance drop significantly. So don't forget to
disable it:
{
showSymbol: false
}
And remove dataZoom if you don't need it. It will process the data and drop
the performance a bit.
Other components like tooltips won't affect the performance. But if you
don't like it, you can just remove the whole property about this component
from the option.
Regards.
On Tue, Nov 9, 2021 at 12:53 AM Per Franck <pe...@gmail.com> wrote:
> Thanks, Yi.
>
> What kind of parameters/options do you use for configuring the chart
> otherwise? i want to remove anything "fancy" such as tooltip or pretty
> drawing or anything else that could slow the rendering down.
>
> -- Per
>
> On Sun, Nov 7, 2021 at 6:43 PM Yi Shen <sh...@gmail.com> wrote:
>
>> Hi,
>> Store data in a static TypedArray may reduce the memory pressure and
>> improve the performance significantly.
>>
>> For example:
>>
>> const data = new Float32Array(1e6 * 2);
>> for (let i = 0; i < 1e6; i++) {
>> data[i * 2] = x
>> data[i * 2 + 1] = y
>> }
>>
>> option = {
>> series: [{
>> type: 'line',
>> data: data,
>> dimensions: ['foo', 'bar'],
>> encode: { x: 'foo', y: 'bar' }
>> }]
>> }
>>
>> Notice *dimensions* and *encode* properties should be given. It
>> determines what shape your data is and how it supposed to be encoded to
>> visual dimensions.
>>
>> We've tested, updating data using TypedArray can be realtime (about 30ms
>> each frame) even the data amount scales up to 1 million. Of course to
>> achieve this kind of performance, the basic requirement is you can't
>> allocate a 1 million dynamic array in the other places.
>>
>> Regards.
>>
>> On Sat, Nov 6, 2021 at 12:41 AM Per Franck <pe...@gmail.com> wrote:
>>
>>> hello, i'm trying to produce the most optimized rendering of echarts
>>> possible. my dataset will be 32k, 65k, 128k datapoints and refreshed
>>> continuously as fast as the server can provide (at the moment ~10ms).
>>> I've
>>> plunked around with echarts and I'm getting a render time of 32k
>>> datapoints
>>> (myChart.setOption({series: [{data: g_dataset}]});) of a fairly
>>> respectable
>>> 50-90 ms on a 1200x400 px using canvas renderer in chrome, 90-140ms in
>>> Firefox, 70-110ms in edge.
>>>
>>> my initial options are as follows, based on the dynamic data example.
>>>
>>>
>>> option = {
>>> animation: false,
>>> title: {
>>> text: 'Dynamic Data & Time Axis'
>>> },
>>> dataZoom: [
>>> {
>>> id: 'dataZoomX',
>>> type: 'slider',
>>> xAxisIndex: [0],
>>> filterMode: 'filter'
>>> },
>>> {
>>> id: 'dataZoomY',
>>> type: 'slider',
>>> yAxisIndex: [0],
>>> filterMode: 'empty'
>>> }
>>> ],
>>> grid:{
>>> show:true,
>>> tooltip:{show:false}
>>> },
>>> xAxis: {
>>> type: "value",
>>> splitLine: {
>>> show: false
>>> }
>>> },
>>> yAxis: {
>>> type: 'value',
>>> boundaryGap: [0, '100%'],
>>> splitLine: {
>>> show: false
>>> }
>>> },
>>> series: [
>>> {
>>> name: 'Fake Data',
>>> type: 'line',
>>> showSymbol: false,
>>> data: g_dataset
>>> }
>>> ]
>>> };
>>>
>>> any thoughts on what knobs to tweak to further improve rendering times
>>> using echarts?
>>>
>>
>>
>> --
>> Yi Shen
>> Apache ECharts PMC
>>
>
--
Yi Shen
Apache ECharts PMC
Re: most optimized line chart
Posted by Per Franck <pe...@gmail.com>.
Thanks, Yi.
What kind of parameters/options do you use for configuring the chart
otherwise? i want to remove anything "fancy" such as tooltip or pretty
drawing or anything else that could slow the rendering down.
-- Per
On Sun, Nov 7, 2021 at 6:43 PM Yi Shen <sh...@gmail.com> wrote:
> Hi,
> Store data in a static TypedArray may reduce the memory pressure and
> improve the performance significantly.
>
> For example:
>
> const data = new Float32Array(1e6 * 2);
> for (let i = 0; i < 1e6; i++) {
> data[i * 2] = x
> data[i * 2 + 1] = y
> }
>
> option = {
> series: [{
> type: 'line',
> data: data,
> dimensions: ['foo', 'bar'],
> encode: { x: 'foo', y: 'bar' }
> }]
> }
>
> Notice *dimensions* and *encode* properties should be given. It
> determines what shape your data is and how it supposed to be encoded to
> visual dimensions.
>
> We've tested, updating data using TypedArray can be realtime (about 30ms
> each frame) even the data amount scales up to 1 million. Of course to
> achieve this kind of performance, the basic requirement is you can't
> allocate a 1 million dynamic array in the other places.
>
> Regards.
>
> On Sat, Nov 6, 2021 at 12:41 AM Per Franck <pe...@gmail.com> wrote:
>
>> hello, i'm trying to produce the most optimized rendering of echarts
>> possible. my dataset will be 32k, 65k, 128k datapoints and refreshed
>> continuously as fast as the server can provide (at the moment ~10ms). I've
>> plunked around with echarts and I'm getting a render time of 32k
>> datapoints
>> (myChart.setOption({series: [{data: g_dataset}]});) of a fairly
>> respectable
>> 50-90 ms on a 1200x400 px using canvas renderer in chrome, 90-140ms in
>> Firefox, 70-110ms in edge.
>>
>> my initial options are as follows, based on the dynamic data example.
>>
>>
>> option = {
>> animation: false,
>> title: {
>> text: 'Dynamic Data & Time Axis'
>> },
>> dataZoom: [
>> {
>> id: 'dataZoomX',
>> type: 'slider',
>> xAxisIndex: [0],
>> filterMode: 'filter'
>> },
>> {
>> id: 'dataZoomY',
>> type: 'slider',
>> yAxisIndex: [0],
>> filterMode: 'empty'
>> }
>> ],
>> grid:{
>> show:true,
>> tooltip:{show:false}
>> },
>> xAxis: {
>> type: "value",
>> splitLine: {
>> show: false
>> }
>> },
>> yAxis: {
>> type: 'value',
>> boundaryGap: [0, '100%'],
>> splitLine: {
>> show: false
>> }
>> },
>> series: [
>> {
>> name: 'Fake Data',
>> type: 'line',
>> showSymbol: false,
>> data: g_dataset
>> }
>> ]
>> };
>>
>> any thoughts on what knobs to tweak to further improve rendering times
>> using echarts?
>>
>
>
> --
> Yi Shen
> Apache ECharts PMC
>
Re: most optimized line chart
Posted by Yi Shen <sh...@gmail.com>.
Hi,
Store data in a static TypedArray may reduce the memory pressure and
improve the performance significantly.
For example:
const data = new Float32Array(1e6 * 2);
for (let i = 0; i < 1e6; i++) {
data[i * 2] = x
data[i * 2 + 1] = y
}
option = {
series: [{
type: 'line',
data: data,
dimensions: ['foo', 'bar'],
encode: { x: 'foo', y: 'bar' }
}]
}
Notice *dimensions* and *encode* properties should be given. It determines
what shape your data is and how it supposed to be encoded to visual
dimensions.
We've tested, updating data using TypedArray can be realtime (about 30ms
each frame) even the data amount scales up to 1 million. Of course to
achieve this kind of performance, the basic requirement is you can't
allocate a 1 million dynamic array in the other places.
Regards.
On Sat, Nov 6, 2021 at 12:41 AM Per Franck <pe...@gmail.com> wrote:
> hello, i'm trying to produce the most optimized rendering of echarts
> possible. my dataset will be 32k, 65k, 128k datapoints and refreshed
> continuously as fast as the server can provide (at the moment ~10ms). I've
> plunked around with echarts and I'm getting a render time of 32k datapoints
> (myChart.setOption({series: [{data: g_dataset}]});) of a fairly respectable
> 50-90 ms on a 1200x400 px using canvas renderer in chrome, 90-140ms in
> Firefox, 70-110ms in edge.
>
> my initial options are as follows, based on the dynamic data example.
>
>
> option = {
> animation: false,
> title: {
> text: 'Dynamic Data & Time Axis'
> },
> dataZoom: [
> {
> id: 'dataZoomX',
> type: 'slider',
> xAxisIndex: [0],
> filterMode: 'filter'
> },
> {
> id: 'dataZoomY',
> type: 'slider',
> yAxisIndex: [0],
> filterMode: 'empty'
> }
> ],
> grid:{
> show:true,
> tooltip:{show:false}
> },
> xAxis: {
> type: "value",
> splitLine: {
> show: false
> }
> },
> yAxis: {
> type: 'value',
> boundaryGap: [0, '100%'],
> splitLine: {
> show: false
> }
> },
> series: [
> {
> name: 'Fake Data',
> type: 'line',
> showSymbol: false,
> data: g_dataset
> }
> ]
> };
>
> any thoughts on what knobs to tweak to further improve rendering times
> using echarts?
>
--
Yi Shen
Apache ECharts PMC