better chart performance

[bluemonk3y]

might provide high performance alternative to apex charts.

https://www.zingchart.com/docs/integrations/vue

Good comparison here
https://leeoniya.github.io/uPlot/demos/multi-bars.html

[leeoniya]

probably not [1] ;)

[1] https://github.com/leeoniya/uPlot#performance

[logscape]

Thank you!

…

On Thu, 7 May 2020, 18:28 Leon Sorokin, ***@***.***> wrote: probably not [1] ;) [1] https://github.com/leeoniya/uPlot#performance — You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub <#65 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAWVFJIDOHGNC64KSU3RD2TRQLVVDANCNFSM4M3PGKHA> .

[logscape]

@leeoniya - can you recommend an efficient scatter-plot chart?

[logscape]

Scatter plot: https://github.com/David-Desmaisons/vue-plotly

[leeoniya]

that specific example has x-aligned data. if this is what you want (or can massage your data to be x-aligned), then uPlot does it out of the box. you may just need to null-pad some series as i do in [1] or as seen in [2]. it's unusual to have a true scatter plot with connected points:

leeoniya/uPlot#107 (comment)

[1] https://leeoniya.github.io/uPlot/demos/time-periods.html
[2] leeoniya/uPlot#94

[logscape]

Thanks for the examples! I want to build a scatter plot that acts like a timeseries heatmap showing groups of individual transactions. The y axis represents the duration, the colour is a heatmap of how many transactions occur in that x/y bucket range...This approach shows the distribution of transactions by latency and density using color.

[leeoniya]

something like below?

you can certainly do this in uPlot with a splash of extra code. you'd need to implement a simple custom points renderer. like the draw-hooks, multi-bars and candlestick-ohlc demos do. e.g.

https://github.com/leeoniya/uPlot/blob/8f5eea003ac101b08a9a33cc11d6c6b63ee4cc9c/demos/draw-hooks.html#L119

[leeoniya]

might actually be a good demo to add to uPlot, if you'd like to take a stab at it :)

[logscape]

Perfect!

…

On Thu, 7 May 2020, 20:42 Leon Sorokin, ***@***.***> wrote: something like below? you can certainly do this in uPlot with a splash of extra code. you'd need to implement a simple custom points renderer. like the draw-hooks, multi-bars and candlestick-ohcl demos do. e.g. https://github.com/leeoniya/uPlot/blob/8f5eea003ac101b08a9a33cc11d6c6b63ee4cc9c/demos/draw-hooks.html#L119 [image: image] <https://user-images.githubusercontent.com/43234/81337032-f5555000-906f-11ea-983b-cf0030dd8a2b.png> — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#65 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAWVFJJ5GG6FTFL4H3E3UV3RQMFJLANCNFSM4M3PGKHA> .

[leeoniya]

i guess the main difference is that you can't hover the individual points as you can in a true scatter plot. but you can still render out the values in a custom legend or tooltip for display.

[logscape]

Will it support click ability so I can fetch underlying data?

…

On Thu, 7 May 2020, 20:47 Leon Sorokin, ***@***.***> wrote: i guess the main difference is that you can't hover the individual points as you can in a true scatter plot. but you can still render out the values in a custom legend or tooltip for display. — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#65 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAWVFJMPENEQYIMFNYHXGBDRQMF6RANCNFSM4M3PGKHA> .

[leeoniya]

well, the points will be static. however, there's an API to get the data index from cursor position, so if you add a click handler you can do whatever you need there, e.g.: https://leeoniya.github.io/uPlot/demos/candlestick-ohlc.html

[bluemonk3y]

@leeoniya - I'm prototyping from your demos - just started but it feels promising while I get my head around uPlot. 2 questions....

1. My RHS Axis is being chopped off - losing the trailing 000s. Im plotting values up to 2m. Alternativeliy - I could use a Y value numbering that drops the 0s in favour of 1m 1.5m 2m etc?

2. How do I handle click events? I need to register a click handler and then figure out what the underlying data point is. Is there a demo for how I can do this?

[leeoniya]

hey @bluemonk3y

1. there's no axis auto-sizing, so you can either change the formatting or set a larger axis.size. i personally prefer the shorter labels.
2. if you want to click on points, take a look at Click on a point leeoniya/uPlot#239, if you want to handle arbitrary clicks on the plot, just bind a click handler to u.root.querySelector(".over") and then read off the properties of u.cursor. idx is the index into the data array(s) of the closest hovered x offset. otherwise you can feed left and top to u.posToVal() to get the values along a given scale, e.g. https://leeoniya.github.io/uPlot/demos/tooltips.html