Close Editor Run Reset Auto Update CJS /*
* LightningChartJS example that showcases BoxSeries3D with rounded edges.
*/
// Import LightningChartJS
const lcjs = require('@arction/lcjs')
// Extract required parts from LightningChartJS.
const {
lightningChart,
AxisScrollStrategies,
PalettedFill,
ColorRGBA,
LUT,
UILayoutBuilders,
UIOrigins,
UIElementBuilders,
Themes
} = lcjs
const {
createWaterDropDataGenerator
} = require('@arction/xydata')
const chart3D = lightningChart().Chart3D( {
disableAnimations: true,
// theme: Themes.darkGold
} )
.setTitle( 'BoxSeries3D with rounded edges enabled' )
chart3D.getDefaultAxisY()
.setScrollStrategy( AxisScrollStrategies.expansion )
.setTitle( 'Height' )
chart3D.getDefaultAxisX()
.setTitle( 'X' )
chart3D.getDefaultAxisZ()
.setTitle( 'Z' )
const boxSeries = chart3D.addBoxSeries()
const resolution = 10
// Create Color Look-Up-Table and FillStyle
const lut = new LUT( {
steps: [
{ value: 0, color: ColorRGBA( 0, 0, 0 ) },
{ value: 30, color: ColorRGBA( 255, 255, 0 ) },
{ value: 45, color: ColorRGBA( 255, 204, 0 ) },
{ value: 60, color: ColorRGBA( 255, 128, 0 ) },
{ value: 100, color: ColorRGBA( 255, 0, 0 ) }
],
interpolate: true
} )
boxSeries
.setFillStyle( new PalettedFill( { lut, lookUpProperty: 'y' } ) )
// Specify edge roundness.
// For applications with massive amounts of small Boxes, it is wise to disable for performance benefits.
.setRoundedEdges( 0.4 )
// Add LegendBox to chart.
const legend = chart3D.addLegendBox()
// Dispose example UI elements automatically if they take too much space. This is to avoid bad UI on mobile / etc. devices.
.setAutoDispose({
type: 'max-width',
maxWidth: 0.30,
})
.add(chart3D)
// Generate height map data.
createWaterDropDataGenerator()
.setRows( resolution )
.setColumns( resolution )
.generate()
.then( waterdropData => {
let t = 0
const step = () => {
const result = []
for ( let x = 0; x < resolution; x++ ) {
for ( let y = 0; y < resolution; y++ ) {
const s = 1
const height = Math.max(
waterdropData[y][x] +
50 * Math.sin( ( t + x * .50 ) * Math.PI / resolution ) +
20 * Math.sin( ( t + y * 1.0 ) * Math.PI / resolution ), 0 )
const box = {
xCenter: x,
yCenter: height / 2,
zCenter: y,
xSize: s,
ySize: height,
zSize: s,
// Specify an ID for each Box in order to modify it during later frames, instead of making new Boxes.
id: String( result.length ),
}
result.push( box )
}
}
boxSeries
.invalidateData( result )
t += 0.1
requestAnimationFrame( step )
}
step()
})
// Animate Camera movement from file.
;(async () => {
const cameraAnimationData = await (
fetch( document.head.baseURI + 'examples/assets/0907/camera.json' )
.then( r => r.json() )
)
if ( ! cameraAnimationData ) {
console.log(`No Camera animation data.`)
return
}
console.log(`Loaded Camera animation data.`)
let frame = 0
const nextFrame = () => {
if ( cameraAnimationEnabledCheckbox.getOn() ) {
const { cameraLocation } = cameraAnimationData.frames[Math.floor(frame) % cameraAnimationData.frames.length]
chart3D.setCameraLocation( cameraLocation )
frame += 1.5
}
requestAnimationFrame( nextFrame )
}
requestAnimationFrame( nextFrame )
})()
// * UI controls *
const group = chart3D.addUIElement(UILayoutBuilders.Column)
group
.setPosition( { x: 0, y: 100 } )
.setOrigin( UIOrigins.LeftTop )
.setMargin( 10 )
.setPadding( 4 )
// Dispose example UI elements automatically if they take too much space. This is to avoid bad UI on mobile / etc. devices.
.setAutoDispose({
type: 'max-height',
maxHeight: 0.30,
})
// Add UI control for toggling camera animation.
const handleCameraAnimationToggled = ( state ) => {
cameraAnimationEnabledCheckbox.setText( state ? 'Disable camera animation' : 'Enable camera animation' )
if ( cameraAnimationEnabledCheckbox.getOn() !== state ) {
cameraAnimationEnabledCheckbox.setOn( state )
}
}
const cameraAnimationEnabledCheckbox = group.addElement( UIElementBuilders.CheckBox )
cameraAnimationEnabledCheckbox.onSwitch((_, state) => handleCameraAnimationToggled( state ))
handleCameraAnimationToggled( true )
chart3D.onBackgroundMouseDrag(() => {
handleCameraAnimationToggled( false )
})
JavaScript 3D Box Series rounded edges - Editor This example shows an animated 3D Bar Chart with bars coloured dynamically based on their height.
The Chart is rendered using BoxSeries3D
, a series type capable of rendering any number of Boxes as well as allowing individual full level modification (location, size, color) at any point during runtime.
The example also showcases the rounded edges feature. While enabled by default, it can be adjusted and disabled at any time with BoxSeries3D.setRoundedEdges
BoxSeries3D
supports input data in two different formats, namely:
BoxDataCentered
(specify Box center coordinate and size)BoxDataBounds
(specify Box start and end coordinates)On top of this geometry information, one can also supply the following optional properties:
id :By supplying an ID, the Boxes' properties can be modified later (by passing the same id ). When modifying a previously added Box, all properties (other than id ) are optional (supplied properties are overridden).
BoxSeries3D. invalidateData ( [ {
xCenter: 0 ,
yCenter: 0 ,
zCenter: 0 ,
xSize: 1 ,
ySize: 1 ,
zSize: 1 ,
id: 'box-#0'
} ] )
BoxSeries3D. invalidateData ( [ {
id: 'box-#0' ,
yCenter: 5
} ] )
color :Assigns a Color to the Box to be used when individual coloring mode is enabled.
BoxSeries3D. invalidateData ( [ {
... ,
color: ColorRGBA ( 255 , 0 , 0 )
} ] )
BoxSeries3D. setFillStyle ( new IndividualPointFill ( ) )
value :Assigns a look-up value to the Box to be used when look-up coloring mode is enabled.
const lut = new LUT ( {
steps: [
{ value: 0 , color: ColorRGBA ( 0 , 0 , 0 ) } ,
{ value: 100 , color: ColorRGBA ( 255 , 0 , 0 ) }
] ,
interpolate: true
} )
BoxSeries3D. invalidateData ( [ {
... ,
value: 50
} ] )
BoxSeries3D. setFillStyle ( new PalettedFill ( { lut } ) )