EllipseSeries 中的 Maxpointcount - LightningChart JS

Question

I can save memory by setting max point count in scatter chart by following

const pointz = chart.addPointSeries({ pointShape: PointShape.Circle })
    .setName('Kuopio')
    .setPointFillStyle(fillStyles[0])
    .setPointSize(pointSize)
    .setMaxPointCount(10000);

But how do I set it same for EllipseSeries ?

I dont see any such method like setMaxPointCount for EllipseSeries - https://www.arction.com/lightningchart-js-api-documentation/v1.3.0/classes/ellipseseries.html#add

Answer 1

The EllipseSeries doesn't support the setMaxPointCount functionality. The series type is not meant to be used with a lot of data and as such it doesn't have some of the optimizations that exists for PointSeries , LineSeries and other more basic series types.

You can manually remove points from the EllipseSeries by calling EllipseFigure.dispose() on each ellipse you want to remove from the EllipseSeries . Calling dispose will free up all resources used for rendering the ellipse and remove all references to the ellipse internally. If you remove all references to the ellipse in out own code after calling dispose, all of the memory used by the ellipse will be released.

let ellipse = ellipseSeries.add({x:0,y:0,radiusX: 10,radiusY:10}) // ellipse is rendered here
ellipse.dispose() // ellipse is no longer rendered but some memory is still used.
ellipse = undefined // last reference to the ellipse was removed, all memory is freed

 // Extract required parts from LightningChartJS. const { lightningChart, SolidFill, SolidLine, ColorRGBA, emptyFill, emptyTick, FontSettings, AutoCursorModes, Animator, AnimationEasings, UIDraggingModes, UIOrigins, ColorPalettes } = lcjs // Custom callback template. const forEachIn = (object, clbk) => { const obj = {}; for (const a in object) obj[a] = clbk(object[a]); return obj } // Define colors to configure chart and bubbles. const colors = { background: ColorRGBA(255, 255, 255), graphBackground: ColorRGBA(220, 255, 255), title: ColorRGBA(0, 100, 0), subTitle: ColorRGBA(0, 100, 0), bubbleBorder: ColorRGBA(0, 0, 0), bubbleFillPalette: ColorPalettes.fullSpectrum(100) } // Define font settings. const fonts = { title: new FontSettings({ size: 40, weight: 400 }) } // Create and subtitle with the same font settings, except font-size. fonts.subTitle = fonts.title.setSize(20) // Create solid fill styles for defined colors. const solidFillStyles = forEachIn(colors, (color) => new SolidFill({ color })) // Create chart with customized settings const chart = lightningChart().ChartXY({}).setBackgroundFillStyle(solidFillStyles.background).setChartBackgroundFillStyle(solidFillStyles.graphBackground).setTitle('Custom Styled Chart').setTitleFont(fonts.title).setTitleFillStyle(solidFillStyles.title).setTitleMarginTop(6).setTitleMarginBottom(0).setPadding({ left: 5, right: 5, top: 30, bottom: 30 }).setAutoCursorMode(AutoCursorModes.disabled).setMouseInteractionRectangleZoom(undefined).setMouseInteractionRectangleFit(undefined).setMouseInteractions(false) // Get axes. const axes = { bottom: chart.getDefaultAxisX(), left: chart.getDefaultAxisY(), top: chart.addAxisX(true), right: chart.addAxisY(true).setChartInteractions(false) } chart.addUIElement(undefined, { x: chart.uiScale.x, y: axes.right.scale }).setPosition({ x: 50, y: 10 }).setOrigin(UIOrigins.CenterBottom).setMargin({ bottom: 10 }).setText('- With Bubbles -').setFont(fonts.subTitle).setTextFillStyle(solidFillStyles.subTitle).setDraggingMode(UIDraggingModes.notDraggable) // Axis mutator. const overrideAxis = (axis) => axis.setTickStyle(emptyTick).setTitleMargin(0).setNibStyle(line => line.setFillStyle(emptyFill)).setMouseInteractions(undefined) // Override default configurations of axes. for (const axisPos in axes) overrideAxis(axes[axisPos]); [axes.bottom, axes.left].forEach(axis => axis.setInterval(-100, 100).setScrollStrategy(undefined)) const bubblePx = { x: axes.bottom.scale.getPixelSize(), y: axes.left.scale.getPixelSize() } // Create instance of ellipse series to draw bubbles. const ellipseSeries = chart.addEllipseSeries() let bubbleCount = 0 // Handler of dragging bubbles. const bubbleDragHandler = (figure, event, button, startLocation, delta) => { const prevDimensions = figure.getDimensions() figure.setDimensions(Object.assign(prevDimensions, { x: prevDimensions.x + delta.x * figure.scale.x.getPixelSize(), y: prevDimensions.y + delta.y * figure.scale.y.getPixelSize() })) } // Create resizeBubble array and sizeArray to store the values separately const resizeBubble = [] const sizeArray = [] // Create a single bubble to visualize in specific coordinates and specified size. const addBubble = (pos, size) => { const radius = size * 10 const borderThickness = 1 + size * 1.0 const color = colors.bubbleFillPalette(Math.round(Math.random() * 99)) const fillStyle = new SolidFill({ color }) const strokeStyle = new SolidLine({ fillStyle: solidFillStyles.bubbleBorder, thickness: borderThickness }) const figure = ellipseSeries.add({ x: pos.x, y: pos.y, radiusX: radius * bubblePx.x, radiusY: radius * bubblePx.y }).setFillStyle(fillStyle).setStrokeStyle(strokeStyle) // Make draggable by mouse. figure.onMouseDrag(bubbleDragHandler) bubbleCount++ return figure } // Create an event to handle the case when user resizes the window, the bubble will be automatically scaled chart.onResize(() => { for (let i = 0; i <= bubbleMaxCount - 1; i++) { const newBubble = resizeBubble[i].getDimensions() resizeBubble[i].setDimensions({ x: newBubble.x, y: newBubble.y, radiusX: axes.bottom.scale.getPixelSize() * sizeArray[i] * 10, radiusY: axes.left.scale.getPixelSize() * sizeArray[i] * 10 }) } }) // Create a single bubble to visualize in random coordinates and with random size. const addRandomBubble = () => { const pos = { x: Math.random() * 200 - 100, y: Math.random() * 200 - 100 } const size = 1 + Math.random() * 7.0 sizeArray.push(size) resizeBubble.push(addBubble(pos, size)) } // Amount of bubbles to render. const bubbleMaxCount = 100 // Animate bubbles creation. Animator(() => undefined)(2.5 * 1000, AnimationEasings.ease)([[0, bubbleMaxCount]], ([nextBubbleCount]) => { while (bubbleCount < nextBubbleCount) addRandomBubble() }) // dispose all ellipses that have been added before the timeout expires. setTimeout(()=>{ for(let i =0; i < resizeBubble.length; i++){ resizeBubble[i].dispose() } }, 2000)

 <script src="https://unpkg.com/@arction/lcjs@1.3.1/dist/lcjs.iife.js"></script>