/*
 * LightningChartJS example that showcases PointSeries in a 3D Chart.
 */
// Import LightningChartJS
const lcjs = require('@arction/lcjs')

// Extract required parts from LightningChartJS.
const {
    lightningChart,
    SolidFill,
    ColorRGBA,
    UIElementBuilders,
    UILayoutBuilders,
    Themes
} = lcjs

// Extract required parts from xyData.
const {
    createProgressiveRandomGenerator
} = require('@arction/xydata')

// Define colors
const red = new SolidFill({ color: ColorRGBA(255, 100, 100) })
const blue = new SolidFill({ color: ColorRGBA(100, 100, 255) })

// Initiate chart
const chart3D = lightningChart().Chart3D({
    // theme: Themes.dark
})
    .setTitle('3D Scatter Chart')

// Set Axis titles
chart3D.getDefaultAxisX().setTitle('Axis X')
chart3D.getDefaultAxisY().setTitle('Axis Y')
chart3D.getDefaultAxisZ().setTitle('Axis Z')

// Create two new Point Series
const blueSeries = chart3D.addPointSeries({ pointShape: 'sphere' })
    .setPointStyle((pointStyle) => pointStyle
        // Change the point fillStyle.
        .setFillStyle(blue)
        // Change point size.
        .setSize(30))
const redSeries = chart3D.addPointSeries({ pointShape: 'sphere' })
    .setPointStyle((pointStyle) => pointStyle
        .setFillStyle(red)
        .setSize(30))

// Add layout UI Element for checkboxes.
const layout = chart3D.addUIElement(UILayoutBuilders.Column)
    .setPosition({ x: 90, y: 90 })
    .setOrigin({ x: 1, y: 1 })

// Flag for camera rotation
let rotateCamera = false
// Add button for toggling camera rotation into the layout UI Element
const rotateCameraButton = layout.addElement(UIElementBuilders.CheckBox)
    .setText('Rotate camera')
rotateCameraButton.onSwitch((_, state) => {
    rotateCamera = state
})
rotateCameraButton.setOn(rotateCamera)

// Method to handle animating camera rotation.
let cameraAngle = 0
const dist = 1
const animateCameraRotation = () => {
    if (rotateCamera) {
        chart3D.setCameraLocation(
            {
                x: Math.cos(cameraAngle) * dist,
                y: 0.50,
                z: Math.sin(cameraAngle) * dist
            }
        )
        cameraAngle += 0.005
    }
    requestAnimationFrame(animateCameraRotation)
}
animateCameraRotation()

// Generate points for the red series.
createProgressiveRandomGenerator()
    .setNumberOfPoints(30)
    .generate()
    .toPromise()
    .then((d) => d.map((p) => ({
        x: p.x - 1,
        y: p.y * 1,
        z: Math.random()
    })))
    .then((d) => {
        setInterval(() => {
            redSeries.add(d.splice(0, 10))

        })
    })

// Generate points for the blue series.
createProgressiveRandomGenerator()
    .setNumberOfPoints(30)
    .generate()
    .toPromise()
    .then((d) => d.map((p) => ({
        x: p.x - 1,
        y: p.y * 1,
        z: Math.random()
    })))
    .then((d) => {
        setInterval(() => {
            blueSeries.add(d.splice(0, 10))

        })
    })

3D Scatter Chart

Also known as a Scatter Graph, Scatter Series, Point Graph, Scatter diagram or Scattergram

This example shows a simple 3D Point Graph with points drawn using 3D PointSeries for a visual representation of the data points 'markers'. The point graph is a type of chart or mathematical diagram drawn on a Cartesian coordinate system and represents the relationship between two variables.

This type of series does not contain the visual representation of lines for the connection of data points but only data 'markers'.

The chart can be created with few simple lines of code:

// Create a new ChartXY.
const chart3D = lightningChart().Chart3D()

// Add a line series using default X, Y and Z axes.
const series = chart3D.addPointSeries()

The series accepts points in format { x: number, y: number, z:number }. Any number of points can be added with a single call.

// Single point.
series.add({ x: 50, y: 60, z: 40 })

// Multiple points at once.
series.add([
    { x: 55, y: 60, z:40 },
    { x: 60, y: 62, z:40 },
    { x: 65, y: 65, z:50 }
])